CSS3: Native Feature-Detection mit @supports

Wer mit CSS3 arbeitet, läuft immer Gefahr, dass ein Browser bestimmte CSS-Eigenschaften nicht interpretieren kann. Das betrifft nicht nur ältere Browser, wie der aktuelle Internet Explorer beweist. Dienste wie Modernizer erkennen, welche Eigenschaften ein Browser versteht und welche nicht. Mit der „@supports“-Regel gibt es jedoch auch eine native Feature-Detection – derzeit allerdings nur für Opera.

CSS-Eigenschaften mit „@supports“ definieren

Mit der „@supports“-Regel ist es möglich festzustellen, ob ein Browser eine bestimmte CSS-Eigenschaft beherrscht. Nur wenn dies der Fall ist, werden die CSS-Regeln, die innerhalb von„@supports“ definiert sind, auch ausgeführt:

@supports (box-shadow: 5px 5px 10px 10px black) {
  div {
    box-shaow: 5px 5px 10px 10px black;
  }
}

Die Eigenschaft in der runden Klammer gibt die zu prüfende Eigenschaft an. Alles, was in der geschwungenen Klammer steht, wird ausgeführt, wenn der Browser die zu prüfende Eigenschaft versteht. Interessant wird die Funktion natürlich erst, wenn man auch eine Alternative ausgeben kann – für den Fall, dass der Browser die Eigenschaft eben gerade nicht unterstützt:

@supports not (box-shadow: 5px 5px 10px 10px black) {
  div {
    border: 1px black;
  }
}

Im Beispiel wird für den Fall, dass ein Browser die Eigenschaft „box-shadow“ nicht unterstützt, ein einfacher schwarzer Rahmen gezeichnet.

Komplexe Abfragen mit AND und OR

Mit der „@supports“-Regel sind auch Abfragen mehrerer Eigenschaften gleichzeitig möglich. Dazu gibt es die beiden Operatoren AND und OR, die sich beliebig kombinieren lassen, um komplexe Abfragen realisieren zu können:

@supports (text-shadow: 5px 5px 5px black) and (box-shadow: 5px 5px 10px 10px black) {
  div {
    text-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 10px 10px black;
  }
}

@supports (text-shadow: 5px 5px 5px black) and not (box-shadow: 5px 5px 10px 10px black) {
  div {
    border: 1px black;
    box-shadow: 5px 5px 10px 10px black;
  }
}

Wie man es aus Programmiersprachen kennt, ist es möglich, mehrere AND- und OR-Abfragen zu verschachteln, indem man sie in runde Klammern setzt.

Browser-Unterstützung

Derzeit unterstützt nur Opera ab Version 12.10 die „@supports“-Regeln. Mozillas Firefox soll mit der Version 17 folgen. Da beide Browser bereits einen Großteil aktueller CSS-Eigenschaften unterstützen, wird man die „@supports“-Regel erst zukünftig sinnvoll einsetzen können – wenn es mit CSS4 wieder neue Eigenschaften gibt.

(dpe)