0 Reaktionen

Firefox 29 mit Unterstützung von CSS-Variablen

Geschätzte Lesedauer:

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]

Dieser Artikel wurde von Sören Hentzschel verfasst.

Sören Hentzschel ist Webentwickler aus Salzburg. Auf soeren-hentzschel.at informiert er umfassend über Neuigkeiten zu Mozilla. Außerdem ist er Betreiber von camp-firefox.de, der ersten Anlaufstelle im deutschsprachigen Raum für Firefox-Probleme aller Art. Weitere Projekte sind firefox.agenedia.com, mozilla.de, firefoxosdevices.org sowie sozone.de.

Und jetzt du! Deine Meinung?

Erforderliche Felder sind mit einem Asterisk (*) gekennzeichnet. Die E-Mail-Adresse wird nicht veröffentlicht.
  1. Nach Absenden des Kommentar-Formulars erfolgt eine Verarbeitung der von Ihnen eingegebenen personenbezogenen Daten durch den datenschutzrechtlich Verantwortlichen zum Zweck der Bearbeitung Ihrer Anfrage auf Grundlage Ihrer durch das Absenden des Formulars erteilten Einwilligung.
    Weitere Informationen