[Plan du site] Vous êtes ici --- > Le Site du Zér0 > Les tutoriels > Non-Officiels > Site Web > PHP > Points particuliers > Lecture du tutoriel

Le sélecteur de style CSS de Chris Clark

	Auteur : rainbowspiky Créé : le 08/12/2006 20:11:36 Modifié : le 04/02/2008 22:04:21 Noter et commenter ce tutoriel Imprimer ce tutoriel

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

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 tuto, c'est qu'il explique ce style-switcher en français.

Il n'est pas 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 Creative Commons BY-NC

Sommaire du chapitre :

La création ou modification du cookie
L'appel de la feuille de style choisie
La sélection du style
Annexe : quelques liens utiles
Q.C.M.

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 avec le PHP activé).

Nous allons voir dans cette sous-partie le code du fichier qui crée ce cookie ou qui le modifie pour "écraser" un choix précédent de style. Ce code est l'unique contenu de ce 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 c'est pas grave, il suffit d'activer les cookies quelques secondes, de choisir son style pour créer le cookie et ensuite de désactiver les cookies pour ne plus être embêté.

"
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

Code : 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 il 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 différent. 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 dans l'autre cas : non sécurisée ('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).
Code : 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', $nouveau, time() + 31536000, '/', 'sousdomaine.nom.domaine', '0'); 
 
header("Location: ".$_SERVER['HTTP_REFERER']); 
?>

ou : Code : 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', $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:

Nous allons voir 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

Code : HTML

1	<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 :
Code : PHP

1	<?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 des exemples de valeurs pour le nom de fichier CSS nomdustyle.css : impressions, mobile, defaut, gros-caracteres, fond-noir. Donc notre variable "$nouveau" peut prendre l'une de ces valeurs, ou une autre (selon la nomination de vos fichiers CSS). 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, pourquoi pas celui par défaut par exemple. 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 à changer de style.

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 : Code : HTML

<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

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

Le code pour la liste déroulante

Code : HTML

<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 !
On retrouve notre variable avec la mention name="nouveau" dans la balise <select>.

Ce code ne convient pas aux développeurs(euses) 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
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

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

Explications du code des liens

? indique que la page selecteur-style.php va traiter une requête avec une ou des variables (une seule dans votre cas, "$nouveau") ;
nouveau fait référence à votre variable "$nouveau" ;
= indique quelle variable et quelle valeur pour celle-ci le code PHP du fichier selecteur-style.php va devoir traiter ;
valeur est une de nos valeurs pour"$nouveau" (impressions, mobile, defaut, gros-caracteres, fond-noir, opera). Ici, j'ai écrit "valeur" pour indiquer que c'est une valeur de notre variable, mais j'aurais très bien pu écrire à la place nouveau=defaut, comme exemple.

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

Code : HTML

<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

Code : HTML

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

Annexe : quelques liens utiles

Liens du Site Du Zér0

Introduction aux langages XHTML et CSS.
Définition de PHP.
Les cookies dans le tuto sur les variables superglobales.
Les variables.
Mettre en place le CSS.
Les formulaires.
PHP et les formulaires.
Suivi d'un design CSS sur plusieurs pages (forum).
L'autre tutoriel de sélecteur de style : "Un style switcher en PHP" par Elentar.

Quelques autres sélecteurs de style

En Javascript :

Celui de Paul SOWDEN ; site www.A List Apart.com (en anglais). Voir un exemple d'utilisation de ce sélecteur sur le site Batraciens.net "Changement de skins CSS."
Un sélecteur rétro-compatible par Daniel Ludwin sur le site www.A List Apart.com (en anglais).

En PHP :

Celui de Chris Clark (en "V.O.") sur www.A List Apart.com (en anglais).
Celui du Collectif Alsacréations sur css.Alsacréations.com.
L'article du site Giminik.Developpez.com.
L'article de Laurence Veale sur www.Site Point.com (en anglais).

Autre lien

Les cookies sur Comment ça Marche.net.

Q.C.M.

S'il y a des erreurs dans le code suivant, combien y en a-t-il ? (Les lignes sautées entre les conditions et les instructions ne sont pas des erreurs, juste utiles pour la lisibilité du code.)Code : 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 ('sous domaine stylecss', $nouveau, time() + 31536000, '/francais/', 'sousdomaine.nom.domaine/english/'); 
 
header("Location: ".$_SERVER['HTTP_REFERER']); // retour à la page précédente
?>

Dans le cadre de ce sélecteur de style, avec quels langages informatiques se fait le lien depuis toutes les pages vers la feuille de style sélectionnée ?

Voici cinq codes pour changer de style avec la méthode des liens. Lequel est correct ?

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

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

Bon codage CSS !

A bientôt les Zéros.

Auteur : rainbowspiky
Noter et commenter ce tutoriel
Imprimer ce tutoriel

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité

Le sélecteur de style CSS de Chris Clark

La création ou modification du cookie

Notes d'information

Le code du fichier selecteur-style.php

Explications du code du fichier selecteur-style.php

Conclusion de cette première sous-partie

L'appel de la feuille de style choisie

L'ancienne ligne de code XHTML

Comment lire le choix stocké dans le cookie ? Code PHP

Explication du code PHP

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

La sélection du style

Méthode A : le menu déroulant

Le code pour la liste déroulante

Explications du code du formulaire

Méthode B : les liens

La ligne du code-type

Explications du code des liens

Conclusion de cette troisième sous-partie

Méthode du formulaire

Méthode des liens

Annexe : quelques liens utiles

Liens du Site Du Zér0

Quelques autres sélecteurs de style

En Javascript :

En PHP :

Autre lien

Q.C.M.