Initiation aux feuilles de style (CSS)

Avertissement : on ne s'occupera pas de codage explicite dans cette page, mais uniquement d'aspects qualitatifs.

Un auteur doit se préoccuper de la taille de nombreux éléments dans sa page s'il tient à tout maîtriser dans sa présentation. Tout compte : largeurs et hauteurs des calques, des images, des tables, taille des marges internes et externes, taille des caractères, des espacements et des interlignages. En fait, fort peu de dimensions lui sont réellement imposées en dehors de la taille des images s'il veut montrer celles-ci dans les meilleures conditions, c.à.d. à leur taille nominale. Ces dimensions s'expriment alors en pixels. Si l'auteur tient à verrouiller toute sa présentation à partir de ses images il cherchera donc naturellement à tout exprimer en pixels. On ne doit pas trop l'encourager dans cette voie.

Cette conception est parfaitement compréhensible si on conçoit ses pages comme des œuvres d'art graphiques où les images et la typographie formeraient un ensemble indissociable. Mais la plupart d'entre nous devrions être plus modestes et comprendre que nos pages puissent passer avec différentes résolutions d'affichage et des caractères qui n'aient pas tout à fait la taille prévue à l'origine. Les visiteurs avec des problèmes de vision devraient même toujours pouvoir librement agrandir les caractères. Il est donc bon de prévoir une mise en page avec une certaine élasticité, avec des dimensions proposées qui ne soient pas forcément des dimensions imposées.

Les 6 tailles de caractère du HTML classique vont dans ce sens. La taille SIZE=3 correspond à la taille par défaut du visiteur, que celui-ci est censé avoir réglée à son goût, et les autres valeurs sont donc des valeurs relatives à ce choix du visiteur. L'auteur peut prévoir ce qui se passera si le visiteur s'écarte de la moyenne en jouant sur son bouton ou menu A+/A- (zoom) réglant la taille des caractères. Bien entendu la mise en page amoureusement léchée va en prendre un bon coup, mais l'essentiel est que le site reste lisible. Dans ce cas, à Dieu vat !

Le HTML moderne et les feuilles de style donnent beaucoup plus de liberté au concepteur des pages. Il peut choisir de se référer à la taille de police par défaut de son visiteur, et cela de plusieurs manières différentes. Mais il peut aussi choisir de figer sa mise en page en s'exprimant en pixels ou directement en centimètres ou autres unités de longueur. Selon les cas, et selon les navigateurs, il peut inhiber ou non le menu A+/A- de zoom sur les caractères et le gel de ce menu est toujours fâcheux pour les mal-voyants.

Les CSS proposent 8 unités possibles pour exprimer tailles et longueurs (sans compter les pourcentages). Une tradition venant du W3C lui-même les répartit en unités absolues et unités relatives

• Les unités absolues sont le point (pt), le pica (pc), le centimètre (cm), le millimètre (mm) et le pouce (in). Toutes ces unités sont équivalentes parce que proportionnelles entre elles (1 in = 2,54 cm = 25,4 mm = 72 pt = 6 pc). Or, d'après le texte même du W3C, ces unités ne sont utiles que si les propriétés physiques du média de sortie sont connues... et ce n'est jamais le cas pour les écrans qui nous servent généralement à surfer sur le web. En pratique, ces unités n'ont de sens que sur une impression sur papier. On devrait donc éviter de s'en servir pour les sites qui ne sont conçus que pour des écrans d'ordinateur et, notamment, on ne devrait jamais y utiliser des «points».
   
• Les unités relatives sont le «em» (em), le «ex» (ex) et le pixel (px). Ce dernier est évidemment le pixel d'écran tandis que les deux autres sont relatives à la police de référence : 1 em est égal à la taille de cette police, tandis que 1 ex est la hauteur du «x» dans cette police, c.à.d. celle d'une lettre sans jambage (le rapport em/ex dépend donc de la police utilisée).

Attention à l'expression «police de référence» pour les unités relatives. Une page HTML est constituée de différents éléments, soit juxtaposés, soit imbriqués les dans dans les autres. Chaque élément a donc un contenant immédiat, qui peut être un autre élément, ou bien, à défaut, l'ensemble de toute la page. Quand on définit un style pour un élément donné, la police de référence (pour cet élément) est la police du contenant de cet élément. Quand on a des éléments imbriqués les uns dans les autres, la police de référence peut varier d'un élément à un autre et la même indication de taille en em peut donc conduire à des tailles réelles (en pixels) différentes, comme le démontre l'exemple ci-dessous.

A titre d'exemple, ce paragraphe est écrit avec une taille de police 0.8 em. Le contenant étant la page elle-même, la police de ce paragraphe spécial est réduite de 80% par rapport au reste de la page. Ici, on a appliqué un nouveau style à une sélection de ce paragraphe, avec une autre couleur de fond, mais avec à nouveau la même taille de police 0.8em. On a donc donc une nouvelle réduction de 80% de la taille des caractères. On revient ici à la suite du paragraphe de démonstration.

C'est en ce sens qu'on parle «d'unité relative», pour dire que le résultat physique dépend du contexte.

Une dimension exprimée en pourcentage se calcule sur une grandeur de référence qui est généralement la grandeur analogue héritée de l'élément contenant. On vient d'en voir un exemple avec la police de référence d'un élément, qui est la police héritée de son contenant. Il y a de nombreuses autres grandeurs qui peuvent ainsi être héritées du contenant ; on se laissera guider par l'intuition. L'exemple ci-dessous montre comment la taille de police et la largeur s'héritent d'un élement à un autre pour servir de base à des pourcentages.

