Passer d'une stylesheet à une autre

web,stylesheet,javascript,html,xhtml

Si un site est construit en séparant strictement forme et contenu, il est possible d'en changer l'apparence très aisément. Dynamiquement. Et vous pouvez laisser le choix à l'utilisateur de passer d'un type de présentation à l'autre.

Cette possibilité est éminement pratique dans des cas qui ne sont pas rares : que l'on songe simplement par exemple à présenter un site de manière un peu plus festive à la fin de l'année et voilà une occurrence où changer de feuille de style peut s'avérer très adaptée. Autre exemple, l'idée de présenter le texte d'un site dans des tailles variées, petite, moyenne, large.

Donner du style

La manière la plus usuelle de séparer présentation et contenu est de créer des feuilles de style et de les associer aux pages d'un site. Ainsi, le site de Lato Sensu Management fait appel à une feuille de style générale avec l'instruction suivante :

    <link rel="stylesheet" type="text/css" href="/css/base.css" />

Voilà une autre possibilité de l'attribut rel, possibilité que nous avions passée sous silence lors de notre article qui lui était pourtant consacré  : La balise <link> et les moteurs de recherche.

Mais il est également possible de mentionner des feuilles de style alternatives, des feuilles de style qui sont sélectionnées par l'utilisateur directement dans son browser favori. Voyez par exemple, comment Lato Sensu Management propose ainsi 3 sortes de style :

    <link rel="stylesheet"           type="text/css" title="Polices normales" href="/css/base.css" />
    <link rel="alternate stylesheet" type="text/css" title="Petites lettres"  href="/css/small-base.css" />
    <link rel="alternate stylesheet" type="text/css" title="Grandes lettres"  href="/css/big-base.css" />

La présence de ces feuilles de style alternatives est détectée par le browser, Opera dans notre cas, et l'utilisateur peut ainsi choisir la feuille de style qu'il affectionne :

Notez que pour que cette possibilité soit activée dans votre navigateur, il faut que la feuille de style possède un attribut title !

Bien … voilà qui semble parfait. Et pourtant …

Et pourtant cela ne l'est pas. Cela ne l'est pas car le navigateur, à chaque page, proposera la feuille de style permanente par défaut, celle avec rel="stylesheet" et non celle avec rel="alternate stylesheet". À chaque page, l'utilisateur devra changer la feuille de style. Convenons-en, c'est un peu énervant.

Par ailleurs, dans certains navigateurs cette possibilité accessible par menu fait défaut : l'utilisateur se trouve a quia et parfaitement démuni.

Faire un script

Alors, pour pallier les problèmes présentés, il est utile de créer un javascript. Vous pouvez tout de suite vous rendre compte de ce que fait le script en question en vous essayant aux trois choix ci-dessous :

1. Polices normales
2. Petites lettres
3. Grandes lettres

Et voilà le script en question :

function setStylesheet( szTitle )
/*-----------------------------*/
{
    var i, oLink, main;

    /* Pour chaque <link> trouvé dans le document */
    for( i=0;(oLink = document.getElementsByTagName("link")[i] );i++ )
    {
        /* S'il y a un attribut "rel" et qu'il contient "style"
           de même qu'un attribut "title" */
        if ( ( oLink.getAttribute( "rel"   ).indexOf("style") != -1 ) &&
             ( oLink.getAttribute( "title" ) ) )
        {
            oLink.disabled = true;      /* Désactiver la feuille de style */

            /* Si c'est la feuille de style que l'on cherche */
            if ( oLink.getAttribute( "title" ) == szTitle )
            {
                oLink.disabled = false; /* Réactiver la feuille de style */
            }
        }
    }
    return true;
}

Pour invoquer la feuille de style avec les "Petites lettres", il suffit d'appeler le script de la manière suivante : setStylesheet( "Petites lettres" ).

Voilà qui nous aide donc à passer d'un style à l'autre mais pas encore à restituer le style sur chaque page du site. Pour ce faire, il faudra en passer par un cookie.

Créer un cookie

Pourquoi nous faut-il un cookie ? C'est tout simplement pour se rappeler du choix qui avait été fait la dernière fois et restituer ce choix lors de l'affichage d'une nouvelle page.

Pour une bonne information concernant les cookies, nous vous renvoyons à l'excellent site de Peter-Paul Koch : JavaScript - Cookies. Vous y trouverez de nombreuses fonctions Javascript développées par un gourou en la matière. C'est de ce site que nous avons adapté les quelques fonctions de création et de récupération de cookies.

Le code qui suit est tout ce qu'il faut, en javascript, pour créer un cookie Ce script, est une adaptation du script de Peter-Paul Koch. Plusieurs scripts sont fournis sur la page « JavaScript - Cookies » … http://www.quirksmode.org/js/cookies.html :

function createCookie( szName,szValue,iDays )
/*-----------------------------------------*/
{
    if ( iDays )
    {
        var date = new Date();
        date.setTime( date.getTime() + ( iDays * 86400000 ) );
        var szExpires = "; expires=" + date.toGMTString();
    }
    else
    {
        szExpires = "";
    }

    document.cookie = szName + "=" + szValue + szExpires + "; path=/";
    return false;
}

Pour voir la fonction JavaScript en action, voyez comment créer un cookie avec le lien ci-contre : Créer le cookie LSCookie.

Récupérer un cookie

Similairement, il va falloir créer une fonction pour connaître la valeur d'un cookie. Toujours sur l'excellent site de Peter-Paul Koch, nous avons trouvé tout ce qui nous est nécessaire. Nous en avons ensuite réalisé une petite adaptation :

function readCookie( szName )
/*-------------------------*/
{
    var szEQ     = szName + "=";
    var aCookies = document.cookie.split(';');

    for( var i=0;i < aCookies.length;i++)
    {
        var szCookie = aCookies[i];

        while ( szCookie.charAt(0) == ' ' )
        {
            szCookie = szCookie.substring( 1,szCookie.length );
        }

        if ( szCookie.indexOf( szEQ ) == 0 )
        {
            return ( szCookie.substring( szEQ.length,szCookie.length ) );
        }
    }

    return null;
}

… et voyez à présent ce que vaut le cookie LSCookie auquel, nous espérons, vous avez entré une valeur : Lire le cookie LSCookie

Équipés de ces deux nouvelles fonctions JavaScript, nous sommes maintenant préparés à sauver la feuille de style courante et à la restituer plus tard.

Restituer la bonne feuille de style

Pour restituer la feuille de style appropriée, celle choisie par l'utilisateur, il faut tout simplement créer un cookie lorsqu'on choisit une nouvelle stylesheet et rendre la même stylesheet lorsque les pages sont chargées :

<p class="sizeSwitchers">
    <span style="font-size:0.4em;"><a href="#" onclick="setStylesheet( 'Petites lettres'  );
                                                        createCookie( 'LSStylesheet','Petites lettres' ,365 );
                                                        return false;"
                                                        title="Petites lettres" >A</a></span>
    <span style="font-size:0.7em;"><a href="#" onclick="setStylesheet( 'Polices normales' );
                                                        createCookie( 'LSStylesheet','Polices normales',365 );
                                                        return false;"
                                                        title="Polices normales">A</a></span>
    <span style="font-size:1em;"  ><a href="#" onclick="setStylesheet( 'Grandes lettres'  );
                                                        createCookie( 'LSStylesheet','Grandes lettres ',365 );
                                                        return false;"
                                                        title="Grandes lettres" >A</a></span>
</p>

Maintenant, il s'agit de restituer la bonne feuille de style. Pour cela, on étudiera avec soin l'événement onload d'une page. Cet événement est déclenché lorsque la page se charge.

Dans la balise body de votre page, il suffit d'indiquer la clause onload comme dans l'exemple qui suit :

<body onload="ResetStylesheet( 'LSStylesheet' );">
    …
</body>

… et de créer une ultime fonction JavaScript : ResetStylesheet()

function ResetStylesheet( szCookie )
/*--------------------------------*/
{
    if ( szCookie == null )
    {
        szCookie = 'LSStylesheet';
    }

    szStylesheet = readCookie( szCookie );

    if ( szStylesheet )
    {
        setStylesheet( szStylesheet );
    }

}

Et voilà, vous avez maintenant tout ce qu'il vous faut pour permettre à vos utilisateurs de passer d'une feuille de style à l'autre.

Nos autres articles