CSS @supports Regel

David Walsh berichtet heute über weiter reichende Unterstützung diverser Browser der @supports – Regel, auch das W3C hat Ende März sein Dokument zu den Conditional Rules aktualisiert.

Wer es noch nicht schon gelesen hat, die @supports-Regel dient zum Abfragen, Testen und Filtern per CSS oder JavaScript, ob bestimmte CSS-Eigenschaften auf dem jeweiligen Browser verfügbar sind, oder eben nicht.

Grundsätzliche Funktionsweise hierbei:

<style>
@supports (Eigenschaft:Wert) {
Element {
/* Elementeigenschaften */
}
}
</style>

Zu deutsch: Wenn der Browser die Darstellung dieser Eigenschaft mit diesem Wert unterstützt, dann (und nur dann) wende die folgenden Style-Deklarationen für ein Element xy an. (diese folgenden Eigenschaften müssen aber nicht zwangsläufig zu der wenn-Frage gehören!)

Hierzu gibt es auch eine Verneinung, also eine Negation:

<style>
@supports not (Eigenschaft:Wert) {
Element {
/* Elementeigenschaften */
}
}
</style>

Zu deutsch: Wenn der Browser die Darstellung dieser Eigenschaft mit diesem Wert NICHT unterstützt, dann (und nur dann) wende die folgenden Style-Deklarationen für ein Element xy an.

Hört sich doch eindeutig nach einer Browserweiche an, oder? 😀
Die @supports-Regel lässt sich analog zur @media-Regel mit „und“ oder „oder“ kombinieren.

Beispiele hierfür:

<style>
@supports (Eigenschaft: Wert) or
(Eigenschaft2: -moz-Wert2) or
(Eigenschaft3: Wert3) {
Element {
/* Elementeigenschaften */
}
}
</style>

<style>
@supports ((Eigenschaft: Wert) or
(Eigenschaft2: -moz-Wert2)) and
(Eigenschaft3: Wert3)
{
Element {
/* Elementeigenschaften */
}
}
</style>

Analog hierzu lassen sich auch die Verneinungen kombinieren.

Wenn Euer aktueller Browser die @supports-Regel unterstützt, solltet ihr oberhalb dieses Satzes eine halbtransparente schwarze Box der Größe 50px*50px sehen!

Kommentar (1)

  1. Ich konnte das bisher mit Firefox nightly und Opera Next (03.04.2013) erfolgreich testen.

Kommentare sind geschlossen.