Funktionen maßgeschneidert

Zu den wichtigsten Handwerkszeugen eines Programmierers gehören Funktionen (oder Methoden oder Prozeduren oder Subroutinen oder…). Man packt einen Teil der Logik in einen Behälter, den man an verschiedenen Stellen einfach wieder aufrufen kann. Damit spart man sich nicht nur, den Code zu wiederholen, sondern kann ihn auch ein Stück weit in der Funktion “verstecken”: Es braucht den Verwender nicht zu interessieren, wie genau die Funktion tut was sie tut. Funktionen können also ausgesprochen praktisch sein.

Bald dürften auch Entwickler, die mit CSS arbeiten, in diesen Genuss kommen. Denn obwohl CSS streng genommen keine “richtige” Programmiersprache ist, sondern eher eine Stylesheet-Sprache, lernt sie immer mehr dazu. Und zumindest in Chrome-basierten Browsern werden bereits im April 2026 @functions unterstützt.

Definiert werden CSS-Funktionen mit der At-Rule @function und einem Namen, der mit zwei Minuszeichen beginnen muss. Den Rückgabewert liefert man mit einer eigenen Property namens result. Frühere Fassungen verwendeten eine At-Rule @return, aber das wird mittlerweile nicht mehr unterstützt.

@function --size(--value) {
    result: calc(100px * var(--value));
}

.card {
    width: --size(3);
    height: 100px;
}

In einem so einfachen Beispiel ist eine eigene Funktion noch nicht sehr hilfreich. Man könnte auch den Faktor in eine Variable packen direkt in .card berechnen:

--width-multiplier: 100;

.card {
    --card-width: 3;
    width: calc(var(--card-width) * var(--width-multiplier) * 1px);
    height: 100px;
}

Schon interessanter wird es wenn man sich überlegt, dass es mehrere result-Properties geben kann. Im Unterschied zu einer typischen “richtigen” Programmiersprache springt hier nicht das erste return aus der Funktion, sondern das letzte result gewinnt:

@function --dynamic-color() {
    /* Fallback als RGB */
    result: rgb(0, 102, 255);
    
    /* wenn der Browser LAB unterstützt */
    @supports (color: lab(44% -1 -66)) {
        result: lab(44% -1 -66);
    }
    
    /* wenn der Browser LCH unterstützt */
    @supports (color: lch(44% 68 265)) {
        result: lch(44% 68 265);
    }

  .card {
    color: --dynamic-color();
  }
}

Besonders praktisch wäre es natürlich, wenn man einen Farbwert als Parameter übergeben könnte, und --dynamic-color() würde eine Entsprechung in den anderen Farbräumen automatisch berechnen. Aber das würde in diesem Blogbeitrag doch etwas zu weit führen.

Insgesamt sind @functions eine weitere, sehr vielversprechende Ergänzung zum “klassischen” CSS, auch wenn sich Entwickler auf den einen oder anderen Unterschied im Vergleich zu anderen Sprachen einstellen müssen.