12# Premiers pas avec les CSS

Sur cette page :

Premiers pas avec les CSS

12.1# Introduction

Le terme CSS est l’abréviation de Cascade StyleSheet. On les appelle aussi Feuilles de style. Le langage CSS 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.

Les CSS sont apparus officiellement en décembre 1996. La norme actuelle, les CSS2 sont apparus en mai 1998. Le W3C travaille actuellement sur CSS3.

Les CSS définissent le formatage du texte (couleur, police, alignement de texte, taille), la position des blocs, leurs éventuelles marges et bordures mais aussi le formatage non visuel, comme la vitesse à laquelle le document doit être lu par des lecteurs d’écran.

Il peuvent être directement inclus dans le code HTML, mais il est beaucoup plus intéressant de les placer dans un fichier séparé (qui portera par défaut l’extension .css). De cette manière le fichier de style ne sera chargé qu’une seule fois par le visiteur, ce qui permet une économie de bande passante, et un fichier HTML plus clair.

Les feuilles de styles permettent de séparer le contenu de la page et sa présentation, le code étant découpé, la conception de la page HTML est plus simple, l’aspect de la page peut être géré une seule fois pour toutes les pages, le code est finalement plus simple à écrire et à comprendre.

Les feuilles de styles sont dites en cascade car elles introduisent un mécanisme d’héritage et de concurrence entre plusieurs règles pour définir le style final d’un élément, il est donc possible de combiner plusieurs règles, éventuellement définies dans différents fichiers.

12.2# Trois versions et leur implémentation

Le processus de développement d’une norme s’effectue en plusieurs étapes. Grosso-modo, le débat et les recherches sont lancées, des spécifications sont rédigées, modifiées, validées, puis publiées. Normalement, les rédacteurs des spécifications travaillent avec les éditeurs de logiciels pour s’assurer que, d’une part, les normes puissent être implémentées (c’est à dire que les navigateurs aient les moyen de développer le moteur de rendu de la page web) et d’autre part, que les éditeurs suivent les recommandations.

Mais nous ne sommes pas dans un monde idéal : les CSS souffrent de problèmes d’implémentation, et peut-être aussi d’un défaut d’organisation dans le groupe de travail rédigeant les spécifications (disons peut-être, le débat à ce sujet est assez actif).

Ainsi, il existe trois spécifications. CSS1 s’est avérée incomplète : la majorité des outils étaient consacrés à l’aspect typographique, et les intégrateurs ont décidé d’utiliser les tableaux pour gérer la mise en page. Les CSS2 sont une mise à jour qui voulait faire disparaitre les mauvaises pratiques apparues avec les CSS1, et couvrir énormément de besoins. Cet éparpillement a donné naissance à une norme difficile à implémenter, et donc impossible à utiliser dans sa totalité par les navigateurs. Le W3C a donc publié une révision, appelée couramment CSS2.1 qui supprime certaines propriétés obsolètes et s’adapte au fait que de nombreux intégrateurs ont détourné les fonctionnement normal de certains points de la spécification.

Aujourd’hui, les développeurs attendent beaucoup des CSS3, qui sont en cours de rédaction et dont certaines propriétés sont disponibles dans certains navigateurs, principalement pour pouvoir effectuer des tests.

Vous verrez donc au fil des pages de ce cours qu’il faut souvent jongler entre les différentes manières dont les navigateurs implémentent les CSS. C’est pourquoi j’indiquerais, pour la plupart des notions, les versions les supportant et si des problèmes se posent. J’utiliserais donc les icônes suivantes pour pouvoir lire ces informations en un coup d’œil :

Mozilla Firefox, les tests sont effectués avec Firefox 3.0 (et suivants).
Microsoft Internet Explorer, les tests sont effectués avec les versions 6, 7 et 8 (et suivants),
Apple Safari, les tests sont effectués avec Safari 3 (et suivants),
Opera, les tests sont effectués avec Opera 9.6 (et suivants),
Google Chrome, les tests sont effectués avec Chrome 1 (et suivants),
Netscape Navigator, ce navigateur étant très peu utilisé aujourd’hui, les tests n’ont pas été effectués avec cette famille de navigateurs.

Le moteur interne de Google Chrome et de Safari est Webkit, les différences de rendu des pages entre les deux navigateurs sont donc minimes.

Si durant l’étude d’une notion, aucune information concernant son support sur les navigateurs n’est disponible, c’est probablement que celle-ci fonctionne correctement avec les navigateurs testés.

12.3# Associer les styles à la page

Nous en avons déjà parlé, il existe plusieurs méthodes pour associer des styles à une page web. Vous pouvez utiliser la balise <style></style> ou l’élément <link />.

Il est également possible d’associer des styles directement à un élément avec l’attribut style, qui peut être utilisé avec la plupart des éléments. Cependant, cette solution n’est pas recommandée, dans la mesure où la séparation entre le contenu et la mise en forme ne s’effectue plus.

L’attribut style ne contient que des propriétés, on n’y trouve ni sélecteur, ni bloc :

<p style="color: red; text-decoration: underline;">Je suis rouge et souligné.</p>

Les balises <style> et <link /> possèdent un attribut media, qui permet d’indiquer le format de sortie pour lequel est destiné la feuille de styles.

Les valeurs de l’attribut media autorisées en CSS2.1 sont :

braille : la feuille de style est associée à des périphériques tactiles en braille,
embossed : pour une imprimante en braille,
handheld : pour des périphériques qui tiennent dans la main, souvent un petit écran de téléphone mobile,
print : destine à l’impression, le format de sortie est donc en plusieurs pages,
projection : destiné à la projection sur un vidéo-projecteur,
screen : pour un écran d’ordinateur,
speech : ces styles correspondent aux lecteurs d’écran vocaux, ce type de média remplace le type aural défini en CSS2,
tty : correspond à des médias tels que les terminaux, le texte sera affiché dans une police à pas fixe,
tv : destiné aux écrans de télévision, dont la résolution est plus faible que celle d’un écran d’ordinateur,
all : la feuille de style est associée à l’ensemble des périphériques.

Internet Explorer 6 et 7 ne supportent que les médias all, screen et print.