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:

• 

  Bessere CSS-Drop-Caps mit “initial-letter”

  Drop Caps sind eine Form der Dekoration, die manchmal am Anfang eines Textblocks verwendet wird. der Anfangsbuchstabe, der mehrere Zeilen tief ist und den Körper einkerbt...
• 

  Spaß mit dem CSS von morgen: Hintergrundfilter

  In diesem Tutorial werden wir uns ein aufstrebendes CSS-Spielzeug mit dem Namen "Hintergrundfilter" ansehen.

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.";
}

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

@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {
  .support-initial-letter::after {
    display: none;
  }
}

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

<div class="support-backdrop-filter"></div>

@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