Proposer plusieurs feuilles de style à ses visiteurs
Par robby le mercredi 23 février 2005, 18:53 - Informatique - Lien permanent
Une fonction JavaScript autorise les anciens navigateurs à profiter des innovations des plus modernes, comme le choix de la feuille CSS.
Les sites tels CSS Zen Garden ont démontré qu'il est sinon facile, du moins possible sans trop de difficultés, de proposer aux visiteurs plusieurs mises en pages totalement différentes, en ne gardant que le strict nécessaire (le contenu) dans la page HTML (facilitant ainsi la tâche de Google).
Les navigateurs modernes, comme FireFox, sont en mesure d'afficher dans leur interface ces feuilles alternatives (alternate stylesheets), pour peu qu'elles soient décrites 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="Noir & Blanc" href="/styles/nb.css" />
<link rel="alternate stylesheet" type="text/css" media="screen"
title="Textes Grande Taille" href="/styles/bigfonts.css" />
<link rel="alternate stylesheet" type="text/css" media="screen"
title="Minimum" href="/styles/Minimum.css" />
<link rel="alternate stylesheet" type="text/css" media="screen"
title="Explosion de couleurs" href="/styles/explosions-in-thesky.css" />
De cette maniêre, Firefox les affichera dans un sous-menu spécial, "Style de la page", se trouvant dans le menu "Affichage".
Mais quid des navigateurs qui ne savent pas (encore ?) reconnaître des CSS alternatives quand elles se présentent ? Il faut alors construire un changeur de style. C'est ce qu'a conçu le développeur Paul Sowden sous la forme d'un JavaScript appelé styleswitcher.js
pour le magazine A List Apart, et qui est devenu la référence des changeurs de style en JavaScript.
Pour l'exploiter correctement, il faut d'abord l'inclure à
la page HTML :
<script type="text/javascript"
src="/blog/js/styleswitcher.js"></script>
Puis placer les appels JavaScript nécessaires (à la différence de Firefox, les navigateurs "anciens" comme IE ne listent pas ces autres CSS) :
<a href="#" onclick="setActiveStyleSheet('default');
return false;">Style par défaut</a>
<a href="#" onclick="setActiveStyleSheet('Noir & Blanc');
return false;">Noir & Blanc</a>
<a href="#" onclick="setActiveStyleSheet('Textes Grande Taille');
return false;">Textes Grande Taille</a>
<a href="#" onclick="setActiveStyleSheet('Minimum');
return false;">Minimum</a>
<a href="#" onclick="setActiveStyleSheet('Explosion de couleurs');
return false;">Explosion de couleurs/a>
Vos visiteurs sont désormais libres de choisir la mise en page qui leur convient le mieux...
Paru le 30 Novembre 2004 dans Journal Du Net Développeurs