[SRC] Style switcher

Version imprimable

Voir 40 message(s) de cette discussion en une page

Je ne sais pas si un style switcher a déjà été proposé, mais je porpose le mien que je viens de créer vite fait :

http://josselin.willette.free.fr/cod...styleswitcher/

L'utilisation de Javascript et non pas d'un langage serveur pour switchter les styles permet d'éviter le rechargement de la page.

J'ai mis en place un système de cookie qui permet de retrouver le style choisi à la prochaine reconnexion (ainsi qu'au rechargement de la page étant donné que rien n'est géré côté serveur :roll:)

Code:

1
2
3
4
5
6
7
8
9
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/bleu.css" type="text/css" />
<link rel="stylesheet" href="css/rouge.css" type="text/css" />
<!--
Mettre un lien vers toutes les feuilles de style permet de les charger dans
le cache du navigateur et ainsi éviter le clignotement au changement du style.
Seule la dernière balise link sera modifiée par le Javascript, alors ne pas
mettre le main.css en dernier.
-->

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* Récupération du cookie */
var cook = getCookie("style");
 
/* Si un cookie existe on affiche la feuille de style sauvegardée dans le cookie,
   sinon on met une feuille de style par défaut (ici rouge.css) */
if(cook == undefined)
   document.getElementsByTagName('link')[document.getElementsByTagName('link').length-1].href = "css/rouge.css";
else
   document.getElementsByTagName('link')[document.getElementsByTagName('link').length-1].href = "css/" + cook + ".css";
 
function setCookie(name, value, expire){
   var timestamp = new Date(expire);
   document.cookie = name + "=" + escape(value) + "; expires=" + timestamp.toGMTString();
}
 
function getCookie(name){
    var cookies = document.cookie.split(/;/);
 
   for(var i = 0; i < cookies.length; i++){
      var mycook = cookies[i].split(/=/);
      if(mycook[0] == name)
         return unescape(mycook[1]);
   }
}
 
function styleSwitcher(css){
   document.getElementsByTagName('link')[document.getElementsByTagName('link').length-1].href = "css/" + css + ".css";
 
   /* Création du cookie */
   setCookie("style", css, (new Date(2010, 12).getTime()));
}
 
function setSelected(){
   var options = document.getElementById('style').getElementsByTagName('option');
   var n = options.length;
 
   for(var i = 0; i < n; i++){
      if(options[i].value == cook)
         options[i].selected = true;
   }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<body onload="setSelected()">
 
<div id="main">
   <h1>Mon site</h1>
&nbsp;&nbsp;&nbsp;&nbsp;
   <select onchange="styleSwitcher(this.value)" id="style">
      <option value="rouge">Rouge</option>
      <option value="bleu">Bleu</option>
   </select>
 
</div>
 
</body>

Suggestions ? Améliorations ?

Moi je suis plutot partisant de ceci :
Code:

1 2 3 4 5 6 7 .green a { /* Style pour les liens quand html est green */ } .red a { /* Style pour les liens quand html est red */ }
couplé avec
Code:

1 2 3 4 function changeStyle(color) { /* documentElement == <HTML> */ document.documentElement.className=color; }
Mais je reconnais que ton code semble de très bonne qualité !

19/07/2007, 15h51
Bisûnûrs

Ta solution implique une seule feuille de style, ce qui peut être gérable pour les petits sites qui ne proposent que deux choix de couleur, mais vite bordélique si on veut passer à 3, 4 voire 5 couleurs et encore plus un sur gros site.

Après évidemment c'est un choix de programmation comme un autre et je conçois que certains s'y retrouveront mieux avec une seule feuille de style. ^^

Ben pas du tout, je peux avoir autant de feuille de style que je veux ;)

green.css
Code:

1 2 3 4 .green body { background-color: green; background-image: greenGradient.png; }
red.css
Code:

1 2 3 4 .red body { background-color: red; background-image: redGradient.png; }

19/07/2007, 17h44
Bisûnûrs

Ah, oui, je vois ce que tu veux dire.

Tu fais comme moi au début, tu charges toutes les feuilles de style, mais ta méthode a l'avantage de ne pas modifier le lien de la dernière feuille de style et donc permet de les déclarer n'importe comment sans une rigueur définie.

J'aime bien, je regarderai ça.

Hop, voilà j'ai modifié à la manière de FremyCompany.

Ca alourdit un poil les CSS mais ça simplifie énormément le Javascript pour les néophytes.

On peut donc mettre les feuilles de style dans n'importe quel ordre (ne pas oublier de toutes les mettre pour les charger dans le cache du navigateur et ainsi améliorer le switch) :

