Accueil Boite à Outils Proposer plusieurs styles pour votre site

Publié le : 10 mai 2004
Imprimer Imprimer cet article

Auteur :
Alain Sichel

Alain Sichel
Proposer plusieurs styles pour votre site
Plusieurs présentations au choix pour vos pages.

Offrir au visiteur le choix entre plusieurs présentations permet une adaptation pour les personnes ayant des difficultés visuelles (gros caractères, fond noir moins éblouissant...), ou une version riche et une simplifiée, etc.

En voyant le site OpenWeb, qui est un modèle en ce qui concerne l’accessibilité [1], j’ai voulu réaliser la même chose pour le site CYES.

Pour le moment, les sites qui se préoccupent de l’accès des personnes handicapées visuelles sont encore trop peu nombreux.

Cet article donne quelques explications et les éléments de code pour ceux qui souhaitent utiliser ce système sur leur site.

Les conditions préalables

Pour pouvoir utiliser un changement de look, il faut déjà que votre site utilise une feuille de style. Cet article suppose que cet aspect est acquis. En effet, si c’est dans le code de la page que se trouvent les balises indiquant la police choisie, sa taille et sa couleur, par exemple : <font face="Arial" size="2" color="#336600">... ce système ne peut rien changer [2].

D’autre part, la technique proposée dans cet article concerne les sites en PHP. Pour les autres sites, cette méthode ne fonctionne pas, mais vous pouvez en utiliser une autre technique utilisant JavaScript expliquée dans les pages Changement de skins CSS et Alternative Style.

Mise au point des feuilles de style

Le site CYES utilise 6 feuilles de style conformes à la norme "CSS 2" [3]. Une feuille de style concerne l’impression [4] et 5 feuilles de styles alternatives pour l’affichage à l’écran permettant de consulter le site dans différentes présentations :

J’ai commencé par faire ce que conseille OpenWeb : ne pas utiliser dans les feuilles de style de police à taille fixe mais des polices à taille variable (en "em" ou "%"). En effet, une police à taille fixe ne permet pas de régler la taille des caractères si on utilise Internet Explorer sur un PC. J’en suis revenu en voyant l’affichage déplorable avec des systèmes Windows un peu anciens. J’utilise donc une police à taille fixe, mais uniquement pour la présentation par défaut.

La première des chose à faire si ce changement de présentation vous intéresse est de mettre au point plusieurs styles d’affichage écran, et de mettre chaque style dans une feuille de style externe différente.

Le choix de la présentation se fait par le menu affichage des navigateurs supportant les styles alternatifs : menu "View/Use Style" dans Netscape 7, Mozilla ou Opera 7... et depuis le formulaire "Présentation" en haut de chaque page. Voilà pour le côté internaute, mais pour que çà marche, côté code, il faut :

Informations dans le <head>

Voici un exemple de code :

<link rel="stylesheet" type="text/css" href="/modele/<?php echo (!$sitestyle)?'ecran':$sitestyle ?>.css" media="screen" title="Présentation mémorisée par cookie" />
<link rel="alternate stylesheet" type="text/css" href="/modele/ecran.css" media="screen" title="Normale" />
<link rel="alternate stylesheet" type="text/css" href="/modele/em.css" media="screen" title="Gros caractères" />
<link rel="alternate stylesheet" type="text/css" href="/modele/fondnoir.css" media="screen" title="Fond noir" />
<link rel="alternate stylesheet" type="text/css" href="/modele/fond_noir.css" media="screen" title="Fond noir Gros caractères" />
<link rel="alternate stylesheet" type="text/css" href="/modele/minimale.css" media="screen" title="Minimale" />

Ce code comprend, s’il existe, la récupération du choix de présentation mémorisé par le cookie, sinon c’est la feuille par défaut (ici : ecran.css) qui est utilisée. Il faut ensuite indiquer les différentes feuilles de style alternatives.

Un formulaire

Voilà un exemple avec un menu déroulant (on pourrait aussi bien utiliser des boutons radio) :

