Petit memento sur les nouveautés de CSS 3

2009-12-21

Il est parfois nécessaire d'avoir des petits repères sur certains langages car nous ne pouvons pas nous rappeler de tous les détails et un trou de mémoire est si vite arrivé ! Pour ces raisons, je met ce soir en ligne un petit tutoriel sur les nouveautés apportées par CSS3.

Les medias-queries

On commence fort avec les medias-queries. Ce sont des propriétés qui nous permettent de définir un style selon des informations fournies par le navigateur tel que la largeur, hauteur ou encore la couleur.

Ainsi, nous pouvons par exemple effectuer l'exemple suivant :

@media screen and (min-width: 800px)
{
      div#main { background-color:blue; }
}
Ainsi, les navigateurs qui auront une largeur supérieure à 800px se verront disposer d'un fond bleu sur le div main. On peut facilement imaginer des designs très adaptés aux différentes résolutions d'écran.
Le font-face
Apparu avec CSS2 mais pas très utilisé à l'époque, permet d'importer directement vos fonts en précisant une url qui pointe sur celle-ci. Voici son utilisation :
@font-face {
      font-family: "VincentFont";
      src: url("http://vincent.composieux.fr/fonts/vincentfont.ttf");
}
h1 { font-family:VincentFont, Verdana; }
Ma font nommée ici "VincentFont" pourra donc être utilisée et "lue" par les internautes.
Les sélecteurs d'attributs

Désormais, il est possible d'utiliser quelques petites fonctionnalités venant des expressions régulières. On va en effet y retrouver les caractères "^", "$" et "*", comme suit :

Voici quelques exemples :
img[name^="val"] { ... }
img[name$="val"] { ... }
img[name*="val"] { ... }
Ces exemples permettent de :
  1. Toutes les images dont l'attribut "name" commence par "val"
  2. Toutes les images dont l'attribut "name" se termine par "val"
  3. Toutes les images dont l'attribut "name" contient "val"
Ces sélecteurs sont supportés par IE7, IE8, Opera ainsi que sur tous les navigateurs basés les moteurs Gecko (Firefox) et Webkit (Safari et Chrome). Seul IE6 ne les prends pas en compte.
Le combinateur d'adjacence
Le caractère tild "~" est désormais utilisé comme combinateur d'adjacence. Celà signifie que l'on va pouvoir appliquer des styles sur des objets qui se suivent. On comprendra mieux avec un petit exemple :
#main~img { margin-top: 10px; }
Cet exemple appliquera une marge de 10 pixels au dessus de toutes les images qui suivront le div main. Encore une fois, fonctionne sous tous les navigateurs sauf IE6 ...
Les pseudo-classes
Voici une fonctionnalité majeure de CSS 3. Celles-ci vont permettre de sélectionner des éléments en se basant sur leur position par rapport à leur parent, via leur numéro d'ordre ou en utilisant les mots-clés "odd" et "even" (paire et impair). Voyons quelques exemples :
table tr:nth-child(odd) { ... }
table tr:nth-child(2n+1) { ... }
Ces deux lignes font le même travail, elles permettent de sélectionner les lignes paires d'un tableau.
table tr:nth-last-child(-n+2) { ... }
La pseudo-classe "nth-last-child" précédente va permettre de sélectionner les deux dernières lignes des tableaux.
table tr:nth-last-child(1) { ... }
table tr:last-child { ... }
Ces deux pseudo-classes sont identiques, elles permettent de sélectionner la dernière ligne des tableaux. Enfin, terminons avec ces trois dernières pseudo-classes :
#macheckbox:checked { ... }
#mondiv:empty { ... }
#mondiv img:not([class*="val"]) { ... }
  1. Correspond aux éléments cochés
  2. Correspond aux éléments qui ne contiennent pas d'enfants ou qui sont vides
  3. Correspond aux images de "mondiv" qui ne disposent pas de la classe "val"
D'autres pseudo-classes sont également disponibles, tel que : only-child, :root, :empty, :target, :checked, :enabled et :disabled. Pour plus d'informations sur les sélecteurs et pseudo-classes, rendez-vous ici : http://www.w3.org/TR/css3-selectors/
Le pseudo-élément
Assez puissant, ce pseudo-élément permet d'appliquer des propriétés CSS sur la zone qui est actuellement sélectionné par l'utilisateur :
::selection { background-color:#000000; }
Par exemple, ceci mettra le fond de l'élément actuellement sélectionné par l'utilisateur en noir.
Sélecteur d’attribut

Comments