V1V2
Blog & Projects

Introduction au CSS3

Logo CSS3

Cette introduction est destinée à ceux qui souhaitent avoir un aperçu global de ce qu'apporte le CSS3. Vous y découvrirez un ensemble conséquent de nouveautés, comment utiliser les préfixes propriétaires afin d'en tirer profit dès maintenant et nous discuterons du caractère non-critique de son utilisation. Il s'agit de la suite logique de l'Introduction à l'HTML5, mais elle peut être lue indépendamment.

Le CSS3 c'est quoi ?

Le CSS3 est le nom employé pour caractériser l'ensemble des nouveautés depuis le CSS2.1. Il s'agit par exemple d'un ensemble de nouveaux effets à appliquer sur nos éléments HTML. Vous verrez dans cet article à quel point il est simple de réaliser des effets visuels impressionnants en quelques lignes. Mais le CSS3 c'est également un ensemble de nouveaux sélecteurs, de nouvelles manières de spécifier les couleurs, une détection des caractéristiques de l'appareil de l'utilisateur, des calculs dans les feuilles de style, des SVG en arrière plan... Bref, le CSS3 est un généreux enrichissement des feuilles de style qui, en plus d'être profitable à l'utilisateur, l'est au développeur également ! La plupart des développeurs web ont découvert le CSS3 en cherchant à appliquer certains effets sur leurs sites. Pour ma part, j'ai cherché à appliquer des bordures arrondies sur mes blocs HTML. Je vais prendre donc prendre cet effet comme exemple pour introduire les concepts du CSS3.

Exemple pratique : Les bordures arrondies

Supposons que vous travailliez sur le design d'un site web qui inclut un système de commentaires, comme un blog par exemple. Vous avez la soudaine idée lumineuse d'afficher une bulle à la manière des bandes dessinées afin d'apporter une touche un peu originale à vos commentaires. Vous êtes donc face à votre belle balise div contenant un commentaire de votre lecteur :

<div class="comment">
  Ouah, c'est vraiment une excellente introduction au CSS3 !
</div>

Et vous vous dites :

Après quelques recherches vous tombez sur des sites à l'allure assez vieillotte qui vous disent : "Il faut faire un table à 9 cases dans lequel on va placer 9 images découpées sous Photoshop".

L'art de faire les choses salement

Nous voici donc partis pour mettre en place l'HTML de notre tableau à 9 cases (au mieux certaines techniques alternatives réduisent à 3 cases à condition que la largeur ou la hauteur de votre bloc soit fixe). Après avoir donc passé 2 heures sous Photoshop à essayer de bien caler au pixel près vos images, notre pauvre balise div s'est maintenant transformée en quelque chose du genre :

<table class="comment">
  <tr>
    <td class="top-left"></td>
    <td class="top"></td>
    <td class="top-right"></td>
  </tr>
  <tr>
    <td class="left"></td>
    <td class="content">Ouah, c'est vraiment une excellente introduction au CSS3 !</td>
    <td class="right"></td>
  </tr>
  <tr>
    <td class="bottom-left"></td>
    <td class="bottom"></td>
    <td class="bottom-right"></td>
  </tr>
</table>

Avec pour CSS :

/* Taille des coins */

.comment .top-left,
.comment .top-right,
.comment .bottom-left,
.comment .bottom-right {
  width: 50px;
  height: 50px;
}

/* Taille des bords gauche et droit */

.comment .left,
.comment .right {
  width: 50px;
}

/* Taille des bords bas et haut */

.comment .top,
.comment .bottom {
  height: 50px;
}

/* Cellules du haut */

.comment .top-left {
  background: url('top-left.png');
}
.comment .top {
  background: url('top.png');
}
.comment .top-right {
  background: url('top-right.png');
}

/* Cellules du milieu */

.comment .left {
  background: url('left.png');
}
.comment .content {
  background: url('content.png');
}
.comment .right {
  background: url('right.png');
}

/* Cellules du bas */

.comment .bottom-left {
  background: url('bottom-left.png');
}
.comment .bottom {
  background: url('bottom.png');
}
.comment .bottom-right {
  background: url('bottom-right.png');
}

Et en théorie à ce moment là nous devrions prendre un peu de recul et nous poser quelques questions sur ce que nous venons d'écrire.

  • C'est long et pénible à écrire,
  • Nous ne respectons pas le principe de séparation du contenu et du design,
  • Nous utilisons un tableau qui ne contient pas de données tabulaires,
  • La page sera plus longue à charger (surtout si on a beaucoup de commentaires),
  • Le code est difficilement maintenable, par quelqu'un d'autre et par soi-même,
  • On risque potentiellement d'être pénalisé par les moteurs de recherches pour contenu mal formaté.

