Styles permanents, alternatifs et préférés : qu'est-ce que c'est ?

Quelque-soit le ou les media(s) visé, HTML4.01 définit trois modes d'application d'une feuille de style à un document :

• Une feuille de style permanente (persistent style sheet) s'appliquera dans tous les cas au document pour le ou les media(s) spécifié(s), quelques-soient les éventuelles autres feuilles de styles appliquées. Un document peut avoir un nombre quelconque de feuilles permanentes dont les styles se cumuleront entre eux ;
• Une feuille de style préférée (preferred style sheet) s'ajoutera aux feuilles permanentes pour le ou les media(s) spécifié(s) si aucun style alternatif n'a été sélectionné, ou en l'absence de style alternatif. Un style préféré est unique, mais il peut-être décomposé en plusieurs feuilles distinctes ;
• Une feuille de style alternative (alternate style sheet) peut être sélectionnée par l'utilisateur pour remplacer le style préférée pour le ou les medias spécifié(s), en s'ajoutant au style permanent et en remplaçant le style préféré. Un document peut avoir un nombre quelconque de styles alternatifs, chacun pouvant être décomposé en plusieurs feuilles distinctes.

Les styles permanents sont gérés par tous les navigateurs graphiques 4+, et constituent un atout dans une gestion efficace des styles, qu'il s'agisse :

• de gérer de manière centralisées les données valables pour l'ensemble d'un site tout en différenciant la spécificité de présentation de différentes sections ;
• de gérer de même les styles communs à plusieurs medias (voir Les types de media CSS) ;
• de gérer les styles communs à plusieurs présentations alternatives d'un même document.

Les styles alternatifs comptent parmi les dispositifs d'accessibilité dont le support est requis pour les navigateurs conformes. Ils permettent en effet de proposer des options de rendu adaptées à différents handicaps visuels : agrandissement des caractères qui ne rompt pas le layout de la page, palettes de couleurs plus contrastés que la présentation par défaut, affichage d'un contenu simplifié, etc. En conjonction avec les types de medias, ils peuvent également étendre les possibilités d'impression d'un document, ou varier sa restitution auditive. Ils peuvent donc permettre un enrichissement non négligeable de l'expérience utilisateur de votre site.

Hélas, les problèmes d'implémentation ne manquent pas. Ces styles alternatifs sont en effet actuellement ignorés par Internet Explorer (toutes plate-formes) et appliquées de manière non permanente par les autres navigateurs : l'utilisateur perd en effet la sélection d'un style alternatif lorsqu'il passe d'une page à une autre d'un même ensemble de documents, et doit donc répéter son choix pour chaque page visitée. (Notons que les navigateurs Mozilla et Firefox peuvent être complétés par une extension qui rend permanents les choix de styles alternatifs). C'est pourquoi on a vu émerger différentes solutions de style switchers qui :

• tranfère le contrôle des styles alternatifs à un script client ou un traitement côté serveur, via un formulaire inclus dans la page Web ;
• recourent à un cookie pour en assurer la permanence.

On peut citer en particulier :

• Le classique style switcher de Paul Sowden (javascript), popularisé par Jeffrey Zeldman ;
• Le tutoriel Build a PHP Switcher de Chris Clark ;
• Le discutable Body Switcher d'Andy Clarke et James Edwards (javascript), qui est incompatible avec les mécanismes standards décrits ici ;

Comme toute autre compensation côté auteur d'une insuffisance côté navigateur, ces style switchers ne devrait en fait pas avoir leur place dans le document HTML (dont ils contribuent à alourdir l'interface). A chacun de se déterminer en la matière et de faire son choix d'apporter ou non cette béquille discutable aux navigateurs actuels. Mais l'essentiel est, quelque-soit votre choix sur ce point, de ne pas recourir à une solution interdisant aux navigateurs tels Firefox et Opera d'utiliser les mécanismes normaux de styles alternatifs décrits ici : dans tous les cas, on veillera à utiliser ceux-ci en complément des styles-switchers.

Rappel : Comment lier une feuille de style CSS et un document (X)HTML ?

En dehors des styles en ligne précisés via l'attribut (X)HTML style, deux modes de liaisons principaux sont à votre disposition en HTML4.01 pour appliquer une feuille de style à votre page :

