août 23 2008

Les Styles Sheets Alternatifs en Dynamique

Catégorie : CSS — Julien - 13:42

Qu’est ce que les styles sheets alternatifs ?

Pour commencer, il faut savoir que votre navigateur a été conçu afin de pouvoir afficher des sites sous différentes formes styles. Si et seulement si, l’integrateur du site a prévu cette fonctionnalité.

Vous pouvez changer de style via le menu “Affichage > Style de la page” (i.e. sous Firefox)

VOIR UN EXEMPLE

Pourquoi dynamiques ?

C’est très simple, vous connaissez toutes et tous un site ou vous pouvez changer le “design” du site sans le recharger complétement ? Et bien cette petite prouesse technologique nous est possible grâce à JavaScript.

Ainsi, vous remplacez simplement l’action du menu d’affichage de votre fureteur par du JavaScript beaucoup plus (?) convivalement.

Introduction

Pour le mettre en place, vous devez créer un document comme ceci:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <script type="text/javascript" src="js/jquery.js"></script>
  6.     <script type="text/javascript" src="js/ssad.js"></script>
  7.     <link rel="stylesheet" title="style1" href="css/premier.css">
  8.     <link rel="alternate stylesheet" title="style2" href="css/second.css">
  9.     <link rel="alternate stylesheet" title="style3" href="css/troisieme.css">
  10.     <link rel="alternate stylesheet" title="style4" href="css/quatrieme.css">
  11.     <title>Titre du site</title>
  12.   </head>
  13.   <body>
  14.     <div>
  15.       <a href="#" rel="style1" class="styleSwitch">Premier</a> -
  16.       <a href="#" rel="style2" class="styleSwitch">Second</a> -
  17.       <a href="#" rel="style3" class="styleSwitch">Troisième</a> -
  18.       <a href="#" rel="style4" class="styleSwitch">Quatrième</a>
  19.     </div>
  20.     <p class="paragraphe_1">
  21.       Je suis le paragraphe un !
  22.     </p>
  23.     <p class="paragraphe_2">
  24.       Moi, je suis le paragraphe deux !
  25.     </p>
  26.     <p class="paragraphe_3">
  27.       Ben moi, je suis le paragraphe trois !
  28.     </p>
  29.   </body>
  30. </html>

Vous remarquerai que nous y avons joint quatre styles différents, deux scripts javascript (jquery et le plugin de changement de style).
La structure n’est pas très compliquée, trois paragraphes seulement ;-)

DEMONSTRATION

Tags: , , , ,