Version en ligne

Tutoriel : Le sélecteur de style CSS de Chris Clark

Table des matières

Le sélecteur de style CSS de Chris Clark
La création ou modification du cookie
L'appel de la feuille de style choisie
La sélection du style
Annexe : quelques liens utiles

Le sélecteur de style CSS de Chris Clark

La création ou modification du cookie

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.

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

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 Creative Commons BY-NC.

La création ou modification du cookie

L'appel de la feuille de style choisie

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

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.

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.

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

L'appel de la feuille de style choisie

La création ou modification du cookie La sélection du style

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" />

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

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 création ou modification du cookie La sélection du style

La sélection du style

L'appel de la feuille de style choisie Annexe : quelques liens utiles

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éroulant

Le 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

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

action="http://www.mon-site.net/selecteur-style.php"

par

action="http://www.mon-site.net/votre-page-de-changement-de-style.php"

.

Méthode B : les liens

La ligne du code-type

<ahref="http://www.mon-site.net/selecteur-style.php?nouveau=valeur">Choisir le style "valeur"</a>

Explications du code des liens

Exemple : [ Choix du style visuel : normal (par défaut) | gros caractères | fond noir (fort contraste) ].

Vous pouvez bien sûr mettre une image à la place du texte du lien. Cette méthode est particulièrement adaptée à un faible nombre de styles CSS différents. Si vous en avez plus que cela, il peut être intéressant de proposer le choix du style via une liste déroulante, car une suite de liens comme celle qui précède peut être « encombrante » ou « lourde » dans la page.

Conclusion de cette troisième sous-partie

Voici les codes en entier, pour la partie <body> de vos pages :

Méthode du formulaire

<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>

Méthode des liens

<a href="http://www.mon-site.net/selecteur-style.php?nouveau=valeur">Choisir le style « valeur »</a>

L'appel de la feuille de style choisie Annexe : quelques liens utiles

Annexe : quelques liens utiles

La sélection du style

Liens du Site du Zéro

Quelques autres sélecteurs de style

En Javascript

En PHP

Autre lien

Vous voilà enfin arrivé à la fin de ce tutoriel, j'espère ne pas avoir été trop long et surtout suffisamment clair.

Bon codage CSS !

À bientôt les Zéros.


La sélection du style