Le pourquoi

HTML n'est pas l'outil idéal pour réaliser des mises en page précise dans le positionnement des éléments ou dans la définition fine des attributs de présentation et de rendu (polices, couleurs, fonds, etc.). HTML n'a pas été conçu pour contrôler l'apparence des documents, mais pour décrire leur structure.

L'utilisation de feuilles de style permet de séparer le contenu de la forme. HTML décrit et apporte le contenu des documents et les feuilles de style décrivent comment est mis en page et mis en forme ce contenu pour être affiché ou imprimé.
Cette séparation entre le contenu et la forme donne une grande flexibilité dans la création, la mise à jour et la maintenance des pages. Un des avantages les plus appréciables se trouve par exemple dans la possibilité de formater une multitude de pages à partir d'une feuille de styles unique qui sera partagée par toutes ces pages.

composants d'une page web

Après 2 ans de discussion et d'élaboration (Oct. 1994 Cascading HTML style sheets -- a proposal), fin 1996, les feuilles de style CSS (Cascading Style Sheets) ont été introduites officiellement aux côtés de HTML pour permettre :

CSS est un standard (et pas une norme) défini par le W3C (World Wide Web Consortium). Il est le fruit de discussions dans des groupes de travail. Le temps peut être très long entre le moment où une nouvelle idée est présentée et le moment où elle devient une recommandation du W3C. Ce temps très long dans la mise au point des spécifications techniques du langage explique pourquoi les navigateurs ne sont pas égaux dans les implémentations qu'ils font du langage. Il existe toujours un décalage entre ce qui est en discussion et ce qui "fonctionne" réellement. A noter que contrairement à ce qui se passe avec HTML, pour les CSS ce décalage est la plupart du temps en faveur des spécifications et non des navigateurs (il aura fallu plus de 10 ans pour que les spécifications CSS2 soient à peu près implémentées - 1998 -< 2010).

Le W3C a pour but d'élaborer des standards de fonctionnement du web et de certains des langages informatiques qui y sont utilisés (HTML, CSS, XML sont les plus connus).
Le W3C est composé d'entreprises et d'organisations comme Apple, Adobe, la fondation Mozilla, Google, HP, IBM, Microsoft, Opera Software, Sun et de n'importe quelle personne intéressée par les sujets traités et ayant des compétences techniques en la matière.
Avant de devenir un standard, les spécifications élaborées par le W3C ont différents statuts suivant leur état d'avancement :

  • Working Draft : brouillon de travail pour les spécifications en cours d'élaboration et sujettes à modifications,
  • Last Call Working Draft : dernier appel de modification du brouillon,
  • Candidate Recommendation : les spécifications sont terminées et prêtes à être testées,
  • Proposed Recommendation : après modifications éventuelles suite aux tests, les spécifications sont prêtes à être publiées
  • Recommendation : les spécifications sont validées et terminées et servent de standard.

Les CSS ont évolué tout au long de 4 versions :

Il y a tellement de nouveautés dans les CSS3 que les spécifications ont été éclatées en "modules" (arrière-plan et bordure, polices, animations, etc).
Les différents modules et travaux.
Etat d'avancement des modules
Il est difficile de savoir quel navigateur implémente quoi, d'autant plus que les spécifications ne sont pas finalisées partout.

La course à l'implémentation de la version au début des années 2010 a abouti à une situation catastrophique : chaque navigateur implémente les nouvelles propriétés des CSS3 encore mal ou pas définies avec les valeurs qu'il juge adéquates.
Les noms des propriétés sont alors composées avec ce que l'on a appelé les "préfixes vendeur". Par exemple, la propriété box-shadow avait 4 syntaxes différentes : 

.ombre {
	-moz-box-shadow: 10px 10px 5px #000000;
	-webkit-box-shadow: 10px 10px 5px #000000;
	-o-box-shadow: 10px 10px 5px #000000;
	box-shadow: 10px 10px 5px #000000;
	}

L'exemple est particulièrement parlant sur 2 aspects :

  • dans 90% des cas, les valeurs retenues par les navigateurs étaient les mêmes que celles de la spécification. On a donc un code "gonflé" pour rien avec une difficulté de maintenance accrue, et un "ménage" qui ne sera jamais fait quand tout le monde sera d'accord sur le standard.
  • Microsoft a été particulièrement chiche dans l'utilisation de son "préfixe vendeur" (-ms-) et a la plupart du temps attendu le consensus pour implémenter les propriétés. Il semblerait que ce soit le seul navigateur qui ait tiré des leçons de la lointaine guerre des navigateurs à la fin des années 1990.

Aujourd'hui la situation s'est nettement améliorée, mais certaines propriétés ne sont pas fixées et ne sont pas utilisables telles que. Si vous avez des doutes, le site caniuse.com vous apportera les informations nécessaires.

La philosophie de la "Sainte Séparation", à savoir séparer le contenu de la forme et des interactions est un peu mise à mal dans les pratiques actuelles avec une diminution du rôle de HTML, des CSS qui apportent du contenu (par exemple avec les pseudo éléments :before et :after) et de l'interaction (animation) et du code JavaScript qui va générer du contenu et modifier les styles dynamiquement.

"The Web technology stack is a complete mess."
Ian Hickson – 08/01/2013 - http://html5doctor.com/interview-with-ian-hickson-html-editor/