Épisser l'ADN du HTML avec les sélecteurs d'attributs CSS
Publié: 2022-03-10Pendant la majeure partie de ma carrière, les sélecteurs d'attributs ont été plus magiques que scientifiques. Je regarderais, abasourdi, le CSS pour avoir sorti un lien dans une feuille de style d'impression, sans rien comprendre. Je le copierais et le collerais consciencieusement dans ma feuille de style d'impression, puis je m'enfuirais pour publier n'importe quel projet qui était le plus gros tas de déchets en feu.
Mais vous n'avez plus besoin de rester bouche bée devant les sélecteurs d'attributs CSS. À la fin de cet article, vous les utiliserez pour exécuter des diagnostics sur votre site, résoudre des problèmes autrement insolubles et générer des expériences technologiques si avancées qu'elles semblent magiques. Vous pensez peut-être que je promets trop et vous avez raison, mais une fois que vous aurez compris le pouvoir des sélecteurs d'attributs, vous aurez peut-être envie de vous exagérer.
Au niveau le plus basique, vous mettez un attribut HTML entre crochets et l'appelez un sélecteur d'attribut comme ceci :
[href] { color: chartreuse; } Le texte de tout élément qui a un href et qui n'a pas de sélecteur plus spécifique se transformera désormais comme par magie en chartreuse. La spécificité du sélecteur d'attribut est la même que celle des classes.
Note : Pour en savoir plus sur la cage match qui est une spécificité CSS, vous pouvez lire « CSS Specificity : Things You Should Know » ou si vous aimez Star Wars : « CSS Specificity Wars ».
Mais vous pouvez faire beaucoup plus avec les sélecteurs d'attributs. Tout comme votre ADN, ils ont une logique intégrée pour vous aider à choisir toutes sortes de combinaisons et de valeurs d'attributs. Au lieu de correspondre exactement comme le ferait un sélecteur de balise, de classe ou d'identifiant, ils peuvent correspondre à n'importe quel attribut et même aux valeurs de chaîne dans les attributs.
Sélection d'attribut
Les sélecteurs d'attributs peuvent vivre seuls ou être plus spécifiques, c'est-à-dire si vous devez sélectionner toutes les balises div qui avaient un attribut de title .
div[title]Mais vous pouvez également sélectionner les enfants des divs qui ont un titre en procédant comme suit :
div [title]Pour être clair, aucun espace entre eux signifie que l'attribut est sur le même élément (tout comme un élément et une classe sans espace), et un espace entre eux signifie un sélecteur descendant, c'est-à-dire la sélection des enfants de l'élément qui ont l'attribut.
Vous pouvez obtenir beaucoup plus de précision dans la manière dont vous sélectionnez les attributs, y compris les valeurs des attributs.
div[title="dna"]Ce qui précède sélectionne toutes les divs avec un titre exact de "adn". Un titre de "l'ADN est génial" ou "dnamutation" ne serait pas sélectionné, bien qu'il existe des algorithmes de sélection qui gèrent chacun de ces cas (et plus). Nous y reviendrons bientôt.
Remarque : les guillemets ne sont pas requis dans les sélecteurs d'attributs dans la plupart des cas, mais je les utiliserai car je pense que cela augmente la clarté et garantit que les cas limites fonctionnent correctement.
Si vous vouliez sélectionner "adn" dans une liste séparée par des espaces comme "mon bel adn" ou "la mutation de l'adn est amusante !" vous pouvez ajouter un tilde ou "squiggly", comme j'aime l'appeler, devant le signe égal.
div[title~="dna"]Vous pouvez sélectionner des titres tels que "dontblamemeblamemydna" ou "his-stupidity-is-from-upbringing-not-dna", puis vous pouvez utiliser le signe dollar $ pour correspondre à la fin d'un titre.
[title$="dna"]Pour faire correspondre le devant d'une valeur d'attribut telle que les titres de "dnamutants" ou "dna-splicing-for-all", utilisez un caret.
[title^="dna"]Bien qu'il soit utile d'avoir une correspondance exacte, la sélection peut être trop restreinte et la correspondance du curseur peut être trop large pour vos besoins. Par exemple, vous ne voudrez peut-être pas sélectionner le titre « généalogie », mais sélectionner à la fois « gène » et « données génétiques ». Le caractère pipe (ou barre verticale) n'est que cela; il fait une correspondance exacte, mais inclut quand la correspondance exacte est suivie d'un tiret.
[title|="gene"]Enfin, il existe un opérateur d'attribut de recherche complet qui correspondra à n'importe quelle sous-chaîne.
[title*="dna"]Mais utilisez-le à bon escient car ce qui précède correspondra à "j'aime-mon-adn-comme-ma-viande-rare" ainsi qu'à "edna", "kidnapping" et "echidnas" (quelque chose qu'Edna ne devrait vraiment pas faire. )
Ce qui rend ces sélecteurs d'attributs encore plus puissants, c'est qu'ils sont empilables, ce qui vous permet de sélectionner des éléments avec plusieurs facteurs de correspondance.
Mais vous avez besoin de trouver a balise qui a un titre et une classe se terminant par "gènes" ? Voici comment:
a[title][class$="genes"]Non seulement vous pouvez sélectionner les attributs d'un élément HTML, mais vous pouvez également imprimer leurs gènes mutés en utilisant la pseudo-« science » (c'est-à-dire les pseudo-éléments et la déclaration de contenu).
<span class="joke" title="Gene Editing!">What's the first thing a biotech journalist does after finishing the first draft of an article?</span> .joke:hover:after { content: "Answer:" attr(title); display: block; }Le code ci-dessus montrera la réponse à l'une des pires blagues jamais écrites en survol (oui, je l'ai écrite moi-même et, oui, l'appeler une «blague» est généreux).
La dernière chose à savoir est que vous pouvez ajouter un indicateur pour rendre les recherches d'attributs insensibles à la casse. Vous ajoutez un i avant le crochet fermant.
[title*="DNA" i]Et ainsi, cela correspondrait à "dna", "DNA", "dnA" et à toute autre variation.
Le seul inconvénient est que le i ne fonctionne que dans Firefox, Chrome, Safari, Opera et une poignée de navigateurs mobiles.
Maintenant que nous avons vu comment sélectionner avec des sélecteurs d'attributs, examinons quelques cas d'utilisation. Je les ai divisés en deux catégories : Utilisations générales et Diagnostics .
Utilisations générales
Style par type d'entrée
Vous pouvez styliser les types d'entrée différemment, par exemple e-mail ou téléphone.
input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; }Afficher les liaisons téléphoniques
Vous pouvez masquer un numéro de téléphone à certaines tailles et afficher un lien téléphonique à la place pour faciliter les appels sur un téléphone.
span.phone { display: none; } a[href^="tel"] { display: block; }Liens internes ou externes, sécurisés ou non sécurisés
Vous pouvez traiter les liens internes et externes différemment et styliser les liens sécurisés différemment des liens non sécurisés.
a[href^="http"]{ color: bisque; } a:not([href^="http"]) { color: darksalmon; } a[href^="https://"]:after { content: url(unlock-icon.svg); } a[href^="https://"]:after { content: url(lock-icon.svg); }Icônes de téléchargement
Un attribut que HTML5 nous a donné était "télécharger" qui indique au navigateur, vous l'avez deviné, de télécharger ce fichier plutôt que d'essayer de l'ouvrir. Ceci est utile pour les PDF et les DOC auxquels vous voulez que les gens accèdent mais que vous ne voulez pas qu'ils ouvrent pour le moment. Cela facilite également le flux de travail pour télécharger de nombreux fichiers à la suite. L'inconvénient de l'attribut de download est qu'il n'y a pas de visuel par défaut qui le distingue d'un lien plus traditionnel. C'est souvent ce que vous voulez, mais quand ce n'est pas le cas, vous pouvez faire quelque chose comme ci-dessous.
a[download]:after { content: url(download-arrow.svg); }Vous pouvez également communiquer les types de fichiers avec différentes icônes comme PDF vs DOCX vs ODF, etc.
a[href$="pdf"]:after { content: url(pdf-icon.svg); } a[href$="docx"]:after { content: url(docx-icon.svg); } a[href$="odf"]:after { content: url(open-office-icon.svg); }Vous pouvez également vous assurer que ces icônes se trouvent uniquement sur des liens téléchargeables en empilant le sélecteur d'attributs.
a[download][href$="pdf"]:after { content: url(pdf-icon.svg); }Remplacer ou réappliquer le code obsolète/obsolète
Nous avons tous rencontré d'anciens sites dont le code est obsolète, mais parfois, la mise à jour du code ne vaut pas le temps qu'il faudrait pour le faire sur six mille pages. Vous devrez peut-être remplacer ou même réappliquer un style implémenté en tant qu'attribut avant HTML5.
<div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div> div[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } div[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }Remplacer des styles en ligne spécifiques
Parfois, vous rencontrerez des styles en ligne qui gomment les travaux, mais ils proviennent de code hors de votre contrôle. Il faut dire que si vous pouvez les changer, ce serait l'idéal, mais si vous ne pouvez pas, voici une solution de contournement.
Remarque : Cela fonctionne mieux si vous connaissez la propriété et la valeur exactes que vous souhaitez remplacer, et si vous voulez qu'elles soient remplacées partout où elles apparaissent.
Pour cet exemple, la marge de l'élément est définie en pixels, mais elle doit être développée et définie en em pour que l'élément puisse se réajuster correctement si l'utilisateur modifie la taille de police par défaut.
<divTeenage Mutant Ninja Myrtle</div> div[style*="margin: 8px"] { margin: 1em !important; } Remarque : Cette approche doit être utilisée avec une extrême prudence, car si jamais vous avez besoin d'outrepasser ce style, vous tomberez dans une guerre !important et les chatons mourront.
Affichage des types de fichiers
La liste des fichiers acceptables pour une entrée de fichier est invisible par défaut. En règle générale, nous utilisons un pseudo-élément pour les exposer et, bien que vous ne puissiez pas créer de pseudo-éléments sur la plupart des balises input (ou pas du tout dans Firefox ou Edge), vous pouvez les utiliser sur les entrées de fichier.
<input type="file" accept="pdf,doc,docx"> [accept]:after { content: "Acceptable file types: " attr(accept); }Menu Accordéon HTML
Les details peu médiatisés et le duo de balises summary sont un moyen de créer des menus extensibles/accordéon avec juste du HTML. Les détails enveloppent à la fois la balise de summary et le contenu que vous souhaitez afficher lorsque l'accordéon est ouvert. Cliquer sur le résumé développe la balise de detail et ajoute un attribut ouvert. L'attribut ouvert facilite le style d'une balise de details ouverte différemment d'une balise de details fermée.
<details> <summary>List of Genes</summary> Roddenberry Hackman Wilder Kelly Luen Yang Simmons </details> details[open] { background-color: hotpink; }Liens d'impression
L'affichage des URL dans les styles d'impression m'a conduit sur cette voie pour comprendre les sélecteurs d'attributs. Vous devriez savoir comment le construire vous-même maintenant. Vous sélectionnez simplement toutes les balises avec a href , ajoutez un pseudo-élément et imprimez-les en utilisant attr() et content .
a[href]:after { content: " (" attr(href) ") "; }Info-bulles personnalisées
Créer des info-bulles personnalisées est amusant et facile avec les sélecteurs d'attributs (d'accord, amusant si vous êtes un nerd comme moi, mais facile de toute façon).
Remarque : Ce code devrait vous mettre dans le voisinage général, mais peut nécessiter quelques ajustements à l'espacement, au rembourrage et à la palette de couleurs en fonction de l'environnement de votre site et si vous avez un meilleur goût que moi ou non.
[title] { position: relative; display: block; } [title]:hover:after { content: attr(title); color: hotpink; background-color: slateblue; display: block; padding: .225em .35em; position: absolute; right: -5px; bottom: -5px; }Clés d'accès
L'un des avantages du Web est qu'il offre de nombreuses options différentes pour accéder à l'information. Un attribut rarement utilisé est la possibilité de définir une accesskey afin que cet élément soit accessible directement via une combinaison de touches et la lettre définie par accesskey (la combinaison de touches exacte dépend du navigateur). Mais il n'y a pas de moyen facile de savoir quelles clés ont été définies sur un site Web.
Le code suivant affichera ces touches sur :focus . Je ne l'utilise pas en hover car la plupart du temps, les personnes qui ont besoin de la accesskey d'accès sont celles qui ont du mal à utiliser une souris. Vous pouvez ajouter cela comme deuxième option, mais assurez-vous que ce n'est pas la seule option.
a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }Diagnostique
Ces options vous aident à identifier les problèmes pendant le processus de génération ou localement tout en essayant de résoudre les problèmes. Les mettre sur votre site de production fera ressortir les erreurs de vos utilisateurs.
Audio sans commandes
Je n'utilise pas trop souvent la balise audio , mais quand je l'utilise, j'oublie souvent d'inclure l'attribut controls . Résultat : rien ne s'affiche. Si vous travaillez dans Firefox, ce code peut vous aider à déterminer si un élément audio se cache ou si la syntaxe ou un autre problème l'empêche d'apparaître (cela ne fonctionne que dans Firefox).
audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; }Pas de texte alternatif
Les images sans texte alternatif sont un cauchemar pour la logistique et l'accessibilité. Ils sont difficiles à trouver en regardant simplement la page, mais si vous ajoutez ceci, ils apparaîtront immédiatement.
Remarque : j'utilise outline au lieu de border car les bordures pourraient ajouter à la largeur de l'élément et gâcher la mise en page. le outline n'ajoute pas de largeur.
img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse; } img[alt=""] { /* alt attribute is blank */ outline: 2em solid cadetblue; }Fichiers Javascript asynchrones
Les pages Web peuvent être un conglomérat de systèmes de gestion de contenu, de plugins, de frameworks et de code que Ted (assis trois cabines plus loin) a écrit en vacances parce que le site était en panne et qu'il craint votre patron. Déterminer ce que JavaScript charge de manière asynchrone et ce qui ne le fait pas peut vous aider à vous concentrer sur les endroits où améliorer les performances de la page.
script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red; } script:after { content: attr(src); }Éléments d'événement Javascript
Vous pouvez également mettre en surbrillance les éléments qui ont un attribut d'événement JavaScript pour les refactoriser dans votre fichier JavaScript. Je me suis concentré ici sur l'attribut OnMouseOver , mais cela fonctionne pour tous les attributs d'événement JavaScript.
[OnMouseOver] { color: burlywood; } [OnMouseOver]:after { content: "JS: " attr(OnMouseOver); }Objets cachés
Si vous avez besoin de voir où se trouvent vos éléments cachés ou vos entrées cachées, vous pouvez les afficher avec :
[hidden], [type="hidden"] { display: block; }Mais avec toutes ces capacités incroyables, vous pensez qu'il doit y avoir un hic. Les sélecteurs d'attributs ne doivent sûrement fonctionner que lorsqu'ils sont signalés dans Chrome ou dans les versions nocturnes de Fiery Foxes on the Edge of a Safari. C'est trop beau pour être vrai. Et, malheureusement, il y a un hic.
Si vous souhaitez travailler avec des sélecteurs d'attributs dans le navigateur le plus apprécié, c'est-à-dire IE6, vous ne pourrez pas le faire. (Ce n'est pas grave, laissez les larmes couler. Pas de jugement.) À peu près partout ailleurs, vous êtes prêt à partir. Les sélecteurs d'attributs font partie de la spécification CSS 2.1 et sont donc présents dans les navigateurs depuis une bonne partie de la décennie.
Et donc ces sélecteurs ne devraient plus vous être magiques mais se révéler comme une technologie suffisamment avancée. Ils relèvent plus de la science que de la magie, et maintenant que vous connaissez leurs secrets les plus profonds, c'est à vous de décider. Allez de l'avant et faites des merveilles mystifiantes de la science sur le Web.