J'inaugure avec ce billet une série d'article concernant le support avancé des CSS (en grande partie des CSS 3) dans AIR. Je crée d'ailleurs une catégorie à part entière pour cette série, pour un accès plus simple et plus rapide.
Ce premier article aura comme thème ce qu'on utilise tout le temps et dès le début lorsque nous écrivons des feuilles de styles : les sélecteurs.
Un peu de lecture
Beaucoup de sélecteurs sont introduits dans la version 3 de la recommandation du World Wide Web Consortium. Je vous laisse en juger par vous même : http://www.w3.org/TR/css3-selectors/.
Que ce soit clair : je ne vais pas repasser tous les sélecteurs en revue. Ce serait long et fastidieux, pour vous comme pour moi. Je ne vais pas non plus vous apprendre à les utiliser, ça c'est à vous de le faire : l'expérimentation par soi-même, c'est ce qu'il y a de mieux.
Retour aux bases : sélecteurs des précédentes recommandations
Si vous avez un tant soit peu développé des sites à l'aide des CSS, vous savez ou aurez au moins remarqué que le support de certaines propriétés, sélecteurs, pseudo-éléments est franchement limité, voire même nul pour certains (ou certains navigateurs).
Un petit exemple : si vous codez pour un public utilisant ce bon vieil Internet Explorer 6, vous pouvez oublier la grande majorité des sélecteurs avancés CSS : >, +, sélecteurs d'attributs, pseudo-éléments (à part un support très léger pour certains tels que le :hover). Même la sélection par double classe est très mal supportée. Plutôt frustrant.
Mais avec AIR, bienvenue dans un nouveau monde ! Webkit étant de la partie, tous les sélecteurs que vous lorgniez d'un œil désespéré en codant pour IE 6 vous sont désormais accessibles et même plutôt recommandés. Voyez par vous même :
- Sélectionner uniquement les <li> de premier niveau d'une navigation à plusieurs sous-niveaux ;
- Sélectionner l'élément frère d'un élément cible ;
- Ne sélectionner que le premier enfant sans classe ou identifiant
- avoir un :hover fonctionnel sur tous les éléments ;
- etc.
Un grand pas en avant ! Bon et CSS 3 dans tout ça ? Il y a plein de choses que je voudrais utiliser aussi. C'est possible ?
Sélecteurs prochaine génération : CSS 3
Les sélecteurs CSS 2 nous donnent déjà beaucoup de possibilités qui nous étaient tout simplement interdites (ou de manière biaisée) dans le développement de sites pour navigateur. A tel point d'ailleurs qu'il est difficile au début de se détacher de ses habitudes de code : l'utilisation de ces sélecteurs allège considérablement le code HTML de beaucoup de classes et autres identifiants qui nous servaient de pivots.
CSS 3 arrive et les équipes qui développent les navigateurs l'ont bien compris. Webkit ne fait pas exception. Il possède un très bon support de toutes ces nouvelles choses qui nous font baver, nous autres développeurs front.
Allez, une petite liste pour le plaisir :
- :nth-child() ;
- :first-child() ;
- :last-child() ;
- :only-child() ;
- élément A ~ élément B ;
Cette liste est évidemment très incomplète. Je vous laisse voir la documentation du W3C pour la liste exhaustive (et à jour).
La bonne nouvelle c'est que la majorité de ces éléments est supportée (il est possible que certains ne le soient pas encore, dû à la version de Webkit dans AIR qui est antérieure aux dernières évolutions du moteur).
On peut donc faire des choses aussi simples mais efficaces que cela :
/* sélection du second enfant de la liste */ #maListe li:nth-child(2) { ... } /* hover sur le dernier enfant de la liste */ #maListe li:last-child:hover { ... } /* sélection des div de premier niveau uniquement */ #monBloc > div { ... } /* sélection d'un élément portant la classe "maClasse", frère de notre/nos div de premier niveau */ #monBloc li > div + .maClasse { ... } /* premier li d'un ul enfant de premier niveau d'un bloc avec la classe "maClasse */ #monBloc .maClasse > ul li:first-child { ... } /* chaque second li tous les trois li de premier niveau d'une liste de premier niveau du bloc identifié comme "monBloc" */ #monBloc > ul > li:nth-child(3n+2) { ... }
La page du W3C n'est pas toujours très explicite en ce qui concerne l'utilisation des sélecteurs. Le test est le meilleur moyen de se familiariser avec ces sélecteurs et de faire évoluer son code en conséquence.
Alors, à vos claviers !
Lire l'article suivant dans cette série : CSS 3 et AIR : la propriété background