août 23 2008
Les Styles Sheets Alternatifs en Dynamique
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)
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:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<script type="text/javascript" src="js/jquery.js"></script>
-
<script type="text/javascript" src="js/ssad.js"></script>
-
<link rel="stylesheet" title="style1" href="css/premier.css">
-
<link rel="alternate stylesheet" title="style2" href="css/second.css">
-
<link rel="alternate stylesheet" title="style3" href="css/troisieme.css">
-
<link rel="alternate stylesheet" title="style4" href="css/quatrieme.css">
-
<title>Titre du site</title>
-
</head>
-
<a href="#" rel="style1" class="styleSwitch">Premier</a> -
-
<a href="#" rel="style2" class="styleSwitch">Second</a> -
-
<a href="#" rel="style3" class="styleSwitch">Troisième</a> -
-
<a href="#" rel="style4" class="styleSwitch">Quatrième</a>
-
</div>
-
<p class="paragraphe_1">
-
Je suis le paragraphe un !
-
</p>
-
<p class="paragraphe_2">
-
Moi, je suis le paragraphe deux !
-
</p>
-
<p class="paragraphe_3">
-
Ben moi, je suis le paragraphe trois !
-
</p>
-
</body>
-
</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 
août 28th, 2008 at 15:24
Hello,
Je viens de découvrir ton blog (Thanks Press Citron :p), et je suis heureux de trouver un blog accès PHP
Encore un RSS à suivre
Bonne continuation !
août 28th, 2008 at 17:36
Avec plaisir !