Les feuilles de style CSS au choix du visiteur

Les amateurs connaissent déjà le merveilleux ZenGarden, démontration parfaite de la puissance des feuilles de style en oeuvre.

FireFox sait permettre l’affichage de feuilles de style alternatives, appelées de la manière suivante :
<link rel="stylesheet" type="text/css" media="screen"
title="default" href="/styles/default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen"
title="style1" href="/styles/style1.css" />
<link rel="alternate stylesheet" type="text/css" media="screen"
title="style2" href="/styles/style2.css" />
<link rel="alternate stylesheet" type="text/css" media="screen"
title="style3" href="/styles/style3.css" />
<link rel="alternate stylesheet" type="text/css" media="screen"
title="style4" href="/styles/style4.css" />

De cette manière, Firefox les affichera dans un sous-menu spécial, « Style de la page », se trouvant dans le menu « Affichage ».
Ce n’est pas tres intuitif… et il faut déjà être initié pour en profiter.

Autre méthode : celle qui a été developpée et proposée en JavaScript par Paul Sowdenn sur son blog, sous la forme d’un JavaScript appelé styleswitcher.js
Pour l’exploiter correctement, il faut d’abord l’inclure à la page HTML :
<script type="text/javascript" src="styleswitcher.js"></script>
le script lui-meme (styleswitcher.js, téléchargeable ici), est à mêttre sur votre serveur à l’emplacement indiqué ci-dessus (au même niveau dans mon exemple)

Il suffit ensuite de placer les appels JavaScript nécessaires n’importe o๠dans le body:
<a href="#" onclick="setActiveStyleSheet('default');
return false;">Style par défaut</a>
<a href="#" onclick="setActiveStyleSheet('style2');
return false;">style2</a>
<a href="#" onclick="setActiveStyleSheet('style3');
return false;">style3</a>
<a href="#" onclick="setActiveStyleSheet('style4');
return false;">style4</a>
<a href="#" onclick="setActiveStyleSheet('style5');
return false;">style5/a>

Les visiteurs sont désormais libres de choisir leur charte graphique