Le sélecteur de style CSS de Chris Clark

Introduction du cours

Bonjour à toutes et à tous.

Je propose ici un tutoriel dans lequel vous apprendrez à mettre en place un style-switcher sur votre site.
Je ne l'ai pas conçu moi-même, il s'agit du sélecteur de style proposé par Chris Clark dans l'article anglophone Build a PHP Switcher (13 octobre 2002).
L'avantage de ce tutoriel, c'est qu'il explique ce style-switcher en français. ^^ Il ne s'agit pas d'une traduction de l'article.

Pour rappel, les feuilles de styles alternatives sont officiellement un dispositif d'accessibilité. En proposant plusieurs styles différents aux visiteurs, on leur permet de personnaliser leur expérience de navigation (c'est-à-dire ce qu'ils ressentent) et ainsi, de la faciliter, de la rendre plus agréable.

J'explique tous les codes. Les personnes qui ne connaissent rien au PHP pourront donc tout de même comprendre un peu.

Je conseille néanmoins très fortement d'avoir des bases dans ce langage de script, notamment à propos des variables.

La lecture des explications n'est pas forcément nécessaire pour comprendre la manière de mettre en place le sélecteur sur votre site, mais je ne supporte pas de voir des lignes de code sans savoir « comment elles marchent ».

Je prends ici l'exemple d'un site (www.mon-site.net) ayant toutes ses feuilles de style hébergées à la racine, avec la syntaxe de nom suivante : nomdustyle.css.

Je m'appelle Mathias Poujol-Rost et publie ce tutoriel sous la licence .

La création ou modification du cookie

