Feuilles de style en cascade

Un article de Wikipédia, l'encyclopédie libre.

Pour les articles homonymes, voir CSS.

Le langage CSS (Cascading Style Sheets [kæˈskeɪdɪŋ staɪl ʃiːts] : feuilles de style en cascade) est utilisé pour décrire la présentation d'un document structuré écrit en HTML ou en XML, et c'est le World Wide Web Consortium (W3C) qui en a la direction.

[modifier] Vue d'ensemble

CSS est utilisé pour définir les couleurs, les polices, le rendu, et d'autres caractéristiques liées à la présentation d'un document. L'objectif est de bien séparer la structure (écrite en HTML ou similaire) et la présentation (en CSS) du document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l'architecture d'un document. Enfin, CSS permet de s'adapter aux caractéristiques du récepteur.

HTML ne décrit que l'architecture interne, et CSS décrit tous les aspects de la présentation. CSS peut définir couleur, police, alignement de texte, taille, position, mais aussi le formatage non visuel, comme la vitesse à laquelle le document doit être lu par des lecteurs de texte.

Ainsi, les avantages des feuilles de style sont multiples :

La structure du document et la présentation sont gérées dans des fichiers séparés.
La conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d'être plus efficace.
Dans le cas d'un site Internet, la présentation est uniformisée : Les documents (pages « html ») font référence à la (aux) même(s) feuille(s) de styles. Cette caractéristique permet de plus un "relookage" rapide.
Un même document peut donner le choix entre plusieurs feuilles de style (impression ou lecture à l'écran par exemple). Certains navigateurs web permettent d'accéder facilement à un choix de feuilles de style.
Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de balises de présentation.

CSS utilise une pléthore de mots-outils anglais destinés à caractériser les éléments HTML. Voici l'exemple d'une portion de feuille de style :

p { font-size: 110%; font-family: Helvetica, sans-serif; }
h1 { color: white; background: red; }

Ce code CSS définit l'élément p (paragraphe) avec une taille de 110% et une police Helvetica, ou, si Helvetica est indisponible, une police générique. Quant aux titres (éléments h1) ils seront en blanc, sur fond rouge.

Le CSS permet aussi de définir plus précisément la manière de représenter un élément grâce aux id et aux class. Les identificateurs (id) sont utilisés pour caractériser un élément unique (un menu, un mot...), mais les classes (class) sont utilisées pour caractériser un ensemble d'éléments (comme des menus organisés de manière similaire).

Par exemple : l'on place dans le fichier de contenu (fichier HTML, ou similaires), comme ceci :
<p class="beauParagraphe">Je suis né en Alsace. [...]</p>
et dans le fichier de contenant :
.beauParagraphe { text-indent: 1em; }
Ceci donnera un alinéa à la classe .beauParagraphe, soit ici la phrase « Je suis né en Alsace. »

La présentation est donc bien séparée du contenu. (C'est suite à la prise en compte des avantages de CSS que le W3C déconseille maintenant les éléments et les attributs de présentation en HTML, comme align="" ou <font face="">.)

Les descriptions CSS peuvent être données à l'intérieur d'un document HTML, ou importées séparément dans le lecteur. Cette possibilité donne une certaine flexibilité à CSS. De plus, CSS peut être utilisé avec XHTML, XML, ou avec n'importe quel format de document structuré correctement implanté dans un logiciel ou dans un navigateur.

Les feuilles de style peuvent contenir des commentaires. La syntaxe est la suivante : /* commentaire */

[modifier] Histoire de CSS

Les feuilles de style étaient déjà là sous une forme ou une autre depuis le début de HTML dans les années 1990. Plusieurs navigateurs avaient leur langage de style propre qui pouvait être utilisé pour personnaliser les documents web. À l'origine, les feuilles de style étaient destinées aux utilisateurs finaux. Les premières versions de HTML ne possédaient pas beaucoup d'outils pour la mise en forme, et c'était donc souvent à l'utilisateur de décider comment le document allait s'afficher.

HTML se développait, et il permettait de répondre à l'attente des développeurs web. Avec ces fonctions naissantes, les feuilles de style devinrent moins importantes, et un langage externe permettant de définir le style n'a pas été entièrement accepté jusqu'au développement de CSS.

Le concept des feuilles de style a été à l'origine proposé en 1994 par Håkon Wium Lie ; Bert Bos travaillait au même moment sur un navigateur appelé Argo, utilisant les feuilles de style ; ils décidèrent alors de développer ensemble CSS.

Quelques langages de feuille de style avaient déjà été proposés, mais CSS était le premier à inclure l'idée de « cascade » (feuille de style en cascade) – la possibilité pour le style d'un document d'être hérité à partir de plus d'une « feuille de style ». Cela permettait d'outrepasser le style d'un site spécifique, en héritant, ou en « cascadant » le style du site dans d'autres régions. Cette fonction permet donc un gain de contrôle, à la fois pour l'auteur du site, et pour l'utilisateur. Elle permet aussi un mélange de préférences relatives de style.

La proposition de Håkon a été présentée à la conférence « Mosaic and the Web » de Chicago en 1994, et par Bert Bos en 1995. À cette même époque, le World Wide Web Consortium (W3C) se créait, et le consortium se prit d'intérêt pour CSS, et organisa un travail autour du langage. Håkon et Bert étaient les responsables du projet. D'autres membres, comme Thomas Reardon (de Microsoft) y ont participé. Fin 1996, CSS était presque prêt à être officialisé. La norme CSS1 fut publiée en décembre 1996.

En 1997, CSS a été attribué à un groupe de travail au sein du W3C, présidé par Chris Lilley. Ce groupe commença par s'occuper des problèmes non réglés par CSS1, ce qui entraîna la parution de CSS2 comme une recommandation officielle en mai 1998. CSS3 est actuellement en développement.

[modifier] Difficulté d'intégration

Bien que CSS1 soit paru en 1996, trois ans ont été nécessaires pour qu'un navigateur achève l'intégration complète de cette spécification. Internet Explorer 5.0 pour Macintosh lancé en mars 2000 fut le premier à supporter complètement (à plus de 99 %) CSS1. Les autres navigateurs suivirent peu après, et beaucoup développèrent des parties de CSS2.

Devant les difficultés rencontrées lors de la mise en œuvre de CSS2, le W3C a décidé de revoir sa copie, et de présenter une version simplifiée sur la base de ce qui a réellement pu être intégré à différents navigateurs. Cette nouvelle version, CSS2.1, est actuellement au stade de Candidate Recommendation en attendant CSS3.

En 2007, aucun navigateur n'avait achevé l'intégration de CSS2.1.

[modifier] Voir aussi

[modifier] Liens externes

[modifier] Recommandation du W3C

(fr) La spécification CSS1 (en) [1]
(fr) La spécification CSS2 (en) [2]

[modifier] Ressources

Catégorie Feuille de style de l'annuaire dmoz.
(en) Validateur CSS du W3C

[modifier] Autres

Le Wiktionnaire possède une entrée pour « CSS ».

[modifier] Livres

Wikilivres propose un ouvrage abordant ce sujet : CSS.

Le Zen des CSS, Dave Shea & Molly Holzschlag, 17 novembre 2005, Éditions Eyrolles, ISBN 2212116993, 295 pages : Niveau initié ou confirmé
CSS 2 - Pratique du design web, Raphael Goetter, 16 juin 2005, Éditions Eyrolles, ISBN 2212115709, 324 pages : Niveau débutant (notions d'HTML requises)
CSS - La référence, Édition O'Reilly, ISBN 2841773574
CSS en action, Édition O'Reilly, ISBN 2841773655
CSS Mastery: Advanced Web Standards Solutions, Friends of ed, ISBN 1590596145
Réussir son site web avec XHTML et CSS,EYROLLES, ISBN 2212119488