{"id":1484,"date":"2011-10-26T22:35:45","date_gmt":"2011-10-26T20:35:45","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=1484"},"modified":"2015-01-18T16:22:53","modified_gmt":"2015-01-18T15:22:53","slug":"css3-any-pseudo-classe-prometteuse-et-econome","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/css3-any-pseudo-classe-prometteuse-et-econome","title":{"rendered":"CSS3 – :any() – pseudo-classe prometteuse et \u00e9conome"},"content":{"rendered":"

CSS3 nous apporte son lot de nouveaut\u00e9s, et parmi elles, un petit nouveau bien prometteur, et qui pourrait nous permettre pas mal d’\u00e9conomie de lignes de code.
\nD\u00e9couvrons la pseudo-classe :any()<\/code> ensemble, voyons comment il est possible de l’utiliser aux travers d’exemples plus ou moins pertinents (on va essayer de le rester :p)<\/p>\n

:any()<\/code>, mais qu’est-ce donc que cette chose l\u00e0 ?<\/h2>\n

:any()<\/code> est une pseudo-classes qui permet de factoriser : \u00e7a ne vous rappelle pas les maths ? \ud83d\ude42
\nLe principe est le suivant : regrouper plusieurs \u00e9l\u00e9ments HTML afin d’\u00e9viter la multiplication de s\u00e9lecteurs similaires.<\/p>\n

Sa syntaxe de base est la suivante.<\/p>\n

:any( selector[, selector]* )<\/code><\/pre>\n
Ainsi, \u00e0 la place de :<\/p>\n
.inside p,\r\n.inside ul,\r\n.inside blockquote {\r\nmargin-left: 2em;\r\n}<\/code><\/pre>\n
on pourra \u00e9crire :<\/p>\n
.inside :any(p, ul, blockquote) {\r\nmargin-left: 2em;\r\n}<\/code><\/pre>\n
J’esp\u00e8re que cet exemple de code est parlant pour vous.
\nVoyons d’autres exemples, peut-\u00eatre que \u00e7a vous parlera davantage.<\/p>\n
Cette pseudo-classe \u00e9tant encore exp\u00e9rimentale, il conviendra d’utiliser les pr\u00e9fixes de chaque navigateur (-moz-, -webkit-, -o- et -ms-).
\nPour le moment, seuls Firefox 4+, Chrome 12+ (\u00e0 v\u00e9rifier) et Safari 5.1+ (\u00e0 v\u00e9rifier) semblent avoir impl\u00e9ment\u00e9 la chose.<\/p>\n
Quelques exemples d’utilisation<\/h2>\n
Exemple \u00ab\u00a0system\u00a0\u00bb de Firefox<\/h3>\n
Firefox impl\u00e9mente cette pseudo-classe depuis Firefox 4 si je ne fais pas erreur.
\nEn m\u00eame temps que de proposer des styles par d\u00e9faut pour de nombreux \u00e9l\u00e9ments HTML5, cette version de Firefox pr\u00e9voyait d\u00e9j\u00e0 l’utilisation multiple de H1.
\nLes styles suivants sont appliqu\u00e9s pour pr\u00e9voir l’imbrication de H1 et donc son niveau dans le DOM<\/abbr>.<\/p>\n
\/* Niveau 0 *\/\r\nh1 {\r\n  font-size: 30px;\r\n}\r\n\/* Niveau 1 *\/\r\n:-moz-any(section, article, aside, nav) h1 {\r\n  font-size: 25px;\r\n}\r\n\/* Niveau 2 *\/\r\n:-moz-any(section, article, aside, nav)\r\n:-moz-any(section, article, aside, nav) h1 {\r\n  font-size: 20px;\r\n}\r\n\/* Niveau 3 *\/\r\n:-moz-any(section, article, aside, nav)\r\n:-moz-any(section, article, aside, nav)\r\n:-moz-any(section, article, aside, nav) h1 {\r\n  font-size: 15px;\r\n}<\/code><\/pre>\n
Cette technique permet de donner \u00e0 un h1<\/code> un corps de texte diff\u00e9rent en fonction du nombre de parents de cet \u00e9l\u00e9ment.
\nPour le niveau 2 par exemple, le corps de texte de 20px<\/code> sera attribu\u00e9 si le h1<\/code> se trouve enfant de section<\/code> et article<\/code>, ou enfant de section<\/code> et section<\/code>, etc.<\/p>\n
Exemple de factorisation des \u00e9v\u00e8nements<\/h3>\n
Il vous est certainement arriv\u00e9 \u00e0 de nombreuses reprises d’avoir le m\u00eame effet lors d’un :hover<\/code> et d’un :focus<\/code>.
\nVotre code CSS ressemble donc souvent \u00e0 cela :<\/p>\n
header nav li a:hover,\r\nheader nav li a:focus {\r\n\/* mes styles *\/\r\n}<\/code><\/pre>\n
Il est possible de simplifier ce s\u00e9lecteur ainsi :<\/p>\n
header nav li a:any(:hover, :focus) {\r\n\/* mes styles *\/\r\n}<\/code><\/pre>\n
Voir l’exemple<\/a>.<\/p>\n
\u00c0 peine arriv\u00e9e…<\/h2>\n
J’ai cru voir une information passer entre le d\u00e9but de la r\u00e9daction de cet article, et aujourd’hui, mais je ne sais plus o\u00f9 (quelque part chez Mozilla) : apparemment :any()<\/code> aurait chang\u00e9 de nom et serait maintenant une pseudo-classe de niveau 4 (entendez CSS4).
\nElle s’appellerait d\u00e9sormais : :matches()<\/a><\/code><\/p>\n
Sa construction pourrait donc changer entre temps, mais sachez d’ores et d\u00e9j\u00e0 que la chose existe \ud83d\ude09<\/p>\n
\n
Sources et liens utiles<\/h2>\n