comment integrer plusieurs css ?¿?¿

Version imprimable

27/12/2005, 19h31
artotal

comment integrer plusieurs css ?¿?¿

Bonjour,
voilà, sur mon futur site j'aimerai intégrer plusieurs feuilles de style, donc un script en .js ou en php ferait l'affaire, comme je ne vaux pas réinventer la roue, j'aimerai que vous me fassiez de vos experiences réspectives et comparer à travers travaux et script se qui se fait ou est à faire.
Merci pour votre patience
PS : la page multi-css : http://creatif-web.be/port_folio/
27/12/2005, 20h12
siddh

connais tu le site http://www.csszengarden.com ?
27/12/2005, 20h38
artotal

oui je connaissait, je vais souvent voir les nouveautés, mais c'est en anglais !
Et j'aimerai une ressource [fr] de préference enfin pour l'explication, même si avec le code on comprend.
27/12/2005, 20h40
siddh

fais des recherches sur style switcher sur le forum ;)
27/12/2005, 20h53
artotal

en effet il y a des ressources !
A première vue le php est préferé, comme j'héberge mes sites, je prefere le .js pour économisez de la bande passante, surtout si c'est pas vital au fonctionnement du site, merci, j'étudie sa,
@++

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript">
 
function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}
function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}
function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
function SwitchClass(c,t) {
  // Fonction de test des classes
  function TestDbClass(val) {
    var DbClass = ['hide','block','list-item','normal','gras'];
    for (var db = 0; db < DbClass.length; db++) {
      if (val == DbClass[db]) {
        return true;
        break;
      }
    }
    return false;
  }
  // Si aucune classe, ajouter la classe voulue
  if (c == '') {
    c = t;
  }
  // Si 1 ou plusieurs classes, garder la(les) bonnes
  else {
    if (c.indexOf(' ',0) > 0) {
      var cSplit = c.split(' ');
      var cCorr = '';
      for (var s = 0; s < cSplit.length; s++) {
        if (TestDbClass(cSplit[s]) == false) {
          if (cCorr == '') {
            cCorr = cSplit[s];
          }
          else {
            cCorr = cCorr + ' ' + cSplit[s];
          }
        }
      }
      c = cCorr;
    }
    (TestDbClass(c) == true) ? c = t : c = c + ' ' + t;
  }
  return c;
}
 
window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}
window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
 
</script>
<link rel="stylesheet" type="text/css" href="style.css" title="style" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
</head>
<body>
<a href="#" name="style1" onclick="setActiveStyleSheet('style');">Style 1</a>
<a href="#" name="style2" onclick="setActiveStyleSheet('style2');">Style 2</a>
</body>
</html>

Un javascript qui crée un cookie de style ...
Ca peut toujours servir ...

27/12/2005, 21h11
artotal

Irène j'en profite, peux tu me dire "getElementsBy", je le vois un peu partout mais je ne définis pas bien se que c'est ?
Obtenir l'élément par le lien je crois ?
27/12/2005, 21h50
irenee

oui en effet , si dans ton html tu donne a un composant un id , alors cette fonction permet de récupérer cet élément et donc tu peut y faire des modifications sur cet élément via le javascript...
Mais , attention , cette fonction n'est pas compatible tous navigateurs !!!
Il me semble que Netscape ne la supporte pas .
28/12/2005, 02h32
artotal

Irenee ton code chez moi ne fonctionne pas ?
je me suis rabattus sur une solution php, mais pareil, je suis maudit !

http://giminik.developpez.com/articl...witcher/#menus
28/12/2005, 11h49
irenee

hummm c'est bizarre ... Les seules choses que tu devais faire étaient de remplacer le href des lien des feuilles de style .
Chez moi il fonctionne tres bien ...

Tu utilise quel navigateur ? As tu bloqué les cookies ?

j'utilise FF, mais sa fonctionne en php enfin j'ai encore les réglages habituels

Code:

1
2
3
4
5
6
<link rel="stylesheet" type="text/css" href="style.css" title="style" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
</head>
<body>
<a href="#" name="style1" onclick="setActiveStyleSheet('style');">Style 1</a>
<a href="#" name="style2" onclick="setActiveStyleSheet('style2');">Style 2</a>

J'ai bien remplacer mon lien

Code:

1
2
3
 
<link rel="stylesheet" type="text/css" href="mon_style_1.css" title="style" />
<link rel="alternate stylesheet" type="text/css" href="mon_style_2.css" title="style2" />

Code:

1
2
3
 
<a href="#" name="style1" onclick="setActiveStyleSheet('mon_style_1.css');">Style 1</a>
<a href="#" name="style2" onclick="setActiveStyleSheet('mon_style_2.css');">Style 2</a>