Ce sélecteur se base sur un cookie qui stocke le choix de style. Cela signifie que ce sélecteur ne peut pas fonctionner chez les internautes qui refusent les cookies. C'est l'un des rares inconvénients de ce sélecteur (un autre étant qu'il requiert un hébergement sur lequel le PHP est activé).

Dans cette sous-partie, nous allons voir le code du fichier qui crée ce cookie ou qui le modifie pour « écraser » un choix précédent. Ce code est l'unique contenu du fichier selecteur-style.php hébergé à la racine du site.

Notes d'information

Si le navigateur de l'internaute refuse les cookies, le sélecteur ne fonctionne pas. Des petits malins se disent peut-être :
« Oui, mais ce n'est pas grave, il suffit d'activer les cookies quelques secondes, de choisir son style pour créer le cookie et ensuite, il ne reste qu'à désactiver les cookies pour ne plus être embêté. :p »
Ils ont tort. Si les cookies sont désactivés, ce n'est pas seulement leur création ou modification qui est bloquée, mais aussi leur lecture. >_

Dans un but de transparence avec son lectorat, il est conseillé d'informer l'internaute sur les cookies du site.

• Dire s'il y en a ou pas, et combien.

• Dire si ceux-ci collectent des informations sur les visiteurs, et énumérer lesquelles (informations) si tel est le cas.

• Donner un nom explicite aux cookies, par exemple SousdomaineNomDomaine_NomDuCookie.

• Indiquer la durée de vie et / ou la date d'expiration de chaque cookie.

Le code du fichier selecteur-style.php<?php if (isset($_POST['nouveau']) AND $_POST['nouveau'] != NULL) {$nouveau = $_POST['nouveau'];} elseif (isset($_GET['nouveau']) AND $_GET['nouveau'] != NULL) {$nouveau = $_GET['nouveau'];} setcookie ('sousdomainenomdomaine_stylecss', //nom du cookie $nouveau, //valeur du cookie time() + 31536000, //durée de vie (31 536 000 secondes = une année) '/', //répertoire de validité par rapport à la racine 'sousdomaine.nom.domaine', //nom de domaine COMPLET dont sous-domaine '0'); // 0 = pas sécurisé header ("Location: ".$_SERVER['HTTP_REFERER']); // retour à la page précédente ?>

Ce code comporte deux instructions PHP : setcookie et header. Chacune se termine par un point-virgule.

Elles sont précédées de deux conditions. Si vous ne savez pas ce qu'est une structure conditionnelle en PHP, cela ne servirait pas à grand-chose que je vous explique ces quatre lignes, en l'état actuel de vos connaissances en PHP et de la lecture de ce tuto. En effet, ces deux conditions sont directement en lien avec la troisième sous-partie de ce tutoriel.

Ne modifiez pas ces 4 lignes de conditions, sous peine de ne pas voir votre style-switcher fonctionner du tout. Pour ne pas vous laisser sur votre faim d'explications, je vous indique juste que ces 4 lignes permettent de récupérer le choix du style.

Explications du code du fichier selecteur-style.php

L'instruction setcookie contient 6 arguments qui déterminent les conditions de validité du cookie.

• sousdomainenomdomaine_stylecss est le nom du cookie ; vous pouvez lui donner le nom que vous voulez, mais celui-ci ne doit pas contenir de caractères spéciaux tels des accents, trémas ou cédilles. En revanche, l'usage des underscores (_) est fréquent.

• $nouveau est notre variable, sa valeur (l'information) est le nom du style choisi.

• Le troisième argument, c'est la date d'expiration ; il y a plusieurs façons de la configurer :

  • time()+XXXX où XXXX est une durée en secondes ;

  • time()+(A*B*C*D) où A*B*C*D est un produit (*) dont le résultat est une durée exprimée en secondes.
    Exemple : 60*60*24*30 = 60 secondes multipliées par 60 minutes multipliées par 24 heures multipliées par 30 jours = environ un mois de durée de vie. Si vous utilisez time() +, cela veut dire que la date d'expiration est définie comme étant l'instant présent auquel on ajoute une durée de temps (XXXX ou (A*B*C*D)). La date d'expiration est donc définie par rapport à l'instant présent, on ne fait que donner une durée de vie au cookie.

• '/' est le chemin pour lequel le cookie est valide, à partir de la racine. La mention '/' indique que le cookie est valable (on dit aussi valide) pour tous les répertoires du sous-domaine. Sinon, on peut renseigner par exemple '/admin/'.

• 'sousdomaine.nom.domaine' est le sous-domaine de validité du cookie. Un cookie n'est valide que pour un et un seul sous-domaine donné. Dans le cas contraire, n'importe quel site (identifié par son sous-domaine) pourrait modifier des cookies créés par d'autres sites. Il ne faut pas indiquer de répertoire du site pour cet argument, il faut indiquer la racine sans le slash (/) final.

• '0' ou '1' indique si le cookie est transmis uniquement si la ligne est sécurisée ('1') ou non ('0'). Cet argument n'est pas obligatoire ; il vaut '0' par défaut.

Il ne faut en aucun cas changer l'ordre des arguments dans ces lignes de code. La structure est la même pour tous les cookies.

L'instruction header ("Location: ".$_SERVER['HTTP_REFERER']); indique qu'une fois le formulaire envoyé vers le fichier selecteur-style.php, celui-ci traite les informations qu'il a reçues (le nom du style via la variable $nouveau), puis effectue une redirection vers la page depuis laquelle a été envoyé le choix du style. En fait, l'internaute ne verra pas cette page selecteur-style.php, elle sert uniquement à écrire le cookie.

La variable surperglobale$_SERVER['HTTP_REFERER'],
tout comme son ancêtre $HTTP_REFERER n'a pas
forcément de valeur. (En fait, c'est le navigateur
qui éventuellement en donne une.)

Pour pallier ce problème, une solution simple existe : créer sur votre site une page dédiée au changement de style, à l'instar du Site du Zéro.
Il suffit d'inclure le code de selecteur-style.php dans une page page-de-changement-de-style.php avant le moindre code XHTML, en ayant remplacé
header ("Location: ".$_SERVER['HTTP_REFERER']);
par
header ("Location: http://www.mon-site.net/page-de-changement-de-style.php");.

Conclusion de cette première sous-partie

Voici le code pour la création d'un cookie qui durera un an, sans les commentaires (c'est plus lisible).

<?php if (isset($_POST['nouveau']) AND $_POST['nouveau'] != NULL) {$nouveau = $_POST['nouveau'];} elseif (isset($_GET['nouveau']) AND $_GET['nouveau'] != NULL) {$nouveau = $_GET['nouveau'];} setcookie ('sousdomainenomdomaine_stylecss', $nouveau, time() + 31536000, '/', 'sousdomaine.nom.domaine', '0'); header("Location: ".$_SERVER['HTTP_REFERER']); ?>

ou :

<?php if (isset($_POST['nouveau']) AND $_POST['nouveau'] != NULL) {$nouveau = $_POST['nouveau'];} elseif (isset($_GET['nouveau']) AND $_GET['nouveau'] != NULL) {$nouveau = $_GET['nouveau'];} setcookie ('sousdomainenomdomaine_stylecss', $nouveau, time() + 31536000, '/', 'sousdomaine.nom.domaine', '0'); header("Location: http://www.mon-site.net/page-de-changement-de-style.php"); ?>

(Entre ces deux codes, seule la dernière ligne varie.)

Vous venez de créer un cookie. Soit. Mais dans l'absolu, cela ne sert à rien. :euh: Voyons comment exploiter ce cookie.

L'appel de la feuille de style choisie

Poursuivons avec la ligne de code XHTML qui fait le lien vers la feuille de style.

L'ancienne ligne de code XHTML<link href="http://www.mon-site.net/nomdustyle.css" rel="stylesheet" type="text/css" media="screen" title="le style que j'ai choisi" /> Comment lire le choix stocké dans le cookie ? Code PHP

Nous remplaçons juste nomdustyle du nom de fichier CSS « entier » nomdustyle.css par un code PHP.

Ainsi, la portion de code XHTML nomdustyle.css devient :

<?php echo (!$sousdomainenomdomaine_stylecss)?'valeur-par-defaut':$sousdomainenomdomaine_stylecss ?> Explication du code PHP

• sousdomainenomdomaine_stylecss est le nom du cookie que vous venez tout juste de créer et de configurer, grâce au fichier selecteur-style.php. Il apparaît dans ce code comme une variable appelée $sousdomainenomdomaine_stylecss car c'est ici (dans ce code PHP) une variable ; mais il ne faut pas la confondre avec notre variable qui s'appelle $nouveau.

  Attention à ne pas vous emmêler les pinceaux avec les variables :

  • $sousdomainenomdomaine_stylecss est le nom d'une « nouvelle » variable, oui, mais je viens de dire que nous n'allons pas nous en occuper.

  • sousdomainenomdomaine_stylecss est le nom du cookie qui stocke le choix du style CSS de l'internaute. Vis-à-vis du cookie, ce choix représente sa valeur.

  • $nouveau est le nom de notre variable. Sa valeur est l'information portée par le cookie. Voici quelques exemples de valeurs pour le nom de fichier CSS nomdustyle.css : impressions, mobile, defaut, gros-caracteres, fond-noir. Ainsi notre variable $nouveau peut prendre l'une de ces valeurs, ou une autre (selon la nomination de vos fichiers CSS). En effet, le style n'est pas toujours le même, puisqu'on peut le changer avec le sélecteur. La valeur stockée dans le cookie peut donc changer, elle est variable et représentée par la variable $nouveau.

• valeur-par-defaut est une valeur par défaut pour notre variable $nouveau. En effet, si le cookie n'est pas encore défini (ce qui est le cas lorsqu'un internaute visite pour la première fois le site), il n'a pas encore de valeur. Il en faut pourtant une. Cette valeur est donc un des styles, par exemple celui par défaut. Vous devez donc indiquer par exemple base ou pardefaut ou default. Ce style doit être parfaitement lisible et pratique, pour ne pas obliger l'internaute à en changer.

Conclusion de cette deuxième sous-partie : la nouvelle ligne de code

Voici le code XHTML en entier, pour la partie <head> de vos pages :

<link href="http://www.mon-site.net/<?php echo (!$sousdomainenomdomaine_stylecss)?'valeur-par-defaut':$sousdomainenomdomaine_stylecss ?>.css" rel="stylesheet" type="text/css" media="screen" title="mon choix" />

Nous voici arrivés presque à la fin de ce tuto.

Si vous avez tout compris jusqu'à maintenant, c'est très bien :D et vous allez pouvoir laisser en partie reposer vos cerveaux, la partie suivante (la troisième) est la dernière et la plus facile ! Vous y découvrirez comment permettre aux visiteurs de choisir leur style.

Dans le cas contraire :( , la première chose serait de vous plonger sérieusement dans un cours de PHP. En ayant des bases, vous comprendrez plus facilement, plus vite et mieux.

La sélection du style

Nous allons tout de suite nous placer du côté de l'internaute et voir comment changer le style CSS depuis une page Web.
Il y a deux méthodes : le formulaire et les liens.

Méthode A : le menu déroulantLe code pour la liste déroulante<form method="post" action="http://www.mon-site.net/selecteur-style.php"> <p> <label for="selectiondustyle">Choisissez le style qui vous plaît et appuyez sur le bouton : </label> <select name="nouveau" id="selectiondustyle"> <option value="defaut">style normal (par défaut)</option> <option value="gros-caracteres">gros caractères</option> <option value="fond-noir">fond noir (fort contraste)</option> <option value="impressions">aperçu avant impression</option> <option value="mobile">version petits écrans</option> </select> <input type="submit" value="Choisir ce style" title="valider le choix de style" /> </p> </form> Explications du code du formulaire

• action="http://www.mon-site.net/selecteur-style.php" indique vers quelle page va être envoyée l'information du formulaire. Cette information n'est autre que le choix du style, qui est une valeur d'une variable.

• for="selectiondustyle" et id="selectiondustyle" indiquent l'étiquette appliquée à la balise <select>. En cliquant sur la phrase « Choisissez le style qui vous plaît et appuyez sur le bouton : » ou la liste « non déroulée », la liste va être « activée », on pourra la parcourir avec le clavier ! :D

• On retrouve notre variable avec la mention name="nouveau" dans la balise <select>

Ce code ne convient pas aux développeurs (développeuses) qui ont choisi d'avoir une page pour le changement de style sur leur site (donc, sans utiliser header("Location: ".$_SERVER['HTTP_REFERER']); ).

Ces personnes doivent remplacer dans le code précédent