Notez que les 100% pour la largeur du grand bloc ne se comptent pas sur la largeur de la fenêtre, mais sur celle du calque qui contient notre texte.

Attention toutefois, la grandeur de référence qui sert de base aux pourcentages n'est pas toujours la grandeur héritée. Regardez l'exemple ci-dessous :

Si on ne redéfinissait pas la hauteur de ligne dans le bloc 2, on garderait le même interligne que dans le bloc 1. Cette hauteur est donc bien héritée, mais ce n'est pas elle qui sert de base au pourcentage. Vraisemblablement, toutes les grandeurs concernant le formatage du texte doivent se baser sur la taille de la police locale (c'est assez intuitif, mais ce serait tout de même à vérifier :-)

A la lecture de ce qui précède, on aura compris qu'on pouvait exprimer la taille des caractères soit par un pourcentage, soit par un nombre suivi d'une unité. Par exemple, on prendra 1.0em (ou 100%) pour retrouver la taille de police de référence, 0.83em (ou 83%) pour obtenir une taille réduite à 83%, etc...

Les feuilles de style offrent aussi deux autres possiblités dans la continuité de ce qu'on faisait en HTML classique :

Tailles prédéfinies

Le W3C préfère parler de tailles absolues, mais on a vu qu'il faisait un usage un peu flou du mot «absolu». C'est en fait la nouvelle mouture des six tailles prédéfinies du HTML classique, à part que, progrès oblige, on est passé de six à sept. Le tableau ci-dessous donne les codages anglais et leur francisation dans Dreamweaver

xx-small x-small small medium large x-large xx-large

xx-petit x-petit petit moyen grand x-grand xx-grand

Leur interprétation est laissée aux soins du navigateur du visiteur :

xx-small   x-small   small   medium   large   x-large  xx-large

Malheureusement, la taille par défaut du navigateur correspond plutôt à small («petit») pour Explorer et à medium («moyen») pour NN6 et Mozilla, ce qui veut dire qu'on risque de se décaler d'un cran dans cette hiérarchie de tailles en passant d'un navigateur à un autre. Par ailleurs, l'éventail des tailles est bien plus grand dans Explorer que dans NN6. Notre avis est qu'on s'expose à des variations trop grandes d'un visiteur à l'autre en définissant ainsi les tailles de police.

Tailles relatives

Tout comme dans le HTML classique et son codage par size="+1" ou size="-1", on peut aussi simplement demander des caractères plus grands ou plus petits que dans l'élément contenant (larger ou smaller dans le codage, «plus grand» ou «plus petit» dans les boîtes de dialogue de Dreamweaver).

A titre d'exemple, ceci est plus petit.
A titre d'exemple, ceci est plus grand.

Bien entendu, on pourra obtenir des variations plus fines de la taille en utilisant des fractions d'em ou des pourcentages, mais on n'oubliera pas qu'une taille de caractères est définie en nombre entiers, donc forcément avec des arrondis dans les divisions, et que tous les navigateurs n'ont pas la même façon de s'y prendre. On est donc difficilement à l'abri des surprises si on vise des valeurs précises en pixels pour la taille des caractères, tant qu'on ne s'est pas livré à des comparaisons entre navigateurs comme nous l'avons fait nous-même dans notre article.

L'emploi des unités absolues (point, cm, mm, pc, in) ou des pixels pour définir la taille des caractères empêche le visiteur sur IE5 ou IE6-windows de recourir au menu «taille des caractères» pour régler cette taille à son goût. C'est très fâcheux pour les mal-voyants et ça le restera tant que ces navigateurs auront la même prééminence que vers les années 2001-2002.

Ce menu reste accessible avec IE5-mac, Mozilla et sur les versions les plus récentes de Opera ou iCab (en 2002). Bien entendu, quand le visiteur augmente ainsi la taille des caractères, il a toutes les chances de ruiner les efforts de mise en page de l'auteur, mais au moins peut-il accéder aux informations contenues dans le site.

Nous venons de voir une première raison d'éviter les points. Une deuxième tient à une différence profonde entre les systèmes Windows d'un côté et MacOS ou Linux d'autre part. En principe, les points sont rendus sur un écran à raison de 1 pixel pour 1 point par ces derniers, contre 4 pixels pour 3 points dans Windows. En conséquence, les caractères rapetissent de 30% en passant de Windows à MacOS.

En réalité la plupart des navigateurs récents ont un réglage de préférence «96dpi» qui leur permet de s'aligner sur le réglage de Windows, mais encore faut-il que le visiteur sache que ce réglage existe, à quoi il correspond et qu'il l'adopte (car à l'inverse, un site conçu en points sur MacOS avec le réglage traditionnel de «72dpi» sera alors affiché sur Windows avec des polices de 30% trop grosses). :-(

Evidemment, les points retrouveront leur intérêt si votre site est avant tout destiné à être imprimé. Mais gageons que ce ne sera pas souvent le cas.

On rencontrera le plus souvent des dimensions de blocs en pourcentages ou en pixels. Les pourcentages sont très pratiques quand on se réfère aux dimensions de la fenêtre : par exemple, une largeur de 100% signifie qu'on prend la plus grande largeur possible dans la fenêtre ou dans le bloc contenant. A l'opposé, on exprimera souvent une largeur en pixels lorsque l'on veut éviter qu'un affichage s'étende trop en largeur quand l'affichage passe du 800x600 au 1024x768 ou davantage.

Mais on peut très bien exprimer une largeur en em, par exemple pour fixer (à peu près) le nombre de caractères par ligne.