• L'élément link ;

  Sa syntaxe est :

  <link
     type="text/css"
     href="..."
     rel="..."
     title="..."
     media="...">
  

  Où :

  • type (obligatoire) : indique le type de contenu de la feuille de style. Le type normalisé pour les feuilles CSS est text/css, et doit être reproduit dans l'en-tête HTTP Content-Type du fichier CSS lui-même. Il est recommandé de répéter cette information dans le document (X)HTML grâce à un élément <META http-equiv="Content-Style-Type" content="text/css">. En l'absence de déclaration de type de contenu des éléments de style (ce qui invalide le document), un agent utilisateur est supposé utiliser le type text/css par défaut ;
  • href (obligatoire) : indique l'URL de la feuille de style ;
  • rel (obligatoire) : identifie le lien comme un lien vers une feuille de style, et différencie les styles alternatifs / non alternatifs ;
  • title (facultatif) : différencie les styles permanents / non permanents et permet de regrouper dans un même style des fichiers CSS distincts à l'aide d'un title identique pour tous les liens ;
  • media (facultatif) : indique le ou les media(s) cibles du style.

• L'élément style couplé à la règle CSS @import (ou contenant directement une feuille de style interne).

  Sa syntaxe est, avec une règle @import :

  <style
     type="text/css"
  	 media="..."
  	 title="...">
        @import url(...);
  </style>
  

  Où :

  • type joue le même rôle que précédement ;
  • title (facultatif) joue le même rôle que précédement ;
  • media (facultatif) joue le même rôle que précédement ;
  • @import url(...); permet l'importation de la feuille de style désignée par la valeur d'url. Cette pseudo-règle CSS joue donc le rôle de l'attribut href précédent.

  style ne permet donc pas de définir des styles alternatifs (en dépit de certains comportements aberrants illustrés par cet exemple dans Firefox et cet autre dans Opera et Firefox). En revanche, il peut être utilisé dans un mécanisme de style permanents et préférés, avec le renfort de l'élément link ou d'une instruction <?xml-stylesheet?> pour les styles alternatifs, comme le montre l'un des exemples ci-dessous.

Ces deux éléments sont également disponibles en XHTML1.x. Notons cependant que :

• XHTML basic (destiné aux mobiles) ne retient pas l'élément style. Celui-ci a cependant été réintroduit dans XHTML Mobile Profile à l'initiative de l'Open Mobile Alliance (OMA, ex-"WAP Forum"). Il est ainsi implémenté de fait par de nombreux navigateurs pour mobiles (Openwave, Nokia, Access NetFront) ainsi que par Opera.
• En son état actuel, le document de travail de la future spécification XHTML2.0 supprimerait cette utilisation de l'élément link au profit de l'instruction xml-stylesheet ou de l'élément style.

