Découvrir CSS3

Difficile de parler aujourd’hui de HTML, sans parler des feuilles de styles CSS. Après avoir abordé HTML5, découvrons donc maintenant les nouveautés apportées par CSS 3.
J’ai intitulé l’article « Découvrir CSS3″ parce que le sujet est extrêmement vaste, et je n’aborderai que quelques modules.

Un peu d’histoire

La vie de styles CSS est, comme celle de HTML, semée d’embûches et d’indécisions.
Les Cascade Style Sheets sont nées de la volonté de séparer le contenu de la mise en forme. Les documents HTML ne doivent décrire que le contenu, et les styles CSS le mettre en forme, pour le rendre lisible en fonction du média choisi pour diffuser le document.

Comme pour HTML, la naissance de la première version a été suffisamment longue pour laisser le champ libre à un certain nombre d’éditeurs, comme Microsoft par exemple. Publiée en 1996, CSS 1 ne contient qu’un nombre relativement limité de fonctionnalités, non respectées par les éditeurs, parce que déjà dépassées.

Publiée en Mai 1998, la norme CSS2 apporte un nombre significatif de nouveautés, dont la notion de « media », ainsi qu’un plus grand nombre d’options de positionnement (position: relative, absolute, …). Malgré tout, la norme n’est toujours pas suivie par les éditeurs.

La W3C abandonna alors les travaux sur cette version, pour se consacrer à la version 2.1, censée corriger les erreurs de la version 2.0, et intégrer des fonctionnalités existants déjà dans les navigateurs. La suite devient assez délirante: puisqu’entre 2004 et 2010, la norme passera plusieurs fois du niveau de « Candidate recommandation » à « draft » et réciproquement. La version officielle ne date que d’Avril 2011, alors même que tout le monde bascule vers CSS 3.

Parallèlement, les travaux sur CSS3 ont démarré vers 1998/1999 (la première publication date de 1999). CSS 3 couvre un domaine beaucoup plus vaste que les versions précédentes. Pour cette raison, le W3C a découpé les travaux en modules. Aujourd’hui, nous comptons environ 50 modules. L’avantage de ce découpage est que les modules peuvent être publiés indépendamment.

En novembre 2011, seuls trois d’entre eux sont officiellement publiés: Les sélecteurs, les couleurs, et les espaces de nom (namespace).
Les autres modules, notamment les media-queries, et la gestion des colonnes, n’en sont qu’au stade de « candidate ».

Les nouveautés abordées

Cet historique montre que CSS3 est loin d’être finalisé, et qu’il couvre un domaine assez vaste.
L’objectif de l’article n’est pas d’en faire une description exhaustive, mais de montrer les éléments les plus répandus, et surtout qui commencent à fonctionner dans nos navigateurs.

J’aborderai donc:

  • La notion de préfixe propriétaire,
  • Les nouveaux sélecteurs,
  • La gestion des colonnes,
  • La gestion des couleurs et des dégradés,
  • La gestion des bordures et des ombres,
  • La gestion des polices,
  • Les animations / transitions.

Je ne parlerai pas des media-queries que j’ai déjà abordé dans l’article sur les Responsive design? Qu’est que c’est?

Les préfixes « propriétaires »

Ces préfixes apparaîssant un peu partout, dans le reste de l’article, arrêtons-nous donc d’abord, sur une des étrangetés de CSS3: Avec le W3C, la publication des normes prenant en gros 10 ans, soit une éternité, les différents éditeurs, pendant les phases « draft », « candidate », … proposent leur propre vision de ce que pourrait être cette norme. Le problème est qu’ils n’utilisent pas forcement les mots-clés du W3C.

Donc, si l’on prend l’exemple des coins arrondis, au lieu d’avoir une seule commande du type border-radius: ... , nous avons autant de commande que de navigateur. Heureusement la plupart des éditeurs se sont entendus sur la nomenclature: ils reprennent le nom de la propriété, en le préfixant. Nous avons:

  • -moz, pour Firefox,
  • -webkit, pour Chrome, Safari, et les dérivés pour iPhone, iPad, Androïd, …,
  • -o, pour Opera,
  • -ms pour internet explorer (théoriquement),
  • -khtml, pour Konqueror
  • et d’autres préfixes existent pour les autres navigateurs

Si vous ne voulez absolument oublier personne, vous aurez donc à écrire au minimum 6 fois la même chose. Concrètement, personne ne suit cette démarche, et ne travaille que pour le plus grand nombre, avec un principe simple: On oublie les versions d’internet explorer antérieures à la version 9, ainsi que les navigateurs les moins répandus.
Donc nos styles pour les coins arrondis deviennent:

