CSS

CSS3: Native Feature-Detection mit @supports

18. Dezember 2012
von

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:

1
2
3
4
5
@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:

1
2
3
4
5
@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:

1
2
3
4
5
6
7
8
9
10
11
12
13
@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)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Tags: , ,

5 Kommentare zu „CSS3: Native Feature-Detection mit @supports
  1. Philipp am 19. Dezember 2012 um 00:25

    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! ;)

  2. Philipp am 19. Dezember 2012 um 09:51

    Klingt sehr interessant, aber solange nur Opera dies unterstützt ist es für mich unbrauchbar. Es bleibt abzuwarten, was noch kommt.

  3. [...] CSS3: Native Feature-Detection mit @supports – Dr. Web Magazin → [...]

  4. Andreas am 20. Dezember 2012 um 17:34

    Im Beispiel wurde wohl etwas vergessen ;)

    box-shaow: 5px 5px 10px 10px black;

  5. Peter Demel am 20. September 2013 um 23:47

    Also diese native Feature-Detection mit der @supports-Regel ist eine schöne Sache. danke für den Tipp.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!