Feuilles de style alternatives d’un site Web

Objectifs

Il peut être intéressant d’avoir plusieurs présentations d’un même site web, que ce soit pour des raisons d’accessibilité ou des raisons simplement commerciales. La présentation par défaut d’un site web, répond d’abord à des contraintes esthétiques et de charte graphique. Cependant, il peut être astucieux de proposer d’autres présentations telles que :

  • Orientées accessibilité (présentation aux couleurs plus contrastées, aux polices permettant une meilleure lisibilité)
  • Orientées faible débit (version allégée, par exemple sans image et sans Flash),

et de laisser le choix à l’utilisateur d’utiliser l’une ou l’autre de ces présentations. Il est possible d’envisager bien d’autres raisons (aspect événementiel comme fêtes de fin d’année, anniversaire,…) pour proposer des présentations différentes.

Les feuilles de style alternatives permettent de répondre à ce besoin.

Techniques de réalisation

  1. Structure de la page web :

Avant de commencer à travailler sur les feuilles de styles, il faut s’assurer que la page web est correctement structurée et que les différents blocs composant la page web sont bien identifiés et intuitivement nommés (ex : entete, piedDePage…). Les balises <div> permettent de définir ces blocs (Aide au positionnement des div  http://openweb.eu.org/articles/initiation_float).

La structure du code (html / xhtml) doit être complètement indépendante de la présentation (feuille de style css) et du média.

Il faut impérativement bannir le positionnement par tableau qui non seulement rend difficile la maintenance mais limite la créativité. Il faut également supprimer toutes les balises de présentation telles que <b>, <i>….

Il faut apporter un soin particulier à la sémantique de la page et utiliser les balises appropriées. En effet, si la sémantique est correcte, n’importe quel média sera en mesure d’interpréter correctement le contenu de la page. Sous Firefox, on peut évaluer  la sémantique de la page en supprimant tous les styles et les images via la web developper  tool bar. Si le contenu est correctement structuré et que la sémantique est correcte, l’interprétation de la page doit être facile sinon améliorable. Par exemple, il est impératif d’utiliser les balises <ul><ol> <li> quand il s’agit de liste, les balises <h1>…<h6> quand il s’agit de titre, <blockquote> pour les citations...

Plus la page sera structurée en utilisant la sémantique adaptée, plus il sera facile de diversifier la présentation en multipliant les feuilles de styles. (http://www.csszengarden.com/)

  1. Présentation de la page web :

Les feuilles de styles css se chargent de la présentation d’un site web. Avant d’aller plus en détail sur l’utilisation des feuilles de style alternatives, il est bon de rappeler qu’il existe trois types de feuilles de style :

  • Les feuilles de style persistantes : elles s’appliquent toujours (même si elles peuvent quand même dépendre d’un média). Leurs déclarations html ne possèdent pas de title et leur attribut rel vaut « stylesheet ». Ex : <link href="persistance.css" rel="stylesheet" type="text/css" />
  • Les feuilles de style dites « préférées » : elles s’appliquent par défaut. Leurs déclarations html possèdent un title et l’attribut rel vaut « stylesheet ». Ex : <link href="defaut.css" rel="stylesheet" type="text/css" title="Défaut" />
  • Les feuilles de style alternatives : elles ne s’appliquent pas automatiquement (cf. paragraphe ci-dessous). Leurs déclarations html possèdent un title et l’attribut rel vaut « alternate stylesheet ». Ex : <link href="styleAlternate.css" rel="alternate stylesheet" title="Présentation alternative" />

Quelque soit le type de feuilles de style, elles sont définies de la même façon.

Une feuille de style dite alternative ne s’applique donc pas à la page web. Pour que celle-ci s’applique, il faut explicitement la choisir par l’une des méthodes ci-dessous.

La première méthode est proposée nativement sur certains navigateurs qui permettent à l’utilisateur de sélectionner la feuille de style alternative souhaitée via un menu : Affichage>Style sur Firefox ou Afficher>Style sur Opéra. Malheureusement, cette fonctionnalité n’est pas implémentée sur les autres navigateurs.

Une autre méthode consiste à implanter dans la page un switcher de style soit à l’aide d’une combobox , soit d’un lien rechargeant la page avec le style souhaité.

Cependant, en javascript, il est possible d’aller plus loin en ne rechargeant pas la page. Le code ci-dessous montre cette possibilité :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0   Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Styles alternatifs</title>
        <link href="style1.css" rel="stylesheet" title="Défaut" />
        <link href="styleAlternate.css" rel="alternate stylesheet" title="Présentation alternative" />
        <link href="styleAlternate2.css" rel="alternate stylesheet" title="Présentation alternative 2" />
        <script>
        function changeStyle(){
            var switchStyleSelect = document.getElementById("switchStyle");
            var switchStyleSelectValue = switchStyleSelect.value;
            for (var i = 0; i<document.styleSheets.length; i++){
                var styleSheet = document.styleSheets[i];
                var index = styleSheet.href.length - switchStyleSelectValue.length;
                if   (styleSheet.href.indexOf(switchStyleSelectValue, index) >= 0){
                    styleSheet.disabled = false;
                } else {
                    styleSheet.disabled = true;
                }
            }
        }
        </script>
    </head>
    <body>
        <form>
            <select  >
                <option value="style1.css">Default</option>
                <option value="styleAlternate.css">Alternate Style</option>
                <option value="styleAlternate2.css">Alternate Style 2</option>
            </select>
        </form>
        <div>
            <span>ceci est un texte a personnaliser</span>
        </div>
    </body>
</html>

Récapitulatif :

Ci-dessous, un tableau mettant en évidence la compatibilité des différentes méthodes pour afficher des feuilles de style alternatives en fonction des navigateurs :

Méthodes FF IE Safari Opera Google Chrome
Affichage>Style X X X
Switcher avec rechargement de la page
Switcher javascript X X

Conclusion

Les feuilles de style alternatives apportent une grande souplesse à la réalisation, la maintenance et l’évolution d’un site web des lors que celui-ci a été convenablement structuré et ce de manière intuitive.

Note

Cet article traite exclusivement des feuilles de styles alternatives mais il faut garder en tête qu’il est également possible de créer des feuilles de style et des feuilles de style alternatives pour des médias différents. Il en existe 5 :

  • print (impression)
  • screen
  • tv
  • handheld (mobile)
  • speech (navigateur vocaux)

Il parait normal de vouloir des feuilles de style différentes lorsqu’on visualise une page web dans un navigateur ou lorsqu’on imprime cette dernière. En effet, lors de l’impression, il y a surement un certain nombre d’éléments comme le menu, le bandeau ou encore le pied de page qu’on ne souhaite pas imprimer. Afin d’économiser l’encre, on peut envisager de supprimer toutes images n’apportant pas d’information et toutes couleurs. Ceci peut être fait via une feuille de style importée dans la page avec le media print ainsi elle sera uniquement prise en compte lors de l’impression. De même, il est possible de vouloir une feuille de style alternative d’impression qui serait plus esthétiques c'est-à-dire en couleur et avec les images de fond.

On peut même envisager que l’utilisateur puisse définir, via userContent.css, ses propres styles (par exemple pour tenir compte de ses éventuels handicaps visuels personnels) mais ce sujet sera traité dans un prochain article.

Références :