En effet, un document proposé en XHTML1.x ou un futur document XHTML2.0 (tous avec le type approprié (application/xhtml+xml), bénéficient d'un troisième mécanisme d'application des styles CSS : l'instruction <?xml-stylesheet?>.

Les mécanismes des attributs rel, title et media sont simplement transposés à l'instruction xml-stylesheet, selon la syntaxe suivante :

<?xml-stylesheet
   type="text/css"
   href="..."
   media="..."
   alternate="yes"
   title="..."?>

Où :

• type="text/css" et href="..." sont équivalents aux attributs de mêmes noms de l'élément HTML link. Ces attributs sont obligatoires ;
• media="..." est l'équivalent d'une valeur d'attribut media="..." de l'élément HTML link. Cet attribut est optionnel. ;
• alternate="yes" est l'équivalent d'une valeur d'attribut rel="alternate stylesheet" de l'élément HTML link. En l'absence d'attribut alternate, la valeur par défaut est no et la feuille de style est réputée préférée ou permanente selon la présence ou l'absence de valeur de l'attribut title ;
• title="..." est l'équivalent d'une valeur d'attribut title="..." de l'élément HTML link. En l'absence d'attribut title, la feuille de style est permanente.

(Note: on n'abordera pas ici la présente éventuelle et le rôle d'un attribut charset renseignant sur le jeu de caractères utilisé dans les feuilles de style concernée.)

Application aux styles permanents, préférés et alternatifs : cas simples sans medias

Concrètement, ces trois types de feuilles de styles se différencient par la combinaison de deux propriétés spécifiées de manière variable selon le mode de liaison avec le document :

• une propriété identifiant les styles comme alternatifs ou non : attribut rel="alternate stylesheet/stylesheet" (liaison faite avec l'élément HTML link) ou attribut alternate="yes/no" (liaison faite avec l'instruction XML <?xml-stylesheet?>) ;
• une propriété identifiant les styles comme permanents ou non : absence/présence d'un attribut title renseigné pour l'élément ou l'instruction de liaison.

Les combinaisons sont donc les suivantes :

• Pas d'attribut title et attribut rel="stylesheet" ou alternate="no" : feuille permanente pour le ou les media(s) spécifié(s) ;
• Attribut title="..." et attribut rel="alternate stylesheet" ou alternate="yes" : feuille alternative pour le ou les media(s) spécifié(s) ;
• Attribut title="..." et attribut rel="stylesheet" ou alternate="no" : feuille préférée pour le ou les media(s) spécifié(s) ;

Ce qui donne par exemple, dans un cas simple :

<!-- style permanent -->
<link rel="stylesheet" type="text/css" href="permanent.css">

<!-- style préféré utilisé par défaut -->
<link rel="stylesheet" type="text/css" href="default.css" title="style_1">

<!-- style alternatif -->
<link rel="alternate stylesheet" type="text/css" href="alternate.css" title="style_2">

Notons qu'en cas de feuilles de style préférées concurrentes, spécifiées à l'aide de l'élément link, avec un title identique, c'est le premier style de la série qui doit théoriquement l'emporter (Contrairement à ce qui se produit dans le cas de la cascade CSS où le dernier élément l'emporte).

L'équivalent pour un document XHTML1.x traité en tant qu'application/xhtml+xml sera :

<?xml-stylesheet type="text/css" href="permanent.css"?>
<?xml-stylesheet type="text/css" href="default.css" title="style_1"?>
<?xml-stylesheet type="text/css" href="alternate.css" alternate="yes" title="style_2"?>

Styles permanents, préférés et alternatifs par médias

Nous avons évoqué la possibilité de combiner plusieurs sources CSS différentes pour obtenir un seul style final permanent, préféré ou alternatif. C'est le second rôle dévolu à l'attribut title de l'élément ou de l'instruction de liaison de ces sources.

• Les styles permanents étant définis par l'absence d'attribut title sur leur élément ou instruction de liaison, les différentes sources permanentes seront obligatoirement combinées pour former le style permanent final du document. Une distinction peut cependant être opérée par media :

  <link rel="stylesheet" type="text/css" href="tous.css" media="all">
  <link rel="stylesheet" type="text/css" href="ecran.css" media="screen, projection">
  <link rel="stylesheet" type="text/css" href="papier.css" media="print">
  

  La feuille de style tous.css s'appliquera en permanence dans tous les medias, quelque-soit le style préféré ou alternatif éventuellement choisi par ailleurs. La feuille ecran.css s'appliquera de la même manière, mais uniquement dans les media screen et projection. Enfin, la feuille papier.css s'appliquera toujours indépendament du choix d'un éventuel style alternatif, mais uniquement à l'impression du document.

  Les liaisons ci-dessus pourraient également être obtenues à l'aide de l'élément style, avec :

  <style type="text/css" media="all">@import url(tous.css)</style>
  <style type="text/css" media="screen, projection">@import url(ecran.css)</style>
  <style type="text/css" media="print">@import url(papier.css)</style>
  

  Ou encore :

  <style type="text/css">
  @import url(tous.css) all;
  @import url(ecran.css) screen, projection;
  @import url(papier.css) print;
  </style>
  

  Ou finalement :

  <style type="text/css">
  @import url(global.css);
  </style>
  

  et dans global.css :

  @import url(tous.css) all;
  @import url(ecran.css) screen, projection;
  @import url(papier.css) print;
  

• Si votre document est en outre accompagné de 3 styles alternatifs style_1, style_2 et style_3 ceux-ci seront distingués pour chaque media ou groupe de media visé grâce à la valeur de l'attribut title :

  <!-- styles permanents -->
  <link rel="stylesheet" type="text/css" href="tous.css" media="all">
  <link rel="stylesheet" type="text/css" href="ecran.css" media="screen, projection">
  <link rel="stylesheet" type="text/css" href="papier.css" media="print">
  
  <!-- styles préféré (style_1) -->
  <link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" title="style_1">
  <link rel="stylesheet" type="text/css" href="ecran1.css" media="screen, projection" title="style_1">
  <link rel="stylesheet" type="text/css" href="papier1.css" media="print" title="style_1">
  
  <!-- styles alternatif (style_2) -->
  <link rel="alternate stylesheet" type="text/css" href="ecran2.css" media="screen, projection" title="style_2">
  <link rel="alternate stylesheet" type="text/css" href="papier2.css" media="print" title="style_2">
  
  <!-- styles alternatif (style_3) -->
  <link rel="alternate stylesheet" type="text/css" href="ecran3.css" media="screen" title="style_3">
  

  Dans cet exemple :

  • Les styles permanents s'appliqueront dans tous les cas comme décrit ci-dessus ;
  • style_1 est le style par défaut qui sera utilisé tant que l'utilisateur n'aura pas sélectionné un des autres styles alternatifs. Il se décompose en 3 feuilles. La première s'appliquera uniquement aux mobiles (et à Opera en mode SSR), la seconde uniquement à l'écran et en mode projection, et la dernière uniquement à l'impression ;
  • Si l'utilisateur sélectionne le style alternatif style_2, les styles précédents style_1 seront annulés et remplacés par les nouvelles feuilles. Notons qu'aucun style alternatif handheld n'est prévu dans style_2 : seuls les styles permanents all seront appliqués à celui-ci. Enfin, ce style_2 offre une feuille d'impression différente du style précédent ;
  • Le style alternatif style_3 ne définit une nouvelle présentation que pour l'écran : seuls les styles permanents s'appliqueront dans les autres medias.

Remarque : autres moyens de liaison et de préférence plus anecdotiques

Outre la méthode décrite ci-dessus, le style préféré peut être indiqué de trois autres manières :

• La spécification HTML4.01 mentionne également la possibilité de spécifier le style préféré par l'envoi au client d'un en-tête HTTP Default-Style, qui aura préséance sur les déclarations précédentes. Notons que l'information est perdue dès lors que le document n'est plus consulté à partir de sa source serveur originale (en cas d'enregistrement local, par exemple), et que cette information est apparemment ignorée par Internet Explorer et Opera 
• De même, la spécification mentionne la possibilité de lier les styles au document via l'entête HTTP link. Mais celui-ci, défini par le protocole HTTP/1.0, a été supprimé dans la dernière version en date de HTTP/1.1 (RFC2616) ;
• Enfin, la balise <meta http-equiv="Default-Style" content="..."> permet de même de spécifier le style préféré, et l'emportera également sur les éléments title des éléments link.

Notons enfin que la meta l'emporte sur l'en-tête HTTP en cas de concurrence.

Quelques exemples

Les pages tests suivantes illustrent l'utilisation des feuilles de styles permanentes, alternatives et préférées, ainsi que d'une feuille de style réservée au media print :

• Styles permanents, préférés, alternatifs avec l'élément link ;
• Styles permanents, préférés, alternatifs avec l'élément link et l'élément style combinés, styles externes. ;
• Styles permanents, préférés, alternatifs avec l'élément link et l'élément style combinés, styles internes. ;
• Styles permanents, préférés, alternatifs avec l'instruction xml-stylesheet ;
• Styles permanents, préférés, alternatifs avec l'en-tête HTTP1.0 link ;
• Styles permanents, préférés, alternatifs avec l'en-tête HTTP Default-Style ;
• Styles permanents, préférés, alternatifs avec la meta http-equiv="Default-Style".

Enfin, cet exemple illustre la possibilité de proposer des styles d'impression alternatifs, tels que décrits dans Plusieurs styles alternatifs pour imprimer. Sur le même principe, les styles alternatifs peuvent être déclinés pour chaque media.