Parmi ces nouveautés, nous nous arrêtons sur les suivantes :

• Sélecteurs
  • Sélecteur d'éléments frères non obligatoirement adjacents
  • Sélecteurs d'attributs
  • Pseudo-classes
• Propriétés de couleurs, d'arrière-plans et de bordures

Sélecteurs

Sélecteur d'éléments frères non obligatoirement adjacents

Sa syntaxe est la suivante : E ~ F. Ce sélecteur est à distinguer du sélecteur CSS 2 E + F, qui concerne deux éléments frères adjacents (c'est à dire E immédiatement suivi de F). Le sélecteur E ~ F, quant à lui, prendra en charge un élément F précédé de E, qu'il y ait ou non un ou plusieurs éléments frères intercalés entre E et F. Bien entendu, E et F doivent avoir le même élément parent.

Sélecteurs d'attributs

Avec CSS 3, il est possible d'analyser plus finement qu'en CSS 2 les valeurs des attributs. À défaut de pouvoir écrire des expressions rationnelles, on peut sélectionner un attribut dont la valeur commence, finit ou contient une chaîne de caractères :

• E[attr^="val"] sélectionne tout élément E comportant un attribut attr dont la valeur commence par val,
• E[attr$="val"] sélectionne tout élément E comportant un attribut attr dont la valeur finit par val,
• E[attr*="val"] sélectionne tout élément E comportant un attribut attr dont la valeur contient la chaîne val.

Pseudo-classes

CSS 2 a introduit la pseudo-classe :first-child, qui sélectionne l'élément qui est le premier enfant de son élément parent. CSS 3 introduit la pseudo-classe :last-child, qui sélectionne, elle, l'élément qui est le dernier enfant de son élément parent. Ainsi, E > F:last-child sélectionne le dernier élément F enfant de E ; quant à E:last-child, il sélectionne le dernier élément E enfant de n'importe quel élément, pourvu que E ne soit pas l'élément racine du document.

Dans même, CSS 3 introduit la pseudo-classe :only-child, qui sélectionne l'élément qui est l'enfant unique de son élément parent.

Il y a aussi la pseudo-classe :nth-child(), dont la parenthèse contient soit un entier soit la valeur odd soit la valeur even. E > F:nth-child(3) sélectionne l'élément F qui est le troisième enfant de E, E > F:nth-child(odd) tout élément F enfant de E de rang impair, E > F:nth-child(even) tout élément F enfant de E de rang pair.

La pseudo-classe :nth-last-child() est semblable à :nth-child(), à cette différence près qu'elle compte à partir du dernier élément enfant.

La pseudo-classe :nth-of-type() est semblable à :nth-child(), à cette différence près qu'elle ne compte que les éléments enfants ayant le même nom que l'élément cherché par le sélecteur.

La pseudo-classe :nth-last-of-type() est semblable à :nth-of-type(), à cette différence près qu'elle compte à partir du dernier élément enfant ayant le même nom que l'élément cherché par le sélecteur.

La pseudo-classe :first-of-type est semblable à :first-child, à cette différence près qu'elle sélectionne le premier élément enfant ayant le même nom que l'élément cherché par le sélecteur.

La pseudo-classe :last-of-type est semblable à :last-child, à cette différence près qu'elle sélectionne le dernier élément enfant ayant le même nom que l'élément cherché par le sélecteur.

La pseudo-classe :only-of-type est semblable à :only-child, à cette différence près que l'unique élément enfant doit avoir le même nom que l'élément cherché par le sélecteur.

CSS 3 introduit également la pseudo-classe de négation :not, suivi entre parenthèses d'un argument, qui est un sélecteur (à l'exclusion de la pseudo-classe de négation et des pseudo-éléments). Ainsi, *:not(E) sélectionne n'importe quel élément qui ne soit pas l'élément E.

Certains éléments d'un document peuvent se trouver vides (sans même un contenu en ligne). Avec CSS 3, il est possible de les sélectionner grâce à la pseudo-class :empty. Ainsi, E:empty sélectionne tout élément E vide (c'est-à-dire qui apparaît dans le code sous la forme <e></e>).

Propriétés de couleurs, d'arrière-plans et de bordures

Jusqu'à présent, le webdesigner souhaitant arrondir les angles et mettre une couche de transparence devait soit s'arracher les cheveux en bidouillant la structure (X)HTML par des div vides soit recourir à des propriétés propriétaires comme -moz-border-radius, -khtml-border-radius ou -moz-opacity, quitte à rendre sa feuille de style invalide par le validateur CSS du W3C, ces propriétés étant propres aux navigateurs utilisant Gecko comme moteur de rendu (Firefox, Mozilla, Camino pour les propriétés à préfixe -moz-) ou à Safari (pour -khtml-border-radius).

CSS 3 comble le webdesigner en introduisant les propriétés opacity et border-radius.

opacity admet une valeur décimale comprise entre 0 (pour une transparence totale) et 1 (pour une opacité totale), 1 étant la valeur par défaut. Il vaut mieux ne pas se hasarder à mettre la valeur à 0, sinon l'élément auquel s'applique la propriété sera invisible.

border-radius admet deux valeurs de longueur (en em, ex, pixels, pouces, centimètres, millimètres, points ou picas), dont la seconde est facultative. Si la seconde est omise, l'angle de la bordure décrit un quart de cercle dont le rayon est défini par la valeur unique. Sinon, l'angle décrit un quart d'ellipse dont les rayons horizontal et vertical sont définis respectivement par la première et la seconde longueur.

Un essai d'implémentation de CSS 3

Le verbe combler a été employé il y a un instant. Il faut, néanmoins, relativiser : en effet, si déjà CSS 2.1 est inégalement implémenté par les navigateurs (avec toutes les lacunes d'Internet Explorer, surtout dans les versions antérieures à la 7), le support de CSS 3 est beaucoup plus problématique.

C'est pourquoi une page d'essai, baptisée Acid 3 CSS (une référence au célèbre Acid2 ), permet de dresser un état des lieux de l'implémentation des sélecteurs et propriétés présentés ci-dessus.

Après essai sous Internet Explorer 7, Firefox 2, Firefox 3, Opera 9, Opera 9.5, Safari 3 bêta Windows et Safari 3.1, voici le constat :

• les sélecteurs d'attributs E[attr^="val"], E[attr$="val"] et E[attr*="val"] sont reconnus par tous les navigateurs cités,
• il en est de même pour le sélecteur E ~ F,
• la propriété opacity n'est pas implémentée par Internet Explorer 7,
• les pseudo-classes :not et :empty ne sont reconnues que par Firefox, Opera 9.5 et Safari,
• les pseudo-classes :last-child et :only-child ne sont reconnues que par Firefox, Opera 9.5 et Safari 3.1,
• la pseudo-classe :first-of-type n'est reconnue que par Opera 9.5 et Safari,
• les pseudo-classes :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :last-of-type et :only-of-type ne sont reconnues que par Opera 9.5 et Safari 3.1,
• la propriété border-radius n'est pas implémentée du tout.