<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css-astuces.css" type="text/css">
/* Appel la skin par défaut */
<link rel="alternate stylesheet" href="css-astuces2.css"
type="text/css" title="css-astuces2"> /* Appel
la skin 2 */
<link rel="alternate stylesheet" href="css-astuces3.css"
type="text/css" title="css-astuces3"> /* Appel
la skin 3 */
<script type="text/javascript" src="styleswitcher.js"></script>
/* programme JavaScript activant la skin choisie */
</head>
<body>
<h1>CHANGEMENT DE SKINS CSS</h1> <!-- exemple
des boites sur lesquelles s'appliquent les skins -->
<div class="menu"> <!-- exemple des boites
sur lesquelles s'appliquent les skins -->
<h2>Menu "SKINS"</h2>
<ul>
<li><a href="css-index.htm">Sommaire</a><br><br></li>
</ul>
</div>
<div class="exemple"> <!-- menu d'activation des
skins -->
<h2>Exemple</h2>
<a href="#" onclick="setActiveStyleSheet('standard');
return false;">Activer la skin "classique"</a> | <!--
activation du prog JavaScript pour rappeler la skin par défaut -->
<a href="#" onclick="setActiveStyleSheet('css-astuces2');
return false;">Activer la skin "Alternative"</a> <!--
activation du prog JavaScript pour appeler la skin 2 -->
<a href="#" onclick="setActiveStyleSheet('css-astuces3');
return false;">Activer la skin "Alternative 2"</a>
<!-- activation du prog JavaScript pour appeler la skin 3
-->
</div><!-- fin du menu d'activation des skins -->
<div class="code"> <!-- exemple des boites
sur lesquelles s'appliquent les skins -->
<h2>CODE SOURCE CSS ET HTML</h2>
</div>
<div class="commentaire"> <!-- exemple des
boites sur lesquelles s'appliquent les skins -->
<h2>COMMENTAIRES</h2>
</div>
<div class="spacer"></div> <!-- Assure le
retour à la ligne à la fin des boites float -->
</body>
</html>
COMMENTAIRES
les Skins ("peaux" en Anglais) sont des apparences et couleurs qu'on peut appliquer sur un programme, en en changeant ainsi l'apparence. On peut aussi faire des Skins pour site webs, toutes en CSS.
La réalisation est assez simple, comme le montre l'exemple ci-contre.
1/ On commence par créer plusieures feuilles de styles obligatoirement externes. Tous les exemples de ce site montrent par commodité de lecture des feuilles de styles définie en haut de la page, mais on peut parfaitement les définir en feuille externe, ce qui est beaucoup plus pratique quand on veut que la même feuille de styles s'appliquent à plusieurs pages HTML, et non à une seule. Pour un skin, le fichier CSS externe ce n'est pas une commodité, mais une obligation.
Le plus simple est de recopier la feuille de styles originale, de lui donner un nouveau nom, et d'en modifier certaines parties.
Il n'y a pas de limite au nombre de feuilles de styles (skins) qu'on peut appeler dans une même page HTML.
2/ On défini la feuille de styles par défaut par la fonction <link rel="stylesheet" href="xxxx.css" type="text/css">, ou xxxx.css est le nom de la-dite feuille de styles. C'est la feuille de styles active tant que l'utilisateur de votre site n'a pas appelé une feuille de styles alternative.
3/ On défini autant de feuilles de styles alternatives qu'on le désire par les fonctions <link rel="alternate stylesheet" href="yyyy.css" type="text/css" title="nom1">, ou yyyy.css est le nom (différent) de chaque feuille de styles.
Le title (ici "nom1") doit changer pour chaque nouvelle skin. Il est plus simple d'utiliser comme title le nom du fichier CSS (sans l'extension .css), mais ce n'est pas une obligation.
4/ On défini un programme JavaScript (JS) qui sera chargé du basculement d'une skin à une autre. Ici, il s'agit de styleswitcher.js, programme externe appelé par une fonction <script type="text/javascript" src="styleswitcher.js"></script>.
Il n'est pas nécessaire de maîtriser le JS pour utiliser les skins. Le programme styleswitcher.js n'est en effet pas à modifier. Il vous suffit de le récupérer, de le copier, de le sauvegarder sur votre site, et de l'appeler par les fonctions ici décrites : il marchera tel que.
5/ On va maintenant dans le body, et on appel chaque skin par une fonction <a href="#" onclick="setActiveStyleSheet('nom1'); return false;">Activer la skin "classique"</a>. Vous devez insérer autant d'appel (donc de lignes) que vous avez de skins.
Le href="#" doit rester en l'état, sans indiquer de lien.
Il y a deux variables (ici en italique) à changer sur chaque ligne : "nom1", qui reprend le nom de l'attribut "title" de chaque skin (voir 3/), et le libellé qui apparaitra à l'écran (ici, c'est Activer la skin "classique"). On peut aussi mettre une image.
Comme pour tout lien, vous pouvez réaliser l'habillage que vous désirez (ici, il n'y en a pas). Voir en particulier la section "boutons" de ce site.
6/ Le fichier JS fait 2 choses : il active la skin choisie, et place un cookie sur le site de votre visiteur. Dans ce cookie est indiqué le nom de la skin choisie. Conséquence : quand le visiteur reviendra, ce ne sera pas la skin par défaut qui sera chargée, mais la dernière choisie. La skin par défaut ne s'affiche que la 1er fois (quand il n'y a pas encore de cookie).
7/ Pour que le style s'applique à toutes les pages de votre site, il faut que chaque page HTML rappelle dans son <head> les différentes skin et le fichier JS. Dans l'exemple ici, il faudra donc recopier en haut de chaque page (dans le <head>) :
<link rel="stylesheet" href="css-astuces.css" type="text/css">
<link rel="alternate stylesheet" href="css-astuces2.css" type="text/css" title="css-astuces2">
<link rel="alternate stylesheet" href="css-astuces3.css" type="text/css" title="css-astuces3">
<script type="text/javascript" src="styleswitcher.js"></script>
Les liens du <body> appelant les skins ( <a href="#" onclick="setActiveStyleSheet('nom1'); return false;">bla bla</a>) ne sont par contre pas à remettre sur chaque page (sauf si vous souhaitez que votre visiteur puisse changer de skin à partir de chaque page, ce qui semble inutile).
Télécharger les 3 skins CSS : classique | alternative | alternative 2
Commentaires :
a/ Le système ne marche que si le navigateur de votre visiteur accepte le JavaScript et les cookies. A défaut, ce sera juste la skin par défaut qui s'affichera, et on ne pourra pas la changer. On peut contourner partiellement le problème et remplaçant le switcher JS par un switcher PHP, puisque celui-ci ne peut-être désactivé. Mais la question des cookies ne peut être contournée.
b/ On peut définir dans le <head> plusieurs CSS standarts. Exemple :
<link rel="stylesheet" href="xxxx.css" type="text/css">
<link rel="stylesheet" href="yyyy.css" type="text/css">
En cas de conflit entre un style de la 1er et de seconde CSS, c'est le style de la seconde qui l'emporte.
L'intérêt est de définir une CSS standart "commun.css" qui reprendra les éléments de style qui reviendront pour chaque skin (s'il y en a). Le seconde CSS standart ne comprendra que les styles "skinés", c'est à dire modifiables. Cela permet d'alléger le code CSS des différentes skins.
Jardin Zen CSS : toute la beauté des skins CSS