So verwenden Sie die @ support-Regel in Ihrem CSS

Haben Sie jemals eine Form der CSS-Funktionserkennung verwendet, wie z Modernizr um das Verhalten Ihres CSS danach zu unterscheiden, ob eine Funktion unterstützt wird? Ich wette, die meisten von euch haben. Obwohl wir aufgrund der Kaskadierung von CSS Fallbacks für viele CSS-Funktionen bereitstellen können, indem wir mehrere Deklarationen schreiben, benötigen wir manchmal eine genauere Kontrolle darüber, was angewendet wird, wenn einige unserer neuesten Erkenntnisse nicht vorhanden sind.

Erwägen Randbild . Wenn es nicht unterstützt wird, möchten wir normalerweise einen Fallback bereitstellen Hintergrund und eine andere Rand , was nicht gelten sollte, wenn Randbild gilt. Ein weiterer häufiger Fall sind neue Layoutmodule (Flexbox, Grid Layout und Regionen). Wenn sie nicht verfügbar sind, müssen wir ein alternatives Layout mit Eigenschaften codieren, die mit diesen Technologien in Konflikt stehen können. Dies bedeutet, dass sie nicht nebeneinander existieren können.

Glücklicherweise hat die CSS WG vor einiger Zeit eine elegante und reine CSS-Lösung namens The entwickelt @ unterstützt Regel . Mit dieser Regel würde das Rahmenbildbeispiel wie folgt geschrieben:



.foo { border: 15px solid transparent; border-image: url(fancyborders.png) 33%; } @supports not (border-image: url(foo.png) 33%) { .foo { border: 3px solid rgba(0,0,0,.3); background: url(alternative-bg.png) beige; } }

Dies wird als 'Feature-Abfrage' bezeichnet, die einer Medienabfrage ähnelt. In der Praxis sollten Sie auch nach vorangestellten Versionen suchen:

@supports not (border-image: url(foo.png) 33%) or (-moz-border-image: url(foo.png) 33%) or (-webkit-border-image: url(foo.png) 33%) { ...

Außerdem oder , und und nicht Es stehen Operatoren zur Verfügung, die jede Art von komplexer boolescher Logik ermöglichen. Diese Regeln können verschachtelt werden, was Ihren Code bei Verwendung vieler komplexer Feature-Abfragen erheblich vereinfacht.

Es gibt einen Haken. Es ist unklug zu benutzen @ unterstützt für Funktionen, die von Browsern vor der Unterstützung unterstützt wurden @ unterstützt selbst. Daher können wir es noch nicht für viele Dinge verwenden. Es wird jedoch bereits von Firefox 22+, Chrome 28+ und Opera 12.1+ unterstützt. Wenn IE 11 und Safari 7 dies ebenfalls unterstützen, können wir es für Funktionen verwenden, die bei oder nach diesen Versionen eingeführt wurden.

Die CSS WG erkannte auch, dass die Verwendung von Präfixen für @ unterstützt würde den Zweck irgendwie zunichte machen (da Autoren mehrere Regeln mehrmals schreiben müssten). Daher jeder Browser, der unterstützt @ unterstützt tut dies ohne Präfix. Es gibt keine @ -webkit-unterstützt . Wenn Browser sich über ihre Implementierungen nicht sicher waren, versteckten sie sie hinter einer Flagge, wie es Firefox in den Versionen 17-27 tat.

Sie denken vielleicht, dass dies für CSS großartig ist, aber es hilft Ihnen nicht, CSS-Funktionen über JavaScript zu erkennen, was manchmal erforderlich ist. Glücklicherweise verfügt es auch über eine eigene elegante JavaScript-API: CSS.supports () . Es wird so verwendet:

if (CSS.supports('border-image', 'url(foo.png) 33%')) { ... }

Diese Funktion ist auch einfach zu füllen, sodass sie in Browsern verfügbar gemacht werden kann, die nicht aufgeholt haben. Hoffentlich können wir in Zukunft Unterstützung für andere CSS-Funktionen erkennen, z @ Regeln und Selektoren, anstatt nur Eigenschaften und Werte.

Wörter: Lea Verou

Lea Verou Zuvor war sie als Entwickleranwältin bei W3C tätig und verbringt derzeit ihre Tage damit, ihr erstes Buch mit dem Titel CSS Secrets zu schreiben und zu entwerfen, das 2014 bei O'Reilly veröffentlicht werden soll

Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 248.

Mochte dies? Lese das!