Le CSS
– feuilles de style
en cascade

Conçu dans les années 1990, dès l’origine du Web, le langage CSS est couramment utilisé par les développeurs pour la conception des sites internet depuis les années 2000. Il a évolué sous forme de « levels ». Chaque nouveau niveau est contraint d’intégrer le précédent level, et de lui être compatible. Comme des poupées russes, chaque nouveau niveau intègre le précédent sous forme de sous-ensemble.

Pourtant, cette évolution n’a pas été sans difficultés. La version finale de CSS1 est publiée en 1996, définissant plus de cinquante propriétés. Elle adopte un langage simple et une terminologie adaptée aux usages informatiques. Cette première version s’attache à définir les aspects typographiques du texte : police, taille des caractères ou couleur.

La version CSS2 (1997) ajoute environ 70 nouvelles propriétés comme par exemple la déclinaison des styles par rapport au média ou au format utilisé. Malheureusement, le résultat n’est pas toujours à la hauteur techniquement. La version CSS2.1 (2007) verra ces problèmes corrigés.

CSS3 rencontre lui aussi des problèmes techniques, tout en étant développé en parallèle de CSS2.1.

CSS 4 est toujours en cours d’écriture depuis 2010. C’est la version CSS2.1 qui reste la plus utilisée.

En ce qui concerne la compatibilité avec les différents navigateurs, des différences subsistent. En dépit des recommandations du W3C, les feuilles de style ne sont pas toutes reconnues de la même façon en fonction des navigateurs. Il est conseillé au développeur de toujours vérifier son travail sur différents navigateurs pour être sûr de la qualité du rendu.

CSS est le premier langage à proposer un concept de « cascade », c’est-à-dire qui permet d’appliquer les mêmes règles à plusieurs ou à tous les documents HTML d’un même site. Parmi ces règles :

• Les couleurs.
• Les marges et les espacements.
• Les images de fond.
• Les polices…

Ainsi, le HTML se charge de la structure du site, tandis que le CSS vient en renfort pour gérer la présentation. Grâce à CSS, on peut donc définir un ensemble de caractéristiques communes (via les feuilles de style) à toutes les pages d’un même site et par conséquent modifier très facilement l’apparence d’un site tout en entier. Par exemple, en une ligne de code, il est possible d’appliquer le même logo à toutes les pages du site, ou de définir la couleur et la police de tous ses titres.

Ce couplage HTML/CSS présente de nombreux avantages :

• Structure et présentation d’un site sont stockées sur des fichiers séparés.
• Le code HTML, débarrassé de ses balises de présentation, est moins lourd.
• L’aspect du site est uniforme et peut être mis en place et modifié rapidement.
• Un document peut être associé à plusieurs feuilles de style, ce qui permet au visiteur de choisir plusieurs affichages (lecture à l’écran, impression…).
• On peut également choisir la feuille de style adaptée au média sur lequel est lu le document : smartphone, télévision, écran d’ordinateur…

CSS est donc un excellent outil pour optimiser le responsive design d’un site.

Quelques astuces permettent d’exploiter CSS comme un acteur à part entière de l’optimisation du référencement naturel.

Comme cela a été évoqué précédemment, l’utilisation de CSS permet d’alléger le code HTML. Cela accélère le temps de chargement de la page. C’est un élément à ne pas négliger.

De plus, le CSS permet d’uniformiser le site de plusieurs manières, notamment la police, la taille et la couleur du texte. Associée à une cohérence et à une qualité du contenu, ce « lissage » de l’apparence des pages est un atout précieux et favorisera la visibilité du site lors de recherches sur les moteurs par les internautes.

En résumé, le langage CSS, par ses feuilles de style en cascade, permet un développement des sites web en HTML qui est libéré des contraintes de codage des éléments de présentation. Il allège le poids du fichier HTML, permet d’uniformiser les pages d’un site et de les modifier facilement. Il permet d’adapter le site à des médias de lecture différents, à des formats de contenus différents. Enfin, il est un bon allié pour les agences de référencement naturel.