Sites


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

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.