Kurztipp: Fügen Sie Ihren CodePen-Demos eine @supports CSS-Datei hinzu
German (Deutsch) translation by Jaques Donnez (you can also view the original English article)
Wenn Ihre CodePen-Demos auf modernstem CSS basieren, ist es eine gute Idee, die Benutzer zu warnen. Lassen Sie uns eine Benachrichtigung senden, wenn Browser unsere Demos nicht unterstützen. Verwenden Sie die @support
-Regel, um ein praktisches wiederverwendbares CodePen-Asset zu erstellen.
Endresultat
Darauf arbeiten wir hin: eine wiederverwendbare Benachrichtigung zum Hervorheben von nicht unterstütztem CSS. Es wird fast vollständig in einem eigenen Stift gespeichert, den wir über einen externen CSS-Link zu anderen Demos hinzufügen können:



Sie werden feststellen, dass wir es in Tuts+ für CSS-Tutorials wie die folgenden verwenden:
Die @supports-Regel
CSS @supports
gibt es schon seit einigen Jahren und genießt selbst eine recht anständige Browserunterstützung. Es ermöglicht uns, Feature-Abfragen durchzuführen und CSS nur anzuwenden, wenn die angegebenen Eigenschaften zu diesem Zeitpunkt vom Browser unterstützt werden. Dies verhindert halb ausgeführte Stilregeln und ermöglicht es uns sogar, eine Warnung anzuzeigen, wenn wir dies wünschen.
Es funktioniert, indem Stildeklarationen in eine Bedingung wie diese eingeschlossen werden:
@supports (display: grid) { div { /* when CSS Grid is supported, do something */ } }
Benachrichtigungen
Lassen Sie uns ein paar schnelle Benachrichtigungen erstellen:
Wir fügen den Textinhalt über ein Pseudoelement hinzu, damit wir ihn von einem einzigen Ort aus steuern können. Diese Labels werden letztendlich in vielen Demos verwendet. Wenn Sie also den Inhalt getrennt halten, können Sie sie alle auf einmal ändern.
.support-initial-letter::after { content: "✋🏼 Hold on there cowboy; initial-letter is unsupported in your browser."; }
@supports (initial-letter: 1) or (-webkit-initial-letter: 1) { .support-initial-letter::after { display: none; } }



<div class="support-backdrop-filter"></div>
@supports
verwenden..
- CSS Feature Detection: Modernizr oder Feature Queries?>
- @supports auf MDNN
- Hinzufügen externer Ressourcen zu CodePenn