Les avantages de CSS3

3

Pour les non développeurs, CSS3 ne semble rien apporter de révolutionnaire.

Des coins arrondis, des ombres… On en faisait déjà avant, non ?

La grande nouveauté, c’est que CSS3 permet aux intégrateurs d’automatiser ces effets visuels qui nécessitaient jusqu’à présent l’utilisation d’images, de scripts ou de modifications du code HTML : ombres portées, coins arrondis, opacité, arrière plans multiples, dégradés complexes, multi-colonage, effets textuels…

Boutons CSS3

A gauche : Internet Explorer 8 / A droite : Firefox 3.5

Dans cet exemple, il suffit d’une seule ligne de code CSS3 pour activer les effets visuels visibles à droite.

Gains de productivité

A l’origine, CSS à été inventé pour pouvoir contrôler le rendu sans avoir à modifier le contenu (le code HTML).

Or avant CSS3, certains effets visuels nécessitaient encore d’alourdir le HTML avec de nouvelles balises.

L’exemple le plus parlant concerne les coins arrondis :

coins

Jusqu’à présent, pour créer ce type d’élément, il fallait créer :

  • 4 images de fond
  • 4 règles CSS
  • 4 balises HTML (à répercuter pour tous les éléments concernés)

Mais depuis la propriété border-radius (CSS3), il suffit de :

  • 0 image de fond
  • 1 règle CSS (border-radius)
  • 1 balise HTML

Le gain de temps en intégration est considérable.

Gains de maintenance

CSS3 permet de rendre automatique certains effets visuels qui nécessitaient jusqu’à présent l’emploi d’images.

C’est le cas par exemple des effets d’ombres.

Exemple de texte html

A gauche : Internet Explorer 8 / A droite : Firefox 3.5

Avec @font-face (CSS2) et text-shadow (CSS3), il est maintenant possible d’avoir un rendu un peu plus poussé avec le texte dynamique.

Il n’est donc plus nécessaire de créer des images pour chaque texte stylisé.

Les inévitables « modifs de wording » s’en trouvent facilitées et le gain de temps devient particulièrement intéressant pour les sites en plusieurs langues.

Gains de bande passante

Cela semble relever du détail mais ce dernier point a son importance.

Grâce à CSS3, notre code HTML est plus court et nous chargeons moins d’images et de scripts, deux ressources très gourmandes en bande passante.

Plus les pages s’affichent vite, plus l’utilisateur final gagne en confort de navigation. Les sites à succès l’ont compris et se plient en quatre pour optimiser leur vitesse de chargement.

Et si vous souhaitez préparer votre site à une optimisation pour mobiles, l’économie de bande passante ne fera pas de mal non plus.

A propos des différences de rendu

A l’heure actuelle, les spécifications de CSS3 ne sont pas encore finalisées mais la plupart des navigateurs en ont déjà implémenté une bonne partie. Même Microsoft promet de faire des efforts pour supporter CSS3 dans IE9.

Alors, est-il trop tôt pour utiliser CSS3 ?

Non, de nombreux sites le font déjà pour bénéficier des avantages cités plus haut.

Twitter

A gauche : Internet Explorer 8 / A droite : Firefox 3.5

Twitter utilise par exemple les coins arrondis en CSS3 donc le rendu est différent selon les navigateurs.

Cela ne semble choquer personne et c’est normal car le service fonctionne aussi bien pour tous les utilisateurs.

Charger les commentaires

3

Commentaires

  1. Maxime Répondre

    Un des avantages qu’il faut mentionner explicitement (tu l’as fait implicitement) c’est que le non support (même partiel) du CSS3 se dégrade très bien.

    L’exemple des bordures arrondies. Si le navigateur ne le supporte pas, qu’à cela ne tienne, ils sont ignorés et sont affichés rectangles.

    Toutefois, je nuance, ça se dégrade bien si le navigateur en question supporte déjà parfaitement CSS2, sinon, il y aura les mêmes bidouilles à fournir pour fournir un rendu « de base » (ie CSS2) qu’avant.

    Et je nuance, bis, les sélecteurs avancés, eux ne se dégradent pas comme par exemple :nth-child (les règles exprimées avec seront ignorées, quelles soient CSS2, CCS3…) donc… mon propos est nuancé !

    Un de mes exemples préférés (hormis les awesome buttons que tu cites) est :
    http://www.zurb.com/playground/css3-polaroids/

  2. Baptiste Répondre

    Sympa l’exemple des polaroïds !
    La page est pleine d’effets CSS3 (transitions, rotations, opacité, text-shadow…) sans pour autant tomber dans l’excès.
    De plus la page se dégrade très proprement sur Internet Explorer.

Laissez un commentaire :

  • (will not be published)