CSS3 nous apporte son lot de nouveautés, et parmi elles, un petit nouveau bien prometteur, et qui pourrait nous permettre pas mal d’économie de lignes de code.
Découvrons la pseudo-classe :any() ensemble, voyons comment il est possible de l’utiliser aux travers d’exemples plus ou moins pertinents (on va essayer de le rester :p)
:any(), mais qu’est-ce donc que cette chose là ?
:any() est une pseudo-classes qui permet de factoriser : ça ne vous rappelle pas les maths ? 🙂
Le principe est le suivant : regrouper plusieurs éléments HTML afin d’éviter la multiplication de sélecteurs similaires.
Sa syntaxe de base est la suivante.
:any( selector[, selector]* )Ainsi, à la place de :
.inside p,
.inside ul,
.inside blockquote {
margin-left: 2em;
}on pourra écrire :
.inside :any(p, ul, blockquote) {
margin-left: 2em;
}J’espère que cet exemple de code est parlant pour vous.
Voyons d’autres exemples, peut-être que ça vous parlera davantage.
Cette pseudo-classe étant encore expérimentale, il conviendra d’utiliser les préfixes de chaque navigateur (-moz-, -webkit-, -o- et -ms-).
Pour le moment, seuls Firefox 4+, Chrome 12+ (à vérifier) et Safari 5.1+ (à vérifier) semblent avoir implémenté la chose.
Quelques exemples d’utilisation
Exemple « system » de Firefox
Firefox implémente cette pseudo-classe depuis Firefox 4 si je ne fais pas erreur.
En même temps que de proposer des styles par défaut pour de nombreux éléments HTML5, cette version de Firefox prévoyait déjà l’utilisation multiple de H1.
Les styles suivants sont appliqués pour prévoir l’imbrication de H1 et donc son niveau dans le DOM.
/* Niveau 0 */
h1 {
font-size: 30px;
}
/* Niveau 1 */
:-moz-any(section, article, aside, nav) h1 {
font-size: 25px;
}
/* Niveau 2 */
:-moz-any(section, article, aside, nav)
:-moz-any(section, article, aside, nav) h1 {
font-size: 20px;
}
/* Niveau 3 */
:-moz-any(section, article, aside, nav)
:-moz-any(section, article, aside, nav)
:-moz-any(section, article, aside, nav) h1 {
font-size: 15px;
}Cette technique permet de donner à un h1 un corps de texte différent en fonction du nombre de parents de cet élément.
Pour le niveau 2 par exemple, le corps de texte de 20px sera attribué si le h1 se trouve enfant de section et article, ou enfant de section et section, etc.
Exemple de factorisation des évènements
Il vous est certainement arrivé à de nombreuses reprises d’avoir le même effet lors d’un :hover et d’un :focus.
Votre code CSS ressemble donc souvent à cela :
header nav li a:hover,
header nav li a:focus {
/* mes styles */
}Il est possible de simplifier ce sélecteur ainsi :
header nav li a:any(:hover, :focus) {
/* mes styles */
}À peine arrivée…
J’ai cru voir une information passer entre le début de la rédaction de cet article, et aujourd’hui, mais je ne sais plus où (quelque part chez Mozilla) : apparemment :any() aurait changé de nom et serait maintenant une pseudo-classe de niveau 4 (entendez CSS4).
Elle s’appellerait désormais : :matches()
Sa construction pourrait donc changer entre temps, mais sachez d’ores et déjà que la chose existe 😉
Sources et liens utiles
Partager la publication "CSS3 – :any() – pseudo-classe prometteuse et économe"
Mouais l’intérêt de cette balise n’est pas super évident à part pour le dernier exemple.
Aller mettre un même nom de classe sur des balises différentes qui réagissent différemment (idée de l’exemple 1) c’est assez ‘pervers’.
Pour l’histoire des parents autant utiliser les :nth-child() voir même h1, h2, h3 plus simple il me semble.
Sinon j’aime bien ce site ^^
Bonsoir 🙂
L’exemple 1 (si tu parles des
.inside) n’est qu’une illustration, certainement pas pertinente, je l’admets.Par contre si je présente l’exemple de Mozilla et de ses styles appliqués par défaut aux titres
h1, ce n’est pas anodin. En effet HTML5 introduit une nouveauté dans l’utilisation des niveaux de titre, notamment desh1.(Propos rapportés, peut-être transformés 🙂 Le W3C est parti du principe que le développeur n’est pas toujours maître de tous les titres « injectés » dans sa page web.
Par exemple, si dans ma sidebar j’ai des titres de niveau 2, et que l’API Flickr vient ajouter un titre de niveau 4 juste en dessous, ça n’a plus beaucoup de sens hiérarchiquement parlant.
C’est dans cette logique que HTML5 permet l’utilisation de
h1un peu partout dans le document, celui-ci sera interprété en fonction de son ascendance.Pourquoi me parles-tu de
:nth-child()? Comment verrais-tu le code que je présente avec cette pseudo-classe ?Je suis curieux 🙂
En espérant que mon article soit suffisamment clair pour ne pas avoir été mal interprété.
Merci pour ton commentaire.
Je pense que ce pseudo a de quoi de vraiment pratique à la base. Mais reste que dans ta feuille de style ça devient pratiquement plus dure de t’y retrouver par la suite. Trop de truc que tu peux mettre dans ton sélecteur.
Moi c’est le premier exemple qui me parle. Il permet d’avoir un sélecteur plus concis, sans répétition de la première partie et donc en supprimant le risque d’erreurs de frappe ou de saisie dans la première partie du sélecteur. (C’est très courant de faire des fautes d’inattention comme `.machin h1, .machn h2, h3 {…}`.)
Le deuxième me parle moins car styler automatiquement les titres en fonction du nombre d’éléments sectionnant qu’ils ont pour ancêtres est une tâche peu pratique, qui donne vite des choses complètement ridicules. Il faudra envisager autrement la mise en forme des titres, et franchement ça ne va tuer personne. 🙂
En effet, je n’avais pas envisagé que le contenu puisse être injecté.
Malheureusement, ta curiosité ne pourra être satisfaite, je me suis complètement planté avec nth-child(), j’en suis encore à confondre enfants et descendants … Ta façon est donc bien la plus rapide pour l’exemple 2 🙂 Le pire c’est qu’essayer de sélectionner rapidement le 5eme descendant m’arrive régulièrement … mais il doit y avoir une bonne raison pour qu’une pseudo élément n’est pas été intégré.
J’y trouve assez intéressant, et comme fvsch, le premier exemple me parle beaucoup !
@fvsch effectivement l’exemple « system Firefox » proposé ici peut largement être sujet à discussion : en plus de ne pas être pratique ça n’est pas forcément pertinent.
@rdomingue : c’est comme n’importe quel outil, il faut l’utiliser quand ça te permet d’améliorer certains aspects de ton travail, comme la lisibilité de ton code par exemple, ou la taille d’un sélecteur.
Rendez-vous en CSS4, peut-être que les choses auront bougé d’ici là.
Merci pour vos commentaires 😉