[JavaScript] [SRC] Style switcher

Bisûnûrs · 18/07/2007, 15h02

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

)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

FremyCompany · 18/07/2007, 16h26

Moi je suis plutot partisant de ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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é !

Bisûnûrs · 19/07/2007, 14h51

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

FremyCompany · 19/07/2007, 16h18

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

green.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

red.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Bisûnûrs · 19/07/2007, 16h44

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.

Bisûnûrs · 21/07/2007, 14h58

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

troumad · 04/02/2008, 15h21

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

Vous en pensez quoi ?

FremyCompany · 04/02/2008, 18h21

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

troumad · 04/02/2008, 21h08

Bonjour

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

FremyCompany · 05/02/2008, 10h22

Citation:

Envoyé par troumad

Bonjour

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

#div1 { ... }

Classe CSS = 'red'

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

.red #div1 { ....}

Classe CSS = 'blue'

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

.blue #div1 { ....}

dingoth · 05/02/2008, 11h35

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

troumad · 05/02/2008, 14h31

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

En effet, on peut ne travailler que sur certaines parties de la page !

FremyCompany · 05/02/2008, 19h38

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

dingoth · 06/02/2008, 09h15

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

document.body.className = ... ;

est plus court que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.documentElement.className = ... ;

FremyCompany · 06/02/2008, 10h41

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 {}

troumad · 06/02/2008, 10h51

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/

FremyCompany · 06/02/2008, 11h32

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.

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

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

troumad · 06/02/2008, 13h17

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.

dingoth · 06/02/2008, 13h26

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 !

franculo_caoulene · 06/02/2008, 17h23

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

04/02/2008, 15h21	#7
troumad Rédacteur/Modérateur Bernard SIAUD Enseignant Inscription : novembre 2003 Messages : 4 400 Détails du profil Informations personnelles : Nom : Bernard SIAUD Âge : 44 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Enseignant Secteur : Enseignement Informations forums : Inscription : novembre 2003 Messages : 4 400 Points : 4 944 Points : 4 944	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 Vous en pensez quoi ? __________________ Modérateur Mandriva Linux Amicalement VOOotre Troumad Alias Bernard SIAUD à découvrir sur http://troumad.org Mes tutoriels
	00

04/02/2008, 21h08	#9
troumad Rédacteur/Modérateur Bernard SIAUD Enseignant Inscription : novembre 2003 Messages : 4 400 Détails du profil Informations personnelles : Nom : Bernard SIAUD Âge : 44 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Enseignant Secteur : Enseignement Informations forums : Inscription : novembre 2003 Messages : 4 400 Points : 4 944 Points : 4 944	Bonjour C'est avec ça alors qu'on sélectionne le style ? Code : Sélectionner tout - Visualiser dans une fenêtre à part 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. __________________ Modérateur Mandriva Linux Amicalement VOOotre Troumad Alias Bernard SIAUD à découvrir sur http://troumad.org Mes tutoriels
	00

06/02/2008, 09h15	#14
dingoth Membre Expert Inscription : mai 2004 Messages : 1 253 Détails du profil Informations personnelles : Localisation : Belgique Informations forums : Inscription : mai 2004 Messages : 1 253 Points : 1 290 Points : 1 290	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 : Sélectionner tout - Visualiser dans une fenêtre à part document.body.className = ... ; est plus court que Code : Sélectionner tout - Visualiser dans une fenêtre à part document.documentElement.className = ... ;
	00

06/02/2008, 10h41	#15
FremyCompany Expert Confirmé Étudiant Inscription : février 2006 Messages : 2 532 Détails du profil Informations personnelles : Âge : 20 Informations professionnelles : Activité : Étudiant Informations forums : Inscription : février 2006 Messages : 2 532 Points : 2 903 Points : 2 903	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 {} __________________ Fremy Pour vos développements Web et une navigation agréable, le tout gratuit : 1) IE 8 + IE7Pro (Si vous ne connaissez pas IE7Pro, essayez !) 2) FF 3 + Web Developper Toolbar + AdBlockPlus + FireBug + GreaseMonkey
	00

06/02/2008, 13h17	#18
troumad Rédacteur/Modérateur Bernard SIAUD Enseignant Inscription : novembre 2003 Messages : 4 400 Détails du profil Informations personnelles : Nom : Bernard SIAUD Âge : 44 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Enseignant Secteur : Enseignement Informations forums : Inscription : novembre 2003 Messages : 4 400 Points : 4 944 Points : 4 944	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. __________________ Modérateur Mandriva Linux Amicalement VOOotre Troumad Alias Bernard SIAUD à découvrir sur http://troumad.org Mes tutoriels
	00

19/07/2007, 14h51	#3
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	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. ^^
	00

19/07/2007, 16h44	#5
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	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.
	00

05/02/2008, 11h35	#11
dingoth Membre Expert Inscription : mai 2004 Messages : 1 253 Détails du profil Informations personnelles : Localisation : Belgique Informations forums : Inscription : mai 2004 Messages : 1 253 Points : 1 290 Points : 1 290	sur le body, l'attribut class, sur le body >_<
	00

06/02/2008, 17h23	#20
franculo_caoulene Expert Confirmé Inscription : octobre 2003 Messages : 2 886 Détails du profil Informations forums : Inscription : octobre 2003 Messages : 2 886 Points : 2 559 Points : 2 559	D'un autre coté qu'est-ce qu'une norme? Etant donné que le W3C publie des recommandations et non des normes... __________________ Penser à la recherche et au bouton
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email