Bref, ce type de pratique est à bannir définitivement. Les bidouilles de ce genre étaient parfaites lorsqu'il n'y avait pas d'autres alternatives, lorsque le CSS3 n'était que très peu supporté. Aujourd'hui nous sommes en 2011, et nous avons enfin la chance de pouvoir faire autrement ! Donc on sélectionne tout cet affreux code préhistorique, et on fait un grand ménage ! Nous en sommes donc revenus au point de départ. Il est grand temps de redonner à l'HTML la fonction qui lui est dûe, à savoir organiser le contenu de la page. Pour tout ce qui concerne le design, c'est uniquement dans la feuille de style CSS que ça se passe.

La belle manière de faire en CSS3

Afin de styliser notre bulle de bande dessinée nous allons commencer par lui appliquer une simple bordure d'1 pixel et un fond blanc :

.comment {
  background: white;
  border: 1px solid black;
}

Se pose ensuite la question fatidique des coins arrondis. Je ne doute pas que la plupart d'entre vous savent déjà que je vais vous parler de la propriété border-radius. Effectivement, c'est ce que nous allons maintenant utiliser pour arrondier nos coins. Il s'agit d'une nouvelle propriété CSS3 que l'on utilise en spécifiant la taille de l'arrondis de notre bordure :

.comment {
  background: white;
  border: 1px solid black;
  border-radius: 30px;
}

Donc là vous vous précipitez vers votre navigateur favoris pour tester ce code... et là, c'est le drame.

Ah oui ? Peut-être devriez-vous essayer ceci dans un autre navigateur ?

Avez-vous testé sous Internet Explorer 9 ? Sous Opera ?

Effectivement, vous auriez totalement raison si nous en restions là...

Les préfixes propriétaires (ou préfixes vendeurs)

Si je vous disais que nous pourrions faire fonctionner ces coins arrondis sous Firefox, Chrome et Safari, ce serait déjà mieux non ? Ces navigateurs, qui ont été des précurseurs de l'implémentation de border-radius, utilisent des préfixes propriétaires qui sont théoriquement des expérimentations des nouvelles propriétés. Ils sont ainsi libres de ne pas suivre les recommandations du W3C, aussi bien dans la manière d'afficher l'effet que dans la manière de l'écrire en CSS.

Heureusement, ces navigateurs ont une forte volontée de respect des standards. Et à part quelques rares exceptions, ils suivent très exactement les spécifications du W3C. Par conséquent l'écriture des nouvelles propriétés est la même, mais en incluant simplement le préfixe spécifique à chaque navigateur :

  • -moz- pour Firefox,
  • -webkit- pour Chrome, Safari, iPhone, Android,
  • -o- pour Opera,
  • -ms- pour Internet Explorer,
  • -khtml- pour Konqueror,
  • - ...et il en existe encore d'autres...

En pratique non ! Tout d'abord, certains navigateurs n'implémentent pas certaines propriétés CSS3, donc préfixes ou non, ça ne marchera pas (c'est le cas d'Internet Explorer). Ensuite, on peut considérer que les navigateurs très fortement minoritaires tels que Konqueror peuvent être ignorés. Et enfin Opera se veut avant-gardiste en implémentant directement la plupart des propriétés CSS3 sans préfixe. Ça nous laisse donc avec :

  • -moz-
  • -webkit-

Ce qui est bien plus digeste. Pour en revenir à notre exemple de border-radius, en écrivant ceci :

-webkit-border-radius: 10px;
   -moz-border-radius: 10px;
        border-radius: 10px;

Notre bordure s'affichera correctement arrondie sur :

  • Internet Explorer 9,
  • Firefox,
  • Chrome,
  • Safari,
  • Opera,
  • Le navigateur iPhone,
  • Le navigateur Android,
  • Le navigateur Blackberry.

Et ne s'affichera pas arrondie sur :

  • Internet Explorer 8 et versions inférieures

Reconnaissez que ce serait vraiment dommage de ne pas tirer profit d'une telle simplicité uniquement parce vous n'avez pas de bords arrondis sous IE8...

Ah mais c'est certain, Internet Explorer couvre encore une grande partie de la population, c'est clair. Mais la question importante à laquelle il faut maintenant répondre c'est : Si elles ne s'affichent pas, est-ce si grave ?

Est-ce si grave que mes bordures ne soient pas arrondies ?

...probablement pas

