Version PDF pour impression

Définition. Les logiciels qui manipulent du texte (traitement de texte, tableur, et logiciel de mise en page) utilisent les styles. Pour que le HTML ne fasse plus exception à la règle, le W3C lui a rajouté cette fonctionnalité sous forme d'un complément appelé "feuilles de style en cascade" (en anglais : "Cascading Style Sheets", d'où le sigle CSS). Il y a eu deux versions successives de ces feuilles de style, respectivement intitulées CSS1 et CSS2. L'essentiel de la typographie est défini dans CSS1, la deuxième version concernant plus particulièrement l'impression multi-support.

Application. L'implémentation des styles dans les navigateurs est loin d'être parfaite. Aucun navigateur ne met en oeuvre l'ensemble des spécifications CSS1, et les deux navigateurs ignorent complètement CSS2. De ce fait, comme le montre une étude récente, il faut être prudent dans l'utilisation des feuilles de style, du moins actuellement. Dans les pages du CERIG, nous utilisons les feuilles de style avec parcimonie.

La version 5 du navigateur de Netscape devait être publiée en 1999, et on espérait qu'elle implémenterait correctement les feuilles de style -- mais elle n'a jamais vu le jour. A l'heure où nous révisons ces lignes, la version 6.2 est disponible sur le site de Netscape France. L'éditeur explique que son navigateur se conforme aux normes en vigueur, en particulier pour les feuilles de style, mieux que celui de son rival Microsoft. En ce qui concerne la typographie, nos visiteurs jugeront par eux-mêmes. Pour chaque fonctionnalité examinée, nous avons noté le comportement des deux navigateurs, en particulier celui de leur dernière version. Mais attention ! la majorité des utilisateurs de Netscape sont restés à la version 4.75 (jugée meilleure que la première version 6), tandis que la majorité des utilisateurs d'Internet Explorer en est encore à la version 5.5.

Polices génériques. Il en existe cinq : avec ou sans empattements, à chasse fixe, fantaisie, cursive. Le texte ci-dessous illustre leur aspect. Aucun problème avec IE5 ou IE6, mais seule la version la plus récente de NS affiche correctement les polices fantaisie et cursive.

Polices spécifiques. Celles-ci peuvent être précisées par leur nom, comme en HTML, mais avec la syntaxe propre aux feuilles de style.

Téléchargement. A la différence du HTML, les feuilles de style prévoient le téléchargement de polices. Ce dernier peut même être partiel -- les seuls caractères latins, par exemple, dans une police qui comprend également des caractères cyrilliques et arabes. Les navigateurs, malheureusement, n'implémentent pas cette fonctionnalité, comme le montre l'exemple suivant.

