div Splicing HTML’s DNA With CSS Attribute Selectors — Smashing Magazine
Mais vous pouvez également sélectionner les enfants de div ayant un titre en procédant comme suit:
div Splicing HTML’s DNA With CSS Attribute Selectors — Smashing Magazine
Pour être clair, aucun espace entre eux ne 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 désigne un sélecteur de descendant, c'est-à-dire qu'il sélectionne les enfants de l'élément qui possèdent l'attribut .
Vous pouvez obtenir beaucoup plus de précision dans la sélection des attributs, y compris les valeurs des attributs.
div [title="dna"]
Ce qui précède sélectionne toutes les div portant le titre exact de "dna". Un titre "dna is awesome" ou "dnamutation" ne serait pas sélectionné, bien qu'il existe des algorithmes de sélecteur qui gèrent chacun de ces cas (et plus). Nous y reviendrons bientôt.
Note : Les guillemets ne sont pas nécessaires dans les sélecteurs d'attributs dans la plupart des cas, mais je vais les utiliser car je pense qu'ils améliorent la clarté et garantissent le bon fonctionnement des cas marginaux.
Si vous souhaitez sélectionner "ADN" dans une liste séparée par des espaces, comme "mon bel ADN" ou "ADN mutant, c'est amusant!", vous pouvez ajouter un tilde ou "ondulé", comme je le souhaite appelez-le devant le signe égal.
div [title~="dna"]
Vous pouvez sélectionner des titres tels que “dontblamemeblamemydna” ou “his-stupidity-is-from-éducation-not-dna”, vous pouvez utiliser le signe dollar $ pour marquer la fin du titre.
[title$="dna"]
Pour faire correspondre le devant d'une valeur d'attribut, telle que les titres de «noms» ou «dna-splicing-for-all», utilisez un caret.
[title^="dna"]
Bien qu'il soit utile d'avoir une correspondance exacte, il peut s'agir d'une sélection trop serrée, et la correspondance avant du curseur peut être trop large pour vos besoins. Par exemple, vous ne voudrez peut-être pas choisir un titre de «généalogie», mais vous devrez quand même sélectionner à la fois «gène» et «données génétiques». Le point d'exclamation ou «coup», comme je me plais à l'appeler, est exactement ce qu'il fait, il correspond exactement, mais inclut lorsque la correspondance exacte est suivie d'un tiret.
[title!="gene"]
Pour être clair, bien que cette construction signifie souvent “pas égal” dans de nombreux langages de programmation, dans les sélecteurs d'attributs CSS, il s'agit d'une correspondance exacte plus une correspondance exacte au début de la valeur suivie d'un tiret.
Enfin, il existe un opérateur d'attribut de recherche complet qui correspond à n'importe quelle sous-chaîne.
[title*="dna"]
Mais utilisez-le à bon escient car ce qui précède correspond aux mots «je-ressemble-mon-adn-ressemble-ma-viande-rare» ainsi que «edna», «kidnapping» et «echidnas» (quelque chose qu'Edna ne devrait vraiment pas »). t 1965)
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 devez trouver l’étiquette a qui a un titre et une classe se terminant par «gènes»? Voici comment:
a Splicing HTML’s DNA With CSS Attribute Selectors — Smashing Magazine [class$="genes"]
Vous pouvez non seulement sélectionner les attributs d'un élément HTML, mais vous pouvez également imprimer leurs gènes mutés à l'aide de pseudo-«sciences» (signifiant pseudo-éléments et déclaration du contenu).
Quelle est la première chose qu'un journaliste biotech fait après terminer le premier brouillon d'un article?
.joke: hover: after {
contenu: "Réponse:" attr (titre);
bloc de visualisation;
}
Le code ci-dessus montre la réponse à l'une des pires blagues jamais écrites en vol stationnaire (oui, je l'ai écrite moi-même et, oui, l'appeler une "blague", c'est être généreux).
La dernière chose à faire savoir, c’est que vous pouvez ajouter un indicateur pour rendre les recherches d’attributs insensibles à la casse. Vous ajoutez un i avant le crochet de fermeture.
[title*="DNA" i]
Cela correspondrait ainsi à “dna”, “ADN”, “dnA” et à toute autre variante.
Le seul inconvénient est que le i ne fonctionne que dans Firefox, Chrome, Safari, Opera et un petit nombre de navigateurs mobiles.
Maintenant que nous avons vu comment sélectionner des sélecteurs d'attributs, examinons quelques cas d'utilisation. Je les ai divisées en deux catégories: Usages généraux et Diagnostics .
Usages généraux Style par type d’entrée Vous pouvez styler les types d’entrée différemment, par exemple. email vs téléphone.
input [type="email"] {
couleur: papayawhip;
}
entrée [type="tel"] {
couleur: chardon;
}
Afficher les liaisons téléphoniques Vous pouvez masquer un numéro de téléphone de certaines tailles et afficher un lien téléphonique à la place pour faciliter les appels sur un téléphone.
span.phone {téléphone}.
affichage: aucun;
}
un [href^="tel"] {
bloc de visualisation;
}
Liens internes / externes, sécurisé et non sécurisé Vous pouvez traiter les liens internes et externes différemment et attribuer un style différent aux liens sécurisés et aux liens non sécurisés.
a [href^="http"]
couleur: bisque;
}
a: pas ([href^="http"]) {
couleur: darksalmon;
}
a [href^="http://"]: après {
contenu: url (unlock-icon.svg);
}
a [href^="https://"]: après {
contenu: url (lock-icon.svg);
}
Icônes de téléchargement L'un des attributs que HTML5 nous a donnés est «télécharger». Il indique au navigateur de télécharger ce fichier plutôt que d'essayer de l'ouvrir. Ceci est utile pour les fichiers PDF et les fichiers DOC auxquels vous souhaitez que les utilisateurs aient accès, mais ne souhaitent pas qu’ils s’ouvrent pour le moment. Cela facilite également le flux de travail pour le téléchargement de nombreux fichiers consécutifs. L’inconvénient de l’attribut download est qu’il n’ya pas d’aspect 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 {
contenu: url (download-arrow.svg);
}
Vous pouvez également communiquer des types de fichiers avec différentes icônes, telles que PDF, DOCX, ODF, etc.
a [href$="pdf"]: after {
contenu: url (pdf-icon.svg);
}
a [href$="docx"]: après {
contenu: url (docx-icon.svg);
}
a [href$="odf"]: après {
contenu: url (open-office-icon.svg);
}
Vous pouvez également vous assurer que ces icônes ne figurent que sur des liens téléchargeables en empilant le sélecteur d'attributs.
a [download][href$="pdf"]: after {
contenu: url (pdf-icon.svg);
}
Remplacer ou réappliquer un code obsolète / obsolète Nous avons tous rencontré d'anciens sites dont le code est obsolète, mais la mise à jour du code ne vaut parfois pas la peine de le faire sur six mille pages. Vous devrez peut-être remplacer ou réappliquer un style implémenté comme attribut avant HTML5.
Old, holey gene
div [bgcolor="#000000"] {/ * override * /
couleur de fond: # 222222! important;
}
div [color="#FFFFFF"] {/ * réappliquer * /
couleur: #FFFFFF;
}
Ignorer des styles en ligne spécifiques Vous rencontrerez parfois des styles en ligne qui gommeront les œuvres, mais ils proviendront d’un code indépendant de votre contrôle. Il convient de préciser que si vous pouvez les modifier, ce serait l'idéal, mais si vous ne le pouvez pas, voici une solution de contournement.
Note : Cette méthode est optimale si vous connaissez la propriété et la valeur exactes. vous voulez remplacer, et si vous voulez le remplacer où qu'il apparaisse.
Pour cet exemple, la marge de l'élément est définie en pixels, mais elle doit être étendue et définie dans em s. afin que l'élément puisse être réajusté correctement si l'utilisateur modifie la taille de police par défaut.
<div style = "color: # 222222; margin: 8px; background-color: #EFEFEF;" Teenage Mutant Ninja Myrtle
div [style*="margin: 8px"] {
marge: 1em! important;
}
Note : Cette approche doit être utilisée avec une extrême prudence, car si jamais vous deviez remplacer ce style, vous tomberez dans une guerre ! Importante 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. Généralement, nous utilisions 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 (ou du tout dans Firefox ou Edge), vous pouvez les utiliser sur des entrées de fichier.
Menu d'accordéon HTML Les deux détails et de résumé de résumé sont un moyen de faire des menus extensibles / accordéon avec du HTML seulement. Les détails recouvrent à la fois la balise summary et le contenu que vous souhaitez afficher lorsque l'accordéon est ouvert. En cliquant sur le résumé, on agrandit la balise detail et ajoute un attribut open. L'attribut open facilite le style d'une balise ouverte détails différemment d'une balise fermée détails .
Liste des gènes
Roddenberry
Hackman
Wilder
Kelly
Luen Yang
Simmons
détails [open] {
couleur de fond: hotpink;
}
Liens d'impression L'affichage des URL dans les styles d'impression m'a amené à comprendre les sélecteurs d'attributs. Vous devriez savoir comment le construire vous-même maintenant. Il vous suffit de sélectionner toutes les balises a avec un href d'ajouter un pseudo-élément et de les imprimer à l'aide des contenus attr () et .
a [href]: après {
content: "(" attr (href) ")";
}
Infobulles 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 dans les deux cas).
Note : ] Ce code devrait vous mettre dans les parages, mais peut nécessiter quelques ajustements au niveau de l'espacement, du remplissage et des couleurs en fonction de l'environnement de votre site et selon que vous avez un meilleur goût que moi ou non.
Splicing HTML’s DNA With CSS Attribute Selectors — Smashing Magazine {
position: relative;
bloc de visualisation;
}
Splicing HTML’s DNA With CSS Attribute Selectors — Smashing Magazine: vol stationnaire: après {
contenu: attr (titre);
couleur: hotpink;
couleur de fond: bleu ardoise;
bloc de visualisation;
rembourrage: 0,225 m, 35 m;
position: absolue;
à droite: -5px;
en bas: -5px;
}
AccessKeys L'un des avantages du Web est qu'il offre de nombreuses options pour accéder à l'information. Un attribut rarement utilisé est la possibilité de définir un 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’est pas facile de savoir quelles clés ont été définies sur un site Web.
Le code suivant les affichera sur : focus . Je n’utilise pas sur le survol car la plupart du temps, les personnes ayant besoin de la accesskey 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 (clé d'accès);
}
Diagnostics Ces options vous aident à identifier les problèmes soit pendant le processus de génération, soit localement tout en essayant de les résoudre. Si vous les mettez sur votre site de production, les erreurs resteront évidentes pour vos utilisateurs.
Audio sans commandes Je n'utilise pas trop souvent la balise audio mais lorsque je l'utilise, oubliez d'inclure l'attribut controls . Le résultat: rien n'est montré. Si vous travaillez dans Firefox, ce code peut vous aider à déterminer si un élément audio est masqué ou si la syntaxe ou tout autre problème l'empêche d'apparaître (il ne fonctionne que dans Firefox).
audio: not ([controls]) {
largeur: 100px;
hauteur: 20px;
couleur de fond: chartreuse;
bloc de visualisation;
}
Pas de texte alternatif Les images sans texte alternatif sont un cauchemar pour la logistique et l'accessibilité. Il est difficile de les trouver en regardant simplement la page, mais si vous ajoutez ceci, ils apparaîtront immédiatement.
Note : J'utilise le contour au lieu de border car les bordures pourraient ajouter de la largeur à l'élément et gâcher la mise en page. Le contour n'ajoute pas de largeur.
img: not ([alt]) aucun attribut alt * /
contour: 2em solide chartreuse;
}
img [alt=""] {/ * l'attribut alt est vide * /
contours: 2em bleu cadet;
}
Fichiers Javascript asynchrones Les pages Web peuvent être un ensemble de systèmes de gestion de contenu, de plugins, de frameworks et de codes que Ted (assis à trois postes) a écrit en vacances parce que le site était en panne et qu'il craint votre patron. Déterminer ce qui charge JavaScript de manière asynchrone et ce qui ne fonctionne pas peut vous aider à vous concentrer sur l'amélioration des performances de la page.
script [src]: not ([async]) {{
bloc de visualisation;
largeur: 100%;
hauteur: 1em;
couleur de fond: rouge;
}
script: après {
contenu: attr (src);
}
Éléments d'événement Javascript Vous pouvez également mettre en surbrillance des éléments dotés d'un attribut d'événement JavaScript pour les refactoriser dans votre fichier JavaScript. Je me suis concentré sur l'attribut OnMouseOver ici, mais cela fonctionne pour tous les attributs d'événement JavaScript.
[OnMouseOver] {
couleur: burlywood;
}
[OnMouseOver]: après {
content: "JS:" attr (OnMouseOver);
}
Objets cachés Si vous avez besoin de savoir où vivent vos éléments cachés ou vos entrées cachées, vous pouvez les afficher avec:
[hidden][type="hidden"] {
bloc de visualisation;
}
Mais avec toutes ces capacités étonnantes, vous pensez qu'il doit y avoir un piège. Il est évident que les sélecteurs d'attributs ne doivent fonctionner que s'ils sont marqués dans Chrome ou dans les versions nocturnes de Fiery Fox sur le bord d'un Safari. C'est trop beau pour être vrai. Et, malheureusement, il y a un problème.
Si vous voulez utiliser des sélecteurs d’attributs dans ce navigateur bien-aimé, à savoir IE6, vous ne pourrez pas le faire. (C’est bon, laissez les larmes couler. Aucun jugement.) Un peu partout, vous êtes prêt à partir. Les sélecteurs d'attributs font partie de la spécification CSS 2.1 et sont donc dans les navigateurs depuis une bonne partie de la décennie.
Ces sélecteurs ne devraient donc plus être magiques pour vous, mais se révéler comme une technologie suffisamment avancée. C’est plus une 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 travaillez sur le Web en mystifiant les merveilles de la science.
(dm, ra, yk, il) 