et voici son code :

<form action="/switcher.php" method="post" id="switcher">
<label for="set" id="presentation">Présentation&nbsp;:</label>
<select id="set" name="set">
<option value="ecran" selected="selected">Normale</option>
<option value="em">Gros caractères</option>
<option value="fondnoir">Fond noir</option>
<option value="fond_noir">Fond noir Gros caractères</option>
<option value="minimale">Minimale</option>
</select>
<input type="submit" value="Envoi" alt="Envoi" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#000000'" onmousedown="this.style.color='#ffffff'" /></form>

Vous remarquez que le formulaire renvoie au fichier switcher.php présenté ci-dessous. Les effets de style sur le bouton d’envoi ne servent qu’à faire joli.

Il est utile de ne pas mettre de Javascript réalisant l’envoi d’un choix à partir du menu déroulant, afin d’éviter de perturber les personnes handicapées qui naviguent sans souris.

Option "Affichage du style sélectionné" [5]

Pour indiquer sur chaque page la présentation choisie, il suffit d’un petit script PHP qui récupère la sélection choisie en lisant le cookie. Voilà alors le code à utiliser pour le menu déroulant :

<form action="/switcher.php" method="post" id="switcher">
<label for="set" id="presentation">Présentation&nbsp;:</label>
<?php if ($sitestyle == "em") { $em = 'selected="selected"';}
elseif ($sitestyle == "fondnoir") { $fn = 'selected="selected"';}
elseif ($sitestyle == "fond_noir") { $fg = 'selected="selected"';}
elseif ($sitestyle == "minimale") { $mi = 'selected="selected"';} ?>
<select id="set" name="set">
<option value="ecran">Normale</option>
<option value="em" <? echo $em; ?>>Gros caractères</option>
<option value="fondnoir" <? echo $fn; ?>>Fond noir</option>
<option value="fond_noir" <? echo $fg; ?>>Fond noir Gros caractères</option>
<option value="minimale" <? echo $mi; ?>>Minimale</option>
</select>
<input type="submit" value="Envoi" alt="Envoi" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#000000'" onmousedown="this.style.color='#ffffff'" /></form>

Le fichier Switcher

Ce fichier créée un cookie qui ne sert qu’à mémoriser le choix de feuille de style. Il est ici limité à un an (31536000, c’est le nombre de secondes par an = 60x60x24x365), mais on peut faire une durée plus courte si on préfère. Le choix de présentation peut très bien se faire si on n’utilise pas ce fichier (ou pour quelqu’un qui refuse les cookie), mais chaque fois qu’il change de page le visiteur retrouvera la présentation par défaut. Pour en savoir plus sur ce fichier, vous pouvez voir la page Construire le Switcher en Php. Voici le code de ce fichier, qui doit être placé à la racine du site :

<?php
setcookie('sitestyle', $set, time()+31536000,'/','www.cyes.info','0');
header("Location: $HTTP_REFERER");
?>

Il est souhaitable lorque vous créez un cookie chez votre visiteur de l’informer de ce qui se passe, voici un exemple de fichier pour cela.

Voilà, vous avez tous les éléments, si cela vous intéresse, il ne reste plus qu’à personnaliser le code présenté et à mettre en place sur votre site.

 

[1] Voir la partie de ce site sur l’accessibilité.

[2] Cette article n’est pas consacré à l’apprentissage des feuilles de style, voici quelques liens sur ce sujet :

[3] Les feuilles ont été testées à l’aide du Validateur CSS du W3C.

[4] Je ferais un autre article sur l’intérêt d’une feuille de style pour l’impression, celle-ci n’a rien à voir avec l’affichage à l’écran, le système proposé dans cet article fonctionne donc très bien si vous n’avez pas de feuille de style pour l’impression.

[5] Ce paragraphe ne faisait pas partie de l’article initial paru en mai 2004, il a été ajouté en septembre 2004.




Cliquez ici pour réagir à cet article

 Imprimer Imprimer cet article


Réactions à l'article :