Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CodePen

Kurztipp: Fügen Sie Ihren CodePen-Demos eine @supports CSS-Datei hinzu

by
Read Time:3 minsLanguages:

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:

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.

nicht uterstützt werden. Fügen wir dazu eine Bedingung hinzu::

"Wenn initial-letter oder -webkit-initial-letter unterstützt werden, wird die Benachrichtigung über den .support-initial-letter notification nicht angezeigt.".

@supports-Benachrichtigung auf ihren Stiften verwenden. Jen Simmons macht es, Rachel Andrew macht es und wir machen es. Wenn Sie Ihre Benachrichtigungsstile in einen externen Stift ziehen, können Sie die Dinge perfekt verwalten und gleichzeitig Ihr Markup sauber halten. Aktualisieren Sie die Nachrichten, fügen Sie neue CSS-Eigenschaften hinzu, wenden Sie saisonales Branding an, verrückt! Lassen Sie uns in den Kommentaren wissen, wie Sie @supports verwenden..

  • CSS Feature Detection: Modernizr oder Feature Queries?>
  • @supports auf MDNN
  • Hinzufügen externer Ressourcen zu CodePenn
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.