11550 sujets

JavaScript, DOM et API Web HTML5

Script Styleswitcher, problème Title dans tag Link des CSS sous IE7

Bonjour,


Je rencontre un problème dans l'utilisation du script Styleswitcher de Paul Sowden ( http://www.alistapart.com/stories/alternate/ ). J'ai remarqué qu'alsacréations sur son site Pro utilise le même script pour changer de feuille CSS si l'utilisateur souhaite voir le site avec une taille de texte variable.

J'ai suivi l'exemple du site de Paul Sowden mais je rencontre une difficulté sous IE7.0.5730.13, alors que tout marche sous FF3. Cela fonctionne sous IE6, sous IE7.0.5730.11IS, et IE8.

Voici la page en question : devel.lauriane-formations.com

Sous IE7, le fait de donner un title dans le tag link qui appelle mon css entraîne tout simplement le non chargement du CSS, alors que title est censé en faire un "groupe" préféré.

En revanche le script fonctionne si j'enlève le title du CSS lu par défaut sous IE7, mais du coup le cookie du script ne marche pas (cookie qui sauvegarde le choix de l'utilisateur entre une feuille de style ou l'autre).

Voici mon code à l'origine :


<link rel="shortcut icon" type="image/x-icon" href="#CHEMIN{img/favicon.ico}" />
<script type="text/javascript" src="#CHEMIN{access/styleswitcher.js}"></script>

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_ie7.css}" title="petit" />
<link rel="alternate stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_ie7_big.css}" title="grand" />
<link rel="stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_print.css}" media="print" />
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_ie6.css}" title="petit" />
<link rel="alternate stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_ie6_big.css}" title="grand" />
<link rel="stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_print.css}" media="print" />
<![endif]-->

<![if !IE]>
<link rel="stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_ff.css}" title="petit" />
<link rel="alternate stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_ff_big.css}" title="grand" />
<link rel="stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_print.css}" media="print" />
<![endif]>


Et voici l'appel au script dans mes pages :


<div id="selecteur_style">
<div id="selecteur_petit">
<a href="#" onclick="setActiveStyleSheet('petit'); return false;" class="style_small" title="diminuer la taille du texte"><img border="0" width="40" height="40" src="#CHEMIN{img/selecteur_style_petit.gif}" alt="diminuer la taille du texte" /></a>
</div>
<div id="selecteur_grand">
<a href="#" onclick="setActiveStyleSheet('grand'); return false;" class="style_big" title="augmenter la taille du texte"><img border="0" width="40" height="40" src="#CHEMIN{img/selecteur_style_grand.gif}" alt="augmenter la taille du texte" /></a>
</div>
</div>


Cette version ci-dessus ne marche pas sous IE7 avec title="petit" dans l'appel du CSS. Le CSS n'est pas chargé.



En revanche une fois le code du header écrit ainsi :


<link rel="shortcut icon" type="image/x-icon" href="#CHEMIN{img/favicon.ico}" />
<script type="text/javascript" src="#CHEMIN{access/styleswitcher.js}"></script>

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_ie7.css}" />
<link rel="alternate stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_ie7_big.css}" title="grand" />
<link rel="stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_print.css}" media="print" />
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_ie6.css}" />
<link rel="alternate stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_ie6_big.css}" title="grand" />
<link rel="stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_print.css}" media="print" />
<![endif]-->

<![if !IE]>
<link rel="stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_ff.css}" title="petit" />
<link rel="alternate stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_ff_big.css}" title="grand" />
<link rel="stylesheet" type="text/css" href="#CHEMIN{css/lauriane_formations_print.css}" media="print" />
<![endif]>


Cela marche sous IE7 (suppression du title), le script peut toujours passer d'un style à l'autre, mais le cookie ne fonctionne pas, puisque le script fait un test sur le title pour le créer.

Sur le site, il vous suffit de cliquer dans la partie droite sur les icônes symbolisées par une lettre "a" et "A".

Merci d'avance pour toute aide que vous pourriez apporter !

Cordialement,

PS : ce site est en développement donc fermez les yeux sur les petits bugs par ci par là ^^
PS2 : je précise que l'attribut #CHEMIN dans les href des link css est un code de SPIP, donc pas d'erreur de ce côté.
PS3 : il semblerait que ce soit lié à la version 7.0.5730.13 d'IE car cela fonctionne sous la version 7.0.5730.11IS.
Modifié par vahadar (29 Jan 2009 - 18:07)
Pour les curieux voici le script :


// ----------------------------------------------
// StyleSwitcher functions written by Paul Sowden
//  http://www.idontsmoke.co.uk/ss/
 
// - - - - - - - - - - - - - - - - - - - - - - -
// For the details, visit ALA:
//  http://www.alistapart.com/stories/alternate/
 

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && 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;
}

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);
[/i][/i][/i][/i]
Modifié par vahadar (29 Jan 2009 - 16:05)
Sujet clos
Aller à