La première ligne du texte ci-dessous fait appel à la police BangaSSK (qui n'est pas courante et ne se trouve probablement pas sur votre machine), la deuxième ligne fait appel à la police par défaut, et la troisième ligne à la police Arial, qui se trouve sur toutes les machines. Si les navigateurs implémentaient le téléchargement de police, le fichier correspondant (banga___.ttf, qui pèse 35,5 Ko), serait chargé avec la présente page web, et les deux premières lignes ci-dessous vous apparaîtraient différentes. Vous constaterez qu'il n'en est rien, quelle que soit la version de votre navigateur.

La transformation de la casse. Les feuilles de style permettent de modifier la casse d'un texte, quelle que soit sa valeur d'origine. Comme le montrent les exemples ci-dessous, on dispose de quatre possibilités :

Le style. Les navigateurs ne font pas la différence entre les valeurs "italique" et "oblique". De plus, NS 4 ne reconnaît pas la valeur "oblique".

Le corps (ou taille) des caractères. Le texte ci-dessous montre que les feuilles de style ne sont pas limitées au sept tailles standard du HTML. On notera que les tailles inférieures à 8 points sont pratiquement illisibles à l'écran.

La chasse (ou largeur) des caractères. Les feuilles de style permettent - du moins dans leurs spécifications - le réglage de la largeur des caractères. Les navigateurs n'en tiennent pas compte, comme vous pouvez le constater sur le texte ci-dessous.

La graisse (ou épaisseur) des caractères. Les feuilles de style permettent également de définir la graisse d'un caractère, c'est à dire son épaisseur. La graduation va de 100 à 900. La valeur 300 correspond au caractère normal, et la valeur 700 au caractère gras. Le texte ci-dessous montre comment les navigateurs tiennent compte des indications de graisse : sur trois niveaux (normal, gras, et très gras) pour IE, sur deux niveaux (normal ou gras) pour NS. On peut se demander pourquoi le W3C a prévu 9 degrés de graisse pour un media (l'écran du moniteur) qui ne peut pas en afficher plus de trois ; sans doute a-t-il pensé à l'impression multi-support.

La couleur des caractères. Les feuilles de style permettent de définir la couleur des caractères, mais le HTML en fait autant (avec une syntaxe différente) :

La décoration. Le HTML permet de souligner, barrer et faire clignoter du texte. Les feuilles de style ajoutent le surlignement (ainsi que la possibilité de souligner et surligner simultanément). Voici ce que l'on obtient (dans IE et dans NS6, le texte ne clignote pas) :

Le marquage. Il est possible de marquer une portion de texte avec la couleur de son choix, comme on le fait sur du papier avec un "marqueur". L'exemple ci-dessous montre le résultat obtenu :

Le masquage. Il est possible de masquer du texte, comme le montre l'exemple suivant, lequel fonctionne avec IE 5 et NS 6, mais pas avec NS 4 :

Cette procédure permet de faire en sorte qu'un mot soit présent dans une page web sans que l'internaute le voie. On peut obtenir le même résultat en HTML, en utilisant du texte de même couleur que le fond de la page. Certains concepteurs de site s'en servent pour faire du "spam indexing". Cette façon de procéder n'est pas appréciée des moteurs de recherche, qui vont jusqu'à refuser d'indexer les pages correspondantes.

L'encadrement. On peut encadrer du texte, comme devrait le montrer l'exemple ci-dessous :

En fait, on constate que cela ne marche pas dans IE 5, que NS 4 s'obstine à faire des retours à la ligne avant et après l'encadrement (malgré la présence d'une balise <nobr>), mais que IE6 et NS6 traitent l'exemple correctement.

Indice et exposant. Comme le HTML, les feuilles de style permettent de placer du texte en indice et en exposant (et de le rendre plus petit). Cela fonctionne dans IE 5 et dans NS 6, mais pas dans NS 4, comme le montre l'exemple ci-dessous :

Interlignage. L'interlignage du texte ci-dessous est réglé à l'aide d'un style. Si vous disposez d'une version relativement récente de l'un des deux navigateurs, vous observerez que l'interligne varie comme précisé. Avec une version plus ancienne (ex : une version 3 de Navigator), vous n'observerez aucune différence.

Pour pallier cette dernière difficulté, certains auteurs parsèment leur texte d'espaces définis dans une police de taille supérieure. Il faut une fameuse patience pour agir ainsi ! De plus, l'internaute peut s'étonner de voir que tous les espaces n'ont pas la même largeur. Néanmoins, voici ce que l'on obtient avec cette méthode (le chiffre entre parenthèses indique la taille de l'espace situé entre les deux derniers mots).

Le crénage. Le crénage du texte ci-dessous est réglé à l'aide d'un style. De ligne en ligne, vous devriez voir la distance entre caractères s'accroître de manière régulière. C'est bien ce que vous observerez si vous utilisez IE5 ou NS6. Avec NS4, vous ne verrez pas de différence d'une ligne à l'autre :

La distance entre les mots. IE5 et NS4 ne règlent pas la distance entre les mots, mais IE6 et NS6 la règlent, comme le montre l'exemple ci-dessous.