Si le coeur de votre site repose sur le fait d'afficher des blocs aux bords arrondis, et que celui-ci perd tout intérêt sans ces bords arrondis, alors effectivement, il est important que les utilisateurs d'Internet Explorer 6, 7 et 8 voient s'afficher correctement vos bordures. Dans tous les autres cas, demandez vous sérieusement : Est-ce que c'est si grave que mon site n'affiche pas de bordures arrondies ? A-t-il l'air bancale, cassé, non fonctionnel s'il ne les affiche pas ? Soyons raisonnables 5 minutes, des coins arrondis ne sont à 99,9% jamais vitaux pour nos sites. Il s'agit la plupart du temps d'une bonne idée qui nous a traversé l'esprit pour améliorer un peu notre design, mais reconnaissez que ça n'est pas si dramatique de ne pas les avoir. Chaque année, chaque mois, chaque jour, des gens achètent de nouveaux ordinateurs, font des mises à jour, Internet Explorer 9 est un énorme pas en avant qui va faire basculer une grande partie des utilisateurs vers le monde du CSS3.

Le reste verront des bords carrés. Voilà, c'est dit. Et vous savez quoi ? Ça n'est vraiment pas grave. Pourquoi ? Parce qu'ils n'auront aucune idée du fait que votre design affiche des bords arrondis sur d'autres navigateurs.

Ils n'en sauront rien !

Prenons un exemple connu de tous : Facebook. Vous savez tous que ce bandeau bleu est présent en haut du site :

Bannière Facebook simple

Il est tout à fait satisfaisant ce bandeau bleu non ?. Certains le trouvent même particulièrement joli et simple. Tout va bien. Si je vous révélais maintenant un scoop, sur Opera, il y a une légère ombre sous le bandeau bleu en haut de la page :

Bannière Facebook avec ombre

Est-ce que votre monde s'écroule ? Est-ce que le bandeau bleu qui ne posait aucun problème est devenu subitement immonde et dépassé ? Non. Tout simplement parce que nous n'avions aucune idée de l'existence de ce design alternatif sur un autre navigateur. Et ça ne nous avait jamais posé de problème. Les utilisateurs lambdas (ou "Madame Michu" pour ceux qui préfèrent) ne savent pas que le site qu'ils ont sous les yeux pourrait s'afficher d'une autre manière sous un autre navigateur. Ils ne se poseront même pas la question du fait que nos bords carrés seraient plus jolis s'ils étaient ronds. Tant que vous fournissez à Internet Explorer 6, 7 et 8 un design correct, fonctionnel, qui n'a pas l'air cassé... alors vous pouvez vous faire plaisir et utiliser le CSS3 tant que vous voulez et dès aujourd'hui.

Les nouveautés - Quoi de neuf docteur ?

Nous allons maintenant voir un bon nombre de nouveautés que je vais diviser en 3 grandes catégories :

  • Les effets visuels
  • Les sélecteurs
  • Les nouveaux outils pratiques

Il ne s'agit pas de l'intégralité des nouveautés, mais ça vous permettra d'avoir un très bon aperçu global.

Les effets visuels

border-radius

Arrondit les bords d'un bloc :

Coins arrondis

box-shadow

Applique une ombre sur un bloc :

Une ombre

text-shadow

Applique une ombre sur un texte :

Du texte ombré

gradient

Affiche un dégradé de couleurs :

Un dégradé

@font-face

Permet d'utiliser n'importe quelle police :

Des polices originales

opacity

Ajuste la transparence d'un élément :

Semi-transparence

transform

Déplace, déforme, ou effectue la rotation d'un élément :

Transformation CSS3

transition

Passe d'un état à un autre d'un élément avec par une transition animée :

Transition CSS3

3D transform

Effectue des transformations en 3D :

Des éléments en 3D

Les sélecteurs

Le CSS3 introduit un ensemble de nouveaux sélecteurs. En voici quelques uns :

Sélection par position des fils

:nth-child(expression) permet de sélectionner un ensemble d'éléments selon leur position grâce à une expression mathématique (rassurez-vous, pas de cosinus d'exponentielle au carré au programme !) ou bien grâce à certains mots-clés. Un cas d'utilisation très fréquent est la coloration d'un tableau. Il est plus lisible d'utiliser 2 couleurs de fond différentes alternées pour se repérer plus facilement :

Un tableau aux couleurs alternées

On pouvait auparavant utiliser du JavaScript ou un code côté serveur pour colorer une ligne sur deux. On a maintenant une méthode bien plus simple grâce à :nth-child :

table tr:nth-child(odd) {
  background-color: #EEF;
}

Le mot-clé odd signifie "chiffres impairs" (et even pour les chiffres pairs), mais nous aurions également pu construire une expression mathématique simple en utilisant la variable n :

table tr:nth-child(2n + 1) {
  background-color: #EEF;
}

Ce qui produit exactement le même effet, mais permet une utilisation bien plus poussée dans certains cas spécifiques.