1
2
3
4
5
.box {
	-moz-border-radius: 10px;		/* pour Firefox */
	-webkit-border-radius: 10px;		/* pour Chrome, Safari, et dérivés */
	border-radius: 10px;			/* pour les navigateurs respectant la norme */
}

Vous retrouverez donc ces préfixes propriétaires pour un certain nombre d’attributs. A terme, ces préfixes devraient disparaître, mais en attendant, nous devons les subir, et alourdir nos feuilles de styles. Vous pouvez également utiliser une solution comme Prefix Free, qui se charge d’ajouter les préfixes pour vous.

Les sélecteurs

Avec CSS2, si nous voulions différencier les styles des premiers ou derniers éléments, les éléments pairs ou impairs, nous devions ajouter des classes du style: first, last, odd, even. Cela n’est pas gênant en soi, mais n’est pas très satisfaisant d’un point de vue sémantique.

CSS 3 résout le problème en proposant tout une gamme de sélecteurs. Prenons l’exemple d’une liste HTML simple:

<pre lang="HTML" line="1" escaped="1"><ul>
	<li>Premier élément,</li>
	<li>Second élément,</li>
	<li>Troisième élément,</li>
	<li>Quatrième élément,</li>
	<li>Cinquième et dernier élément.</li>
</ul>

Sans rien ajouter au code HTML, nous pouvons aisément personnaliser la présentation de chacune des lignes de cette liste:

1
2
3
4
li:first-child { border-top: 1px solid black; }
li:last-child { border-bottom: 1px solid black; }
li:nth-child(odd) { background: #CCC; } /* equivalent de 2n+1 */
li:nth-child(2n) { background: #333; color: white; } /* equivalent a even */

Ce qui donne:

Les sélecteurs

Comme vous pouvez le constater, nous avons déjà quelque chose de relativement puissant, mais nous pouvons aller encore plus loin.
Reprenons notre liste:

<ul>
	<li><a href="http://www.emmanuelgeorjon.com/">Premier élément</a>,</li>
	<li><a href="http://www.emmanuelgeorjon.com/">Second élément</a>,</li>
	<li><a href="http://www.google.com/">Troisième élément</a>,</li>
	<li><a href="http://www.emmanuelgeorjon.com/">Quatrième élément</a>,</li>
	<li><a href="http://www.emmanuelgeorjon.com/">Cinquième élément</a>,</li>
</ul>

Si nous voulons différencier les liens internes des liens externes, nous pouvons utiliser l’expression suivante:

1
a[href^="http://www.emmanuelgeorjon"] {  color:red; }

Ce qui donne:

Différenciation des liens internes

De la même façon, a[href$="..."] sélectionnera les éléments qui se terminent par la valeur indiquée, et a[href*="..."] sélectionnera l’élément qui contiendra au moins une fois la valeur indiquée.

L’ensemble des syntaxes est décrit sur la page Sélecteurs du W3C.

Gestion des colonnes

Jusqu’à présent, nous gérions les colonnes « à la main », c’est-à-dire en utilisant des balises div ou section.
CSS3 nous donne la possibilité d’afficher un texte sur plusieurs colonnes, en s’appuyant sur 4 nouveaux attributs:

  • column-count indique le nombre de colonnes,
  • column-width permet de définir la largeur des colonnes,
  • column-gap désigne l’espace entre les colonnes,
  • column-rule permet d’afficher une bordure entre les colonnes.
1
2
3
4
5
6
7
8
9
10
p.box12 {
	text-align: justify;
	width: 400px;
	-moz-column-count: 3;
	-moz-column-gap: 2em;
	-moz-column-rule: 1px solid black;
	-webkit-column-count: 3;
	-webkit-column-gap: 2em;
	-webkit-column-rule: 1px solid black;
}

et le résultat est

Les colonnes

Comme vous pouvez le constater je n’ai utilisé que les préfixes propriétaires. Ce module du W3C n’en n’est manifestement qu’au début de sa définition. Son utilisation, pour moi, est déconseillé pour l’instant.

Les couleurs

La gestion des couleurs est plus élaborée que dans les versions précédentes, et intègre notamment la gestion de la transparence et des dégradés.

Nouvelles méthodes

Avec CSS2, il n’y avait qu’une seule méthode pour désigner une couleur: il fallait indiquer les valeurs RGB (Red Green Blue) en hexadécimal. Avec CSS3, nous avons maintenant

  • RGB( r, g, b), pour indiquer les valeurs de chaque couleur rouge vert bleu, mais en décimal,
  • RGBa( r, g, b, a), où a est un nombre décimal compris entre 0 et 1, indiquant l’opacité,
  • HSL(h, s, l) et HSLa(h, s, l, a), qui conviendront peut être plus aux graphistes, puisqu’elles permettent de travailler avec les valeurs Hue (teinte), Saturation, et Lightness (luminosité). Le paramètre a gère l’opacité.

Exemple:

1
2
3
div.box1 { background:rgb(230, 160, 40); 	}
div.box2 { background:rgb(240, 180, 80); 	}
div.box3 { background:rgb(250, 200, 120); 	}

Donne ceci:

Utilisation de rgb()
1
2
3
div.box1 { background:rgba(230, 160, 40, 0.5); 	}
div.box2 { background:rgba(240, 180, 80, 0.5); 	}
div.box3 { background:rgba(250, 200, 120, 0.5); 	}

Donne cela:

Utilisation de rgba()
Gestion des dégradés

L’autre nouveauté en matière de gestion des couleurs, est la possibilité de définir des dégradés linéaires ou radiaux. Les attributs devraient être linear-gradient et radial-gradient, mais nous allons devoir jouer avec les préfixes propriétaires:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box4 {
	/* anciens navigateurs */
	background: rgb(30,87,153);
	/* FF3.6+ */
	background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(125,185,232,1) 100%);
	/* Chrome,Safari4+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
	/* Chrome10+,Safari5.1+ */
	background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%);
	/* IE10+ */
	background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%);
	/* W3C */
	background: linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%);
}

