Comment utiliser CSS3 dès aujourd’hui

CSS3 en bref

Logo de CSS3CSS3 permet la création d’effets visuels qui ne pouvaient pas être réalisés auparavant, ou qui nécessitaient du marquage en plus et/ou du Javascript.

En bref, CSS3 simplifie le job de l’intégrateur et met plus d’outils à sa disposition.

Parmi les nouveautées inclues dans les specifications CSS3, on trouve :

  • text-shadow : en une ligne on peut ajouter une ombre portée à du texte, et bien plus encore car on peut ajouter autant d’ombres qu’on le souhaite. Pour chaque ombre on définit les distances par rapport au texte d’origine sur les axes x et y, ainsi qu’une valeur de flou. Voici un exemple.
  • RGBA : avant on avait la propriété « opacity » qui permettait de rendre des objets translucides. L’inconvénient c’est que tout ce qui est contenu dans cet objet devient translucide, ce qui peut rendre les textes moins lisibles. Avec RGBA on peut définir des couleurs de fond et leur degré d’opacité avec la propriété « background », donc pas de problème de texte illisible.
  • Images de fond multiples : avec CSS3 on n’est plus limité à une image de fond par objet ; le nombre est a priori illimité.
  • box-sizing : cette propriété permet de changer le « box model ». On a la possibilité d’inclure le padding dans la taille de l’objet, ou le padding + la bordure.

Cette liste n’est pas exhaustive ; Il existe bien d’autres propriétés : dégradés, animations, rotations et autres.

Le problème

logo barré de Internet Explorer

Toutes ne sont pas compatibles avec les mêmes navigateurs et à ma connaissance, aucune n’est compatible avec les versions 7 et 8 d’Internet Explorer. Il faudra attendre IE9 pour voir du CSS3 chez Microsoft. (Voir ce tableau de compatibilité des navigateurs avec CSS3.)

Comment utiliser CSS3 dès aujourd’hui alors que Internet Explorer concerne plus du tiers des internautes ?

Cela va dépendre du projet, car si vous créez un site pour un public en particulier qui utilise à 80% IE7, ce n’est peut-être pas très intéressant d’utiliser CSS3. En revanche si votre public se situe dans la moyenne avec 35% de IE, ou mieux, si vous vous adressez à un public assez « geek », vous pouvez dès maintenant utiliser CSS3 tout en travaillant sur des vues alternatives pour les navigateurs moins évolués.

Par ailleurs, il faut savoir que certaines propriétés CSS3 peuvent être reproduites à l’aide de filtres pour IE (ombres, transparence, rotations). Ces filtres sont un peu pénibles à utiliser et ne produisent pas exactement les mêmes effets que CSS3 mais ça peut dépanner. Ne pas oublier de les mettre dans des feuilles de style séparées.

Solution : la dégradation gracieuse

Il est tout a fait possible de concevoir un site utilisant CSS3 pour des effets d’ombres, de rotations, de dégradés ou autre, et d’offrir une version alternative, plus simple, aux navigateurs moins évolués.

Cas pratique : CannyBill.com

Le site CannyBill.com a été réalisé par Andy Clarke. Si vous visualisez ce site sur plusieurs navigateurs vous verrez quelques petites différences. Cet article écrit par Andy Clarke explique sa démarche et présente des aperçus des différents navigateurs.

Selon Andy Clarke, star du Design Web et défenseur des standards Web, il ne faut pas chercher à obtenir exactement le même design dans tous les navigateurs ; il faut produire la meilleure version du site pour le meilleur navigateur (sa référence à lui est Safari 4), puis on descend la chaîne des navigateurs jusqu’à IE en adaptant le design.

Au final, l’utilisateur ne se rendra compte à aucun moment qu’il ne voit pas certains effets du fait du navigateur qu’il utilise. On parle donc de « dégradation gracieuse » car quel que soit le navigateur utilisé, l’internaute est face à un site cohérent visuellement.

Cas pratique : For a beautiful web

Sur la page d’accueil il y a 3 jaquettes de DVD en vente. Sur Safari 4, quand on passe la souris sur une jaquette, le DVD sort vers la droite avec un effet de rotation. Sur Firefox 3.6 le DVD sort sans effet de rotation, et sur IE 7 et 8, le DVD ne bouge pas.
Dans aucun de ces cas l’internaute se demande-t-il si c’est normal ou « cassé » – car peu de gens regardent un même site sur 5 navigateurs différents – donc il s’agit d’un petit plus pour les utilisateurs de Safari et Firefox.

CSS3 en 2010

Donc, pourquoi ne pas utiliser CSS3 dès aujourd’hui ? Il existe un outil qui permet de styler les éléments d’une page différemment selon qu’un navigateur supporte telle ou telle propriété CSS3 en incluant un simple fichier Javascript. Il s’agit de Modernizr. Par exemple, si le navigateur utilisé ne supporte pas le RGBA, Modernizr ajoute la classe « no-rgba » sur le tag HTML, ce qui permet de définir d’autres couleurs pour tous les navigateurs qui ne supportent pas RGBA.

Dans cette expérience, j’ai utilisé du RGBA, des images de fond multiples, et la propriété box-sizing pour inclure le padding et la bordure dans les tailles que j’ai défini.

Quelques liens

J’ai trouvé plusieurs outils qui génèrent les styles en donnant les versions des différents navigateurs. Chacun de ces outils ne propose pas les mêmes propriétés donc il faut en utiliser plusieurs.

Exprimez vous!

*