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)
4 Antworten zu „CSS3: Native Feature-Detection mit @supports“
— was ist Deine Meinung?
Also diese native Feature-Detection mit der @supports-Regel ist eine schöne Sache. danke für den Tipp.
Im Beispiel wurde wohl etwas vergessen 😉
box-shaow: 5px 5px 10px 10px black;
Klingt sehr interessant, aber solange nur Opera dies unterstützt ist es für mich unbrauchbar. Es bleibt abzuwarten, was noch kommt.
Ich freue mich auf das Web, wo man jede geile Funktionalität nutzen kann ohne auf irgendwelche Browser achten zu müssen. Dann wird das Web revolutioniert! 😉