Accentsconagua
Share
Wenn Ihre CodePen-Demos auf modernste CSS angewiesen sind, sollten Sie die Leute warnen. Lassen Sie uns eine Benachrichtigung bereitstellen, wenn Browser unsere Demos nicht unterstützen @Unterstützung Regel, um ein praktisches wiederverwendbares CodePen-Asset zu erstellen.
Hier ist, worauf wir hinarbeiten; eine wiederverwendbare Benachrichtigung, um nicht unterstützte CSS hervorzuheben. Es wird fast vollständig in einem eigenen Stift gehalten, den wir über ein Externes CSS Verknüpfung:
Sie werden feststellen, dass wir es in Tuts + für CSS-Tutorials wie folgt verwenden:
CSS @supports gibt es schon seit ein paar Jahren und genießt eine recht anständige Browserunterstützung. Es ermöglicht uns zu leisten Funktionsabfragen, CSS nur dann anwenden, wenn die angegebenen Eigenschaften vom Browser zur Zeit unterstützt werden. Dies verhindert halb ausgeführte Stilregeln und erlaubt uns sogar, eine Warnung anzuzeigen, wenn wir dies wünschen.
Es funktioniert, indem Stildeklarationen in eine Bedingung wie folgt verpackt werden:
@supports (display: grid) div / * Wenn CSS-Grid unterstützt wird, tun Sie etwas * /
Lassen Sie uns ein paar schnelle Benachrichtigungen zusammenstellen:
Wir fügen den Textinhalt über ein Pseudoelement damit wir es von einem einzigen Ort aus kontrollieren können. Diese Labels werden letztendlich für viele Demos verwendet. Wenn Sie die Inhalte getrennt halten, können Sie sie alle auf einmal ändern.
.support-initial-letter :: after content: "✋🏼 Halten Sie den Cowboy fest; der Anfangsbuchstabe wird in Ihrem Browser nicht unterstützt.";
Fühlen Sie sich frei, diese zu gestalten, wie Sie möchten.
Unsere Benachrichtigungen sind standardmäßig sichtbar, wir möchten jedoch, dass sie nur angezeigt werden, wenn ihre jeweiligen Eigenschaften angezeigt werden nicht unterstützt. Fügen wir dazu eine Bedingung hinzu:
@supports (Anfangsbuchstabe: 1) oder (-webkit-Anfangsbuchstabe: 1) .support-Anfangsbuchstabe :: after display: none;
Hier sagen wir "Wenn Anfangsbuchstaben oder -webkit-Anfangsbuchstaben unterstützt werden, wird die Benachrichtigung" .support-Anfangsbuchstaben "nicht angezeigt.".
Dann wiederholen wir dies für jede Benachrichtigung und geben uns den folgenden fertigen Stift:
Wie viele Benachrichtigungen können Sie sehen??
Wenn unser Stift gespeichert ist, können wir ihn von anderen Stiften referenzieren, was uns zu einem äußerst nützlichen externen Gut macht. Fügen Sie es als externe CSS-Datei einem neuen Stift hinzu:
Dies wird nur das CSS abrufen und dabei jeglichen HTML- oder JS-Code ignorieren, den wir dort haben. Fügen Sie nun das gewünschte Benachrichtigungselement zum HTML-Code Ihres neuen Stiftes hinzu:
Und das ist es, fertig! Jedes Mal, wenn Sie Ihren @supports-Stift aktualisieren, werden diese Änderungen auf alle Demos angewendet, für die Sie ihn verwendet haben.
Sie werden feststellen, dass viele innovative CodePenner einen verwenden @supports Benachrichtigung an ihren Stiften; Jen Simmons macht es, Rachel Andrew macht es, und wir machen es. Das Einrichten Ihrer Benachrichtigungsstile in einen externen Stift ist die perfekte Möglichkeit, Dinge zu verwalten, während Ihre Markierungen sauber bleiben. Aktualisieren Sie die Nachrichten, fügen Sie neue CSS-Eigenschaften hinzu, wenden Sie das saisonale Branding an, gehen Sie durch! Teilen Sie uns mit, wie Sie es verwenden @supports in den Kommentaren.