Qui donne:

Gestion des gradients

Pour ceux qui veulent gérer Internet Explorer, je vous laisse la commande qu’il faut:

1
2
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );

Le dégradé radial existe dans certains navigateurs, mais les essais effectués montrent un rendu assez douteux (sur Firefox notamment).

Les bordures et les ombres

La gestion des bordures est bien plus développée que dans les versions précédentes, avec les bords arrondis, et les multi-bordures.
Les attributs pour les coins arrondis nécessitent également de jouer avec les préfixes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box {
	border:solid 2px #000000;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright:30px;
	-moz-border-radius-bottomleft:30px;
	-moz-border-radius-bottomright:10px;
	-webkit-border-top-left-radius:10px;
	-webkit-border-top-right-radius:30px;
	-webkit-border-bottom-left-radius:30px;
	-webkit-border-bottom-right-radius:10px;
	border-top-left-radius:10px;
	border-top-right-radius:30px;
	border-bottom-left-radius:30px;
	border-bottom-right-radius:10px;
}

Ce qui donne:

J’ai testé au passage les valeurs groove, et ridge, qui complète les classiques solid, dashed, dotted, ....

Si nous voulons ajouter une ombre à notre boîte, l’attribut est box-shadow: horizontal length, vertical length, blur radius, shadow color. Nous devons donc indiquer la taille horizontale, et verticale de l’ombre, ainsi que sa dureté: plus le paramètre blur radius est élevé, plus l’ombre est diffuse, et réciproquement.

1
2
3
4
5
6
7
8
9
10
11
.box6 {
	/* une bordure simple à coins arrondis */
	border:solid 2px #000000;
	-moz-border-radius: 10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	/* l'ombre proprement dite */
	-moz-box-shadow:10px 10px 5px #000000;
	-webkit-box-shadow:10px 10px 5px #000000;
	box-shadow:10px 10px 5px #000000;
}
Ombre extérieure

Nous pouvons placer l’ombre à l’intérieur avec le paramètre inset

1
2
3
	-moz-box-shadow: inset 7px 7px 7px #333;
	-webkit-box-shadow: inset 7px 7px 7px #333;
	box-shadow:inset 7px 7px 7px #333;

Qui donne:

Ombre intérieur

Autre possibilité avec les bordures: nous pouvons faire varier la couleur des bordures dont la largeur fait plusieurs pixels:

1
2
3
4
5
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;

Donne:

Bordures complexes

Attention, cela ne marche pour l’instant qu’avec FireFox.

Gestion des polices

L’attribut font-face existait déjà, mais était plus ou moins abandonné. Il revient aujourd’hui, et permet donc d’utiliser à peu près n’importe quelle fonte pour nos sites Web.

Utiliser une police de caractère comporte deux étapes: la déclaration de la poilice, puis son utilisation avec l’attribut font classique.
La déclaration d’une police consiste principalement à la nommer, et à indiquer où la trouver. Les formats possibles sont: TrueType (ttf), Web Open Font Format (woff), OpenType (otf), embedded-opentype, (eot), et SVG.

Exemple:

1
2
3
4
5
6
7
8
9
10
@font-face { font-family: "Chicken Butt";
	src: 	url("Chicken Butt.ttf");
	src: 	local("Chicken Butt"),
		url("Chicken Butt.woff") format('woff'),
		url("Chicken Butt.otf") format('otf');
}
.box {
	font: "Chicken Butt";
	font-size: 3em;
}

