CSS3
Sélectionner selon des types prédéfinis avec les pseudo-classes
Les pseudo-classes sont des sélecteurs d'une catégorie à part. Il s'agit de catégorisation de sélecteurs régulièrement utilisés et qui permettent d'accéder plus rapidement à un élément ou attribut donné. Il existe de nombreuses pseudo-classes. Nous en verrons ici quelques-unes et d'autres seront aperçues dans d'autres chapitres.
Mises en formes générales
Le but des pseudo-classe est d'enrichir l'interaction en donnant de la rétro-action ou des informations visuelles importantes pour le lecteur et cela selon le contexte. Le fonctionnement de la pseudo-classe va se faire simplement en la mentionnant en tant que règle.
element:pseudo-classe { propriété_css : valeur; }
Les pseudos-classes font toutes parties d'un dictionnaire et sont toutes précédées d'un :. Les plus connues sont certainement celles qui ont trait aux liens en particulier :hover que nous verrons dans le paragraphe suivant. Il existe cependant deux pseudo-classes générales qui peuvent être utiles qui sont :focus et :lang.
:focus
L'utilisation de focus sert systématiquement à mettre en avant l'élément de la page qui est activé. Cela peut être un paragraphe, une section, un champ de formulaire ou tout autre élément accédé à la souris ou au clavier (par le biais d'un raccourcis).
element:focus {background : yellow; }
Exemple : cliquez moi dessus
Remarquez ici que la couleur reste appliquée dans que l'élément a le focus à l'inverse d'un survol classique sur un lien.
:lang
Il n'est pas rare d'avoir des mots de langue étrangère dans une page, voire de vouloir afficher certaines parties ou pas selon la langue. Internet n'est-il pas le lieu absolu de l'internationalité ? Aussi les attributs lang utilisés dans le code html pourront-ils être directement accédés et stylés avec la pseudo-classe :lang suivi entre parenthèse du code de la langue. Par exemple.
<p>Nous disons <span lang="fr">Bonjour</span> en français mais <span lang="en">Hello</span> en anglais.</p>Mise en forme de la façon suivante :
span:lang(fr) {color:red}
span:lang(en) {color:green}ce qui donnera :
Nous disons Bonjour en français mais Hello en anglais.
Mises en forme de liens avec :link, :hover, :target et :visited
Les pseudo-classes :link, :hover et :visited ont certainement été jusqu'à aujourd'hui les plus utilisées. Elles servent a spécifier l'apparence d'une balise, en général un lien, en fonction de l'action actuelle ou passée de la souris vis-à-vis de cette balise. On peut aussi y ajouter :active qui définit l'état du lien au moment de son activation, c'est-à-dire tant que le bouton de la souris est enfoncé dessus.
Reprenons notre code HTML :
<h1>Utiliser du <abbr>CSS3</abbr> avec du <abbr>HTML5</abbr></h1> <p>Le <abbr>CSS3</abbr> est la variante en cours de recommandation par le <a href=«http://w3.org»> <abbr>W3C</abbr> </a>. Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le <abbr>HTML5</abbr> par rapport au <abbr>HTML4</abbr>.</p> <p>Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisables dans de nombreux contextes.</p>
<aside><p>Le CSS3 est encore en cours de définition, vérifiez régulièrement l'avancée de la recommandation!</p></aside>
du CSS :
a:hover{color:green; }a:link{color:red; }a:visited{color:yellow; }aside > p:hover{color:orange; }
pour un rendu :
Utiliser du CSS3 avec du HTML5
Le CSS3 est la variante en cours de recommandation par le W3C . Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le HTML5 par rapport au HTML4.
Le CSS apporte de nombreuses améliorations et extensions qui le rendent beaucoup plus universel et utilisables dans de nombreux contextes.
Le CSS3 est encore en cours de définition, vérifiez régulièrement l'avancée de la recommandation!
En passant la souris sur les éléments stylés, on perçoit immédiatement l'action de :hover alors que l'effet de :visited ne sera visible que si vous cliquez sur le lien et revenez ensuite sur cette page. On peut voir par ailleurs que ces pseudo-classes ne s'appliquent pas qu'au lien : l'interaction fonctionne aussi sur le dernier paragraphe quand bien même aucune balise a n'y est placée.
Résumons les pseudo-classes concernant les liens :
- :link
- pour un lien qui n'a pas encore été visité
- :visited
- pour définir l'aspect du lien qui a déjà été suivi
- :hover
- change l'aspect du lien lorsque la souris est dessus
- :active
- change l'aspect du lien lorsque le bouton de la souris est enfoncé dessus
- :target
- sert à changer l'aspect d'un élément de la page lorsqu'il est le résultat d'un lien, pour bien mettre en évidence la destination.
Mises en forme de formulaires
Depuis l'avènement du CSS3 et du HTML5, de nouveaux comportements par défaut ont été attribués aux formulaires. Le navigateur a par défaut l'obligation de valider les informations saisies par l'utilisateur pour vérifier s'il est conforme à ce qu'on attend dans le champ, par exemple qu'un champ Age contient bien un chiffre ou si une personne a oublié de remplir un champ obligatoire.
En commençant avec :focus, on pourra mettre en forme spécifiquement le champ actif :
input { border : thin solid red; background:#EEE; } input:focus { border : thin solid green; background:#EFE; }
Dans l'exemple précédent, la mise en forme par défaut du input, suivi ci-dessous du focus, appliqué au second champ.
Pour étendre cela d'autres pseudo-classes ont été créées de manière à normaliser les comportements. Elles sont :
- :valid
- lorsque la saisie correspond à la demande
- :invalid
- lorsque la saisie ne correspond pas à la demande
- :required
- lorsque le champ doit obligatoirement être renseigné
- :optional
- pour mettre en forme les champs optionnels, que l'utilisateur n'est pas obligé de remplir.
- :enabled
- pour les champs de formulaire qu'il est possible de remplir
- :disabled
- à l'inverse, pour spécifier l'aspect des champs qui sont désactivés