Firefox 29 mit Unterstützung von CSS-Variablen

CSS bietet heute viele Möglichkeiten für Webdesigner, wie sie vor einigen Jahren noch nicht möglich waren. Da alle Browserhersteller permanent bemüht sind, ihre Browser um die Unterstützung möglichst vieler standardisierter CSS-Features zu erweitern, können relativ viele dieser Dinge mittlerweile auch in realen Anwendungen eingesetzt werden. Eine Sache, welche das Leben wirklich vereinfachen könnte, sind Variablen. Firefox bietet ab Version 29 Unterstützung dafür.

Variablen sind noch relativ weit davon entfernt, ein finaler Standard des W3C zu sein, und tragen derzeit noch den Status des Editor’s Drafts. Zweifelsohne handelt es sich dabei aber um ein praktisches Feature und Mozilla hat die Unterstützung hierfür bereits in Firefox 29 implementiert – allerdings vorerst lediglich für Nightly- und Aurora-Versionen von Firefox, da die Implementierung noch nicht ganz vollständig ist. Der dazugehörige about:config-Schalter heißt layout.css.variables.enabled.

Variablen in CSS sind bereits heute mittels Präprozessoren wie SASS oder LESS möglich. Dabei werden deren Stylesheets in richtiges CSS kompiliert und die Variablen sind für das gesamte Stylesheet gültig. Im Gegensatz dazu werden die nativen CSS-Variablen zur Laufzeit auf einer Fall-zu-Fall-Basis interpretiert und können damit auch in Abhängigkeit von Media Queries verändert werden.

CSS-Variablen werden mit dem Bezeichner var- gefolgt von einem Namen und dann einem gültigen CSS-Wert definiert. Das :root im folgenden Beispiel stellt dabei den Gültigkeitsbereich der Variable dar, nämlich das gesamte Dokument. Hier könnte auch ein gewohnter CSS-Selektor stehen, auch das Überschreiben von Variablen ist dadurch möglich. Benutzt werden kann die Variable durch die CSS-Funktion var() mit dem Namen der Variable als Parameter.

[pastacode lang=“css“ message=“CSS“ highlight=““ provider=“manual“]

:root {
  var-logo: #456;
}
 
.selector {
  color: var(logo);
}
 
@media (max-width: 700px) {
  .selector {
    var-logo: #123;
  }
}

[/pastacode]