Séléction d'éléments par la valeur d'un de leurs attributs

[attribut^="valeur"] sélectionne les éléments dont l'attribut spécifié commence par une certaine valeur. Voici un exemple d'utilisation :

<a href="http://www.exemple1.com">Lien externe</a>
<a href="http://www.exemple2.com">Lien externe</a>
<a href="#">Lien interne</a>
<a href="http://www.exemple3.com">Lien externe</a>
a[href^="http://"] {
  color: red;
}

Ce qui colorera en rouge uniquement les liens externes. Il existe également 2 autres notations qui permettent de filtrer les éléments dont les attributs se terminent par une valeur ([attribut$="valeur"]) et les éléments dont les attributs contiennent au moins une fois une chaine de caractères ([attribut*="valeur"]).

Exclusion d'éléments

:not permet d'exclure certains éléments de la sélection. Par exemple, le code suivant n'affichera en vert que les 2 derniers liens :

<a href="#" class="notme">Je suis rouge</a>
<a href="#">Je suis vert</a>
<a href="#">Je suis vert</a>
a {
  color: red;
}

a:not(.notme) {
  color: green;
}

Les nouveaux outils pratiques

Les media queries

Les media queries sont une manière élégante de définir des styles différents selon le type de média de l'utilisateur. C'est particulièrement utile pour avoir des styles différents sur les écrans de petite taille des smartphones et des tablettes tactiles. Ainsi une seule page HTML utilisant les media queries peut distribuer des versions différentes de son design, afin de s'adapter par exemple à la largeur de l'écran ou même à l'orientation du téléphone.

body {
  background-color: green;
}

@media screen and (max-device-width: 600px) {

  /* Style appliqué uniquement sur les écrans
  de moins de 600px de largeur */

  body {
    background-color: red;
  }
}

Dans cet exemple le fond de la page s'affichera en vert sur les grands écrans et en rouge sur les petits écrans.

Les colonnes

Avec le CSS3 il est désormais possible de définir des colonnes, à la manière des contenus éditoriaux de journaux. Ce cas d'utilisation était assez rare avant l'apparition du CSS3, qui simplifie grandement les choses. Avec un code aussi simple que:

p {
  column-count: 2;
}

On peut passer très facilement de :

CSS3 columns 1

à :

CSS3 columns 2

ou bien encore :

CSS3 columns 3

Il était auparavant très délicat de reproduire une telle structure de page, ce qui impliquait un découpage du texte avec du code serveur ou JavaScript. Cette nouvelle méthode ultra simple permet de créer des mises en page originales afin d'aérer davantage le texte.

RGBA et HSL(A)

Il est désormais également possible d'utiliser de nouvelles notation pour spécifier des couleurs. La méthode standard RGB accueille maintenant une composante Alpha qui gère l'opacité. Cette nouvelle notation diffère beaucoup de la précédente. On utilise le format rgba(r, g, b, a) avec "r", "g" et "b" étant des entiers de 0 à 255 et "a" un décimal de 0 à 1. Pour colorer un arrière plan en rouge semi-transparent nous avons :

div {
  background-color: rgba(255, 0, 0, 0.5);
}

La notation HSL (Hue, Saturation, Lightness) un peu moins commune permet d'obtenir les mêmes résultats en jouant sur la teinte, la saturation et la luminosité.

Conclusion

Vous êtes arrivé jusqu'ici ? Félicitations ! C'est probablement que vous portez un intérêt réel au CSS3 et je ne peux que vous encourager.

Pour terminer, s'il y a une seule chose que j'aimerais que vous gardiez en tête c'est le fait qu'il n'est pas nécessaire qu'un site s'affiche exactement de la même manière sur tous les navigateurs. Il s'agit d'un changement de philosophie dans le webdesign qui va de pair avec des sujets tels que l'amélioration progressive (ou enrichissement progressif) et la dégradation gracieuse. Nous aurons l'occasion d'en reparler, mais pour le moment un petit instant de détente en rapport avec le sujet sur le site :

Do Websites Need To Be Experienced Exactly The Same In Every Browser?

Un passage de la souris sur le texte révélera le potentiel de votre navigateur, mais l'important est bel et bien le contenu et le message à faire passer. A méditer ! Comme vous pouvez le voir, le CSS3 apporte énormément de nouveautés. Chacune d'entre elles mérite un tutoriel complet spécifique, et c'est un des objectifs de ce site. Je vous invite donc à suivre l'activité de ce site au cours des prochains mois, qui seront particulièrement intenses !A bientôt pour une avalanche de tutoriels ! Psst ! J'ai aussi un article d'Introduction à HTML5 si vous en voulez encore !