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...


Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius