Vous êtes ici : Accueil > Lexique > CSS

CSS : Cascading Style Sheets

Le langage CSS (Cascading Style Sheets : 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.

Vue d'ensemble

CSS est principalement utilisé pour définir les couleurs, les polices, le rendu, et d'autres caractéristiques d'un document, et a été créé pour effectuer la séparation entre structure (écrit en HTML ou similaire) et présentation (en CSS). 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 :

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 */

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 pouvaient être utilisé pour personnaliser les documents web. À l'origine, les feuilles de style étaient destinés 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é à 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 officiel. 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.

Difficulté d'intégration

Bien que CSS1 soit paru en 1996, trois ans ont été nécessaires pour qu'un navigateur achève l'implémentation 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 implémentèrent des parties de CSS2, même si en 2003, aucun navigateur n'avait achevé l'implémentation de CSS2.

Même les navigateurs qui ont achevé leur implémentation l'ont souvent fait avec difficulté ; beaucoup d'implémentations de CSS sont incomplètes ou boguées. Les auteurs ont la plupart du temps recours à des astuces (proche du bidouillage) pour réussir à obtenir un même résultat au travers de différents navigateurs et plates-formes. Un des bogues les plus connus est celui de Microsoft Internet Explorer concernant sa gestion du système de boîtes (marges, espaces, bords). En effet, à un élément de boîte possédant une taille fixée, la recommandation du W3C voudrait que les marges, les espaces et les bords s'ajoutent à la taille définie. Pour Microsoft Internet Explorer, ces propriétés sont incluses dans le calcul de boîte (mode Quirk). Sont concernées par ce bug les versions 5 et 5.5 et la version 6 quand le prologue <?xml version="1.0"?> est déclaré dans l'en-tête d'un document.

Ceci n'est qu'un bug CSS parmi des centaines d'autres qui ont été documentés dans différentes versions de Internet Explorer, Mozilla ou Opera ; la prolifération de ces bogues rend le travail multi-plateforme des designers plus compliqué. Actuellement, le moteur de rendu Gecko de Mozilla est celui qui interprète le mieux CSS, tandis qu'Internet Explorer reste le pire lorsqu'il s'agit de rendre correctement les feuilles de style paramétrées suivant les règles du W3C.

Devant les difficultés rencontrées lors de l'implémentation 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.

source : wikipedia