Code:

1
2
3
<link rel="stylesheet" href="css/bleu.css" type="text/css" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/rouge.css" type="text/css" />

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* Récupération du cookie */
var cook = getCookie("style");
 
/* Si un cookie existe on affiche la feuille de style sauvegardée dans le cookie,
   sinon on met une feuille de style par défaut (ici rouge.css) */
if(cook == undefined)
   document.documentElement.className = "rouge";
else
   document.documentElement.className = cook;
 
function setCookie(name, value, expire){
   var timestamp = new Date(expire);
   document.cookie = name + "=" + escape(value) + "; expires=" + timestamp.toGMTString();
}
 
function getCookie(name){
   var cookies = document.cookie.split(/;/);
 
   for(var i = 0; i < cookies.length; i++){
      var mycook = cookies[i].split(/=/);
      if(mycook[0] == name)
         return unescape(mycook[1]);
   }
}
 
function styleSwitcher(css){
   document.documentElement.className = css;
   /* Création du cookie */
   setCookie("style", css, (new Date(2010, 12).getTime()));
}
 
function setSelected(){
   var options = document.getElementById('style').getElementsByTagName('option');
   var n = options.length;
 
   for(var i = 0; i < n; i++){
      if(options[i].value == cook)
      options[i].selected = true;
   }
}

Et donc dans le CSS on a :

rouge.css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
.rouge body{
   background:#e52c18 url(rouge/fond-rouge.gif) repeat-x;
}
 
.rouge select{
   background:#e52c18;
}
 
.rouge h1{
   color:#e52c18;
   text-align:center;
}

bleu.css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
.bleu body{
   background:#20b9e5 url(bleu/fond-bleu.gif) repeat-x;
}
 
.bleu select{
   background:#20b9e5;
}
 
.bleu h1{
   color:#20b9e5;
   text-align:center;
}

main.css

Code:

1
2
3
4
5
6
7
8
9
10
select{
   border:1px solid #a7a7a7;
   color:#fff;
   font:normal 11px verdana;
}
 
#main{
   width:600px;
   margin:0 auto;
}

04/02/2008, 16h21
troumad

Bonjour

Après un WE fort chargé, me revoilà pour parler de http://www.developpez.net/forums/sho...d.php?t=484284 .

Ma méthode est entre la dernière proposition et la première ;)

Je charge toutes les pages de style et je n'en applique qu'une. Ce que j'explique est simple sans appel à un quelconque cookie : mon but était seulement de tester un changement de style, comme on peut le faire avec le menu Affichage->style de page sous FireFox ;) mais l'implémentation de cookies est parfaitement possible.
Par contre, je vois qu'ici il y a des options[i].selected = true; alors que moi, je n'avais vu que des a.disabled = false;, ceci me semble équivalent, mais la méthode utilisée ici me semble plus facilement explicable :)

Je pense que dans un article complet, il serais bien de parler de toutes ces méthodes. Le concepteur de page choisissant celle qu'il préfèrera au final 8-)

Vous en pensez quoi ?
04/02/2008, 19h21
FremyCompany

Citation:

Envoyé par troumad

Par contre, je vois qu'ici il y a des options[i].selected = true; alors que moi, je n'avais vu que des a.disabled = false;, ceci me semble équivalent, mais la méthode utilisée ici me semble plus facilement explicable :)

Options[i].selected ne parle pas de feuille de style mais d'un SELECT ;)
04/02/2008, 22h08
troumad

Bonjour

C'est avec ça alors qu'on sélectionne le style ?

Code:

document.documentElement.className = css

Je pense qu'il faudrait un peu d'explication autour du code ! C'est ce que j'ai fait dans le mien. À mon avis, c'est important pour quelqu'un qui ne cherche pas à pomper bêtement, mais à comprendre pour adapter l'exemple à son cas.
05/02/2008, 11h22
FremyCompany

Citation:

Envoyé par troumad

Bonjour

C'est avec ça alors qu'on sélectionne le style ?

Code:

document.documentElement.className = css

Je pense qu'il faudrait un peu d'explication autour du code ! C'est ce que j'ai fait dans le mien. À mon avis, c'est important pour quelqu'un qui ne cherche pas à pomper bêtement, mais à comprendre pour adapter l'exemple à son cas.

D'où l'idée d'en faire un article ;) Mais cette fois-ci tu es dans le bon ;)

En gros, on met une classe CSS à l'élément HTML, puis on fait != stylesheets

Quand aucune classe CSS est définie (donc pas de JS)

Code:

#div1 { ... }

Classe CSS = 'red'

