 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
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-the-
sky.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...
|