Ce qui donne:

Utilisation de font-face

(la police est disponible sur Dafont.com).

A manipuler avec précaution, pour trois raisons:

  • D’abord, il faut veiller aux aspects légaux: ai-je le droit d’utiliser la police? sous quelles conditions? est-ce payant?
  • Le poids de ces polices n’est parfois pas négligeable, et il faut en tenir compte (celle de l’exemple pèse 170 Ko),
  • Tous les formats ne sont pas utilisables sur tous les systèmes

Les spec W3C sont disponibles ICI.

Nous pouvons également ajouter une ombre aux textes, avec l’attribut: text-shadow

1
2
3
4
5
.box {
	font-family: "Chicken Butt";
	font-size: 3em;
	text-shadow:5px 5px 5px #000000;
}

Donnera:

Ombre sur du texte

Les transitions et transformations

Je termine cet article par des choses à la fois un peu spectaculaires et expérimentales. Spectaculaires parce que nous arrivons à faire avec des attributs CSS, ce que nous faisions avant avec des scripts assez lourds, et expérimentales parce que nous sommes encore loin d’obtenir une publication finale, et une prise en charge par tous les navigateurs.

Commençons par les transformations:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div.skewed {
    -webkit-transform: skew(-39deg, 1deg) ;
    -moz-transform: skew(-39deg, 1deg) ;
    -o-transform: skew(-39deg, 1deg) ;
}
div.rotated {
    -webkit-transform: rotate(8deg) ;
    -moz-transform: rotate(8deg) ;
    -o-transform: rotate(8deg) ;
}
div.scaled {
    -webkit-transform: scale(1, 0.54);
    -moz-transform: scale(1, 0.54);
    -o-transform: scale(1, 0.54);
}

Donnera:

Les transformations

Vous montrer les transitions est un peu plus compliqué puisqu’il s’agit de montrer des éléments animés.
Je vous laisse donc jouer avec ces paramètres sur le site CSS3 Maker

Tout est déjà fait

Il n’est pas forcément évident de se rendre compte de ce que pourra donner tel ou tel paramètre. Est-ce que l’ombre est suffisante? ou le dégradé assez prononcé?

Heureusement pour nous, avec CSS 3 sont apparus de nombreux sites qui génèrent directement le code CSS à partir d’un certain nombre de critères. J’en ai fait une petite sélection:

  • D’abord, CSS3 Gradient Buttons qui n’est pas un générateur, mais qui propose des boutons stylisés (gradient, ombre, coins arrondis, …),
  • CSS3 Generator. Le site propose, avec un design épuré, de visualizer le code CSS, et son rendu ,
  • Ultimate CSS Gradient Generator, site très complet et simple pour générer des gradients linéaires ou radiaux
  • CCS3 Maker, déjà cite précédemment, propose quasiment tous les attributs abordés dans cet article.

Conclusion

Comme dans le cas de HTML5, CSS3 marque une évolution vraiment significative des styles, en permettant une mise en forme élaborée, sans avoir recours à des images, ou à des balises sans lien avec le contenu. La question aujourd’hui, est la même que pour HTML5: faut-il y aller dès maintenant?

La réponse est plus nuancée: d’une part, le niveau de maturité des modules, et surtout la qualité de leur implémentation dans les navigateurs, varient énormement d’un module à l’autre. D’autre part, depuis les débuts CSS2, le nombre de plateformes à tester est devenu gigantesque, avec un minimum de 5 systèmes d’exploitation (Windows, MacOS, Linux, Android, iOS), un minimum de 5 navigateurs (Internet Explorer, Firefox, Chrome, Opera, Safari, …), un nombre de versions qui devient délirant (4 versions en moins d’un an, rien que pour Firefox). CSS3 peut donc très vite devenir un véritable cauchemar.

Si votre objectif est d’obtenir rapidement un site robuste, mon conseil serait de rester sur CSS2. Dans les autres cas, vous pouvez démarrer avec CSS3, en commençant par les modules les mieux supportés par les navigateurs. Ceux qui veulent notamment développer un site pour les smartphones, pourront utiliser très avantageusement les media-queries.

Références
  • Des exemples de chacun des modules de CSS3. Sur le même site, vous trouverez l’état d’avancement des différents modules CSS3,
  • Une autre liste de modules CSS3, avec un tableau résumant la compatibilité avec les différents navigateurs,
  • Vous pouvez consulter également le site de Chris Coyier, CSS-Tricks, qui est, en lui-même, une très belle démo CSS3.

Partager cet article