Accentsconagua
Share
Lorsque vos démonstrations CodePen s'appuient sur des CSS de pointe, il est judicieux d'avertir les utilisateurs. Fournissons une notification lorsque les navigateurs ne prennent pas en charge nos démos, en utilisant le @soutien règle pour créer un actif CodePen réutilisable.
Voici ce que nous travaillons; une notification réutilisable pour mettre en évidence les CSS non pris en charge. Il sera conservé presque entièrement dans son propre stylo, que nous pourrons ajouter à d’autres démos via un CSS externe lien:
Vous constaterez que nous l'utilisons sur Tuts + pour les tutoriels CSS comme suit:
CSS @les soutiens existe depuis quelques années et bénéficie d’un support de navigateur assez décent. Cela nous permet d'effectuer requêtes sur les fonctionnalités, appliquer CSS uniquement si les propriétés spécifiées sont prises en charge par le navigateur à ce moment-là. Cela évite les règles de style à moitié exécutées et permet même d’afficher un avertissement si on le souhaite..
Cela fonctionne en encapsulant les déclarations de style dans une condition, comme ceci:
@supports (display: grid) div / * lorsque CSS Grid est supporté, faites quelque chose * /
Préparons quelques notifications rapides:
Nous ajoutons le contenu textuel via un pseudo élément afin que nous puissions le contrôler depuis un seul endroit. Ces étiquettes seront finalement utilisées dans de nombreuses démos. Par conséquent, en séparant le contenu, vous pourrez les modifier en une fois..
.support-initial-letter :: after content: "✋🏼 Attendez un cow-boy; la lettre initiale n'est pas prise en charge par votre navigateur.";
N'hésitez pas à les coiffer comme vous le souhaitez.
Nos notifications sont visibles par défaut, mais nous souhaitons qu’elles ne soient affichées que lorsque leurs propriétés respectives sont respectées. ne sont pas prise en charge. Ajoutons une condition pour le faire:
@supports (lettre initiale: 1) ou (-webkit-lettre-initiale: 1) .support-lettre-initiale :: after display: none;
Ici nous disons "Si la lettre initiale ou -webkit-initial-letter est prise en charge, n'affichez pas la notification .support-initial-letter".
Nous répétons ensuite cela pour chacune des notifications, en nous donnant le stylo fini suivant:
Combien de notifications pouvez-vous voir?
Avec notre stylo enregistré, nous pouvons le référencer à partir d’autres stylos, ce qui nous donne un atout externe extrêmement utile. Ajoutez-le à un nouveau stylo en tant que fichier CSS externe:
Cela ne fera que tirer dans le CSS, en ignorant tout code HTML ou JS que nous avons, alors ajoutez maintenant l'élément de notification dont vous avez besoin au HTML de votre nouveau stylo:
Et c'est tout, fait! Chaque fois que vous mettez à jour votre stylet @supports, ces modifications seront répercutées sur toutes les démos sur lesquelles vous l'avez utilisé..
Vous remarquerez beaucoup de CodePenners à la pointe en utilisant un @les soutiens notification sur leurs stylos; Jen Simmons le fait, Rachel Andrew le fait et nous le faisons. Tirer vos styles de notification dans un stylo externe est le moyen idéal pour gérer vos tâches tout en préservant la propreté de votre marquage. Mettez à jour les messages, ajoutez de nouvelles propriétés CSS, appliquez une stratégie de marque saisonnière, allez fou! Dites-nous comment vous utilisez @les soutiens dans les commentaires.