Code:

.red #div1 { ....}

Classe CSS = 'blue'

Code:

.blue #div1 { ....}
05/02/2008, 12h35
dingoth

sur le body, l'attribut class, sur le body >_<
05/02/2008, 15h31
troumad

Citation:

Envoyé par FremyCompany

En gros, on met une classe CSS à l'élément HTML, puis on fait != stylesheets

Donc ce n'est pas compatible avec FireFox Affichage->Style de la page ?
Alors que pour moi, c'était mon but ;)

Mais je trouve l'astuce intéressante :king: En effet, on peut ne travailler que sur certaines parties de la page !
05/02/2008, 20h38
FremyCompany

Citation:

Envoyé par dingoth

sur le body, l'attribut class, sur le body >_<

Non, documentElement, c'est HTML

Si tu en veux la preuve : http://msdn2.microsoft.com/en-us/lib...39(VS.85).aspx ;)
06/02/2008, 10h15
dingoth

Sauf que le la balise HTML ne peut pas recevoir d'attribut CLASS, d'où mon intervention.

Si tu en veux la preuve : http://w3schools.com/tags/tag_html.asp ;)

Et puis, puisque vous parlez toujours de faire au plus court :

Code:

document.body.className = ... ;

est plus court que

Code:

document.documentElement.className = ... ;
06/02/2008, 11h41
FremyCompany

Oui, mais c'est uniquement dans l'idée du validateur HTML/CSS alors... Parce que j'ai déjà essayé <html style="..."> et <html class="..."> et ca marche très bien sur tous les navigateurs ;)

De plus, mettre sur body a un gros inconvénient : tu ne peux pas écrire .rouge body { }, tu dois écrire body.rouge, alors que pour tous les autres éléments, tu devras écrire .rouge xxx {}
06/02/2008, 11h51
troumad

Citation:

Envoyé par FremyCompany

Oui, mais c'est uniquement dans l'idée du validateur HTML/CSS alors... Parce que j'ai déjà essayé <html style="..."> et <html class="..."> et ca marche très bien sur tous les navigateurs ;)

Il est vrai que si des normes existent, c'est pour être respectée...
Autant se référer à dvp.com : http://giminik.developpez.com/xhtml/
06/02/2008, 12h32
FremyCompany

Citation:

Envoyé par troumad

Il est vrai que si des normes existent, c'est pour être respectée...
Autant se référer à dvp.com : http://giminik.developpez.com/xhtml/

Je n'ai jamais été de cet avis. :aie: Même FireFox ne respecte plus les normes (si vous saviez le nombre d'extension (et contradictions parfois, même si c'est plus rare) aux normes que FireFox a déjà, vous seriez étonné. Et cela concerne tant le CSS, que l'HTML que le JavaScript. Surtout le JavaScript d'ailleurs)

Et c'est absolument pareil pour Safari, qui suit l'exemple de FireFox. Il n'y a plus qu'Opéra à s'accrocher aux standards et rien qu'à eux. Preuve étant leur ajout tardif du XMLHTTPREQUEST (ils attendaient que l'on trouve un accord au W3C sur le sujet, mais ils ont du se résigner, comme d'hab ca en reste toujours à l'état de brouillon). Conséquence : Plein de sites ne passent pas sous Opéra... Qui est le gagnant dans cette hisoire ? Vous n'allez pas me dire que c'est les utilisateurs d'Opéra :mouarf:

Une norme stupide et sans fondement (pk HTML ne pourrait-il pas être stylé ? Vous savez, il l'est pas tous les navigateurs !) ne doit pas être respectée, selon moi - surtout si elle date de plus de 11 ans.

Mais libre à vous de faire comme vous voulez :king:
06/02/2008, 14h17
troumad

Dans l'autre sens : si on fait un site compatible aux normes, on a le plus de chance d'être lu par tous.
Moi, c'est ma philosophie.
06/02/2008, 14h26
dingoth

Citation:

Envoyé par FremyCompany

Une norme stupide et sans fondement [...] ne doit pas être respectée, selon moi - surtout si elle date de plus de 11 ans.

Je te prie de ne pas dénigrer le travail de personnes qui ont réfléchi à la question, et qui ont, avec les moyens du bord de l'époque (avant la bulle internet, dois-je le rappeler), fait au mieux.

Parler d'obsolescence semble être plus juste, mais là, c'est tout simplement du dénigrement !
06/02/2008, 18h23
franculo_caoulene

D'un autre coté qu'est-ce qu'une norme? Etant donné que le W3C publie des recommandations et non des normes...

Voir 40 message(s) de cette discussion en une page