Update zu Changestyle.js

An vielen Stellen im Web ist das Skript changestyle.js im Einsatz.
Viele clientseitige Styleswitcher basieren auf dieses Skript, welches vor einiger Zeit (2. November 2001) von Paul Snowden in einem Artikel für A List Apart vorgestellt wurde.

Beispiele zum Einsatz dieses Skripts findet man auch auf einigen prämierten und bekannten Sites, wie die von Einfach-für-alle, Barrierekompass und auch bei meinem eigenen Portal.

Das Skript funktioniert recht gut.
Allerdings hat es doch ein Problem. Eines, dessen Ursache nicht so leicht ersichtlich ist und auch eher in Ausnahmefällen (zum Beispiel während der Entwicklung der Websites) vorkommt.

Um ein Style zu aktivieren, wird wie folgt vorgegangen:
(Details siehe Artikel)

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

Den Title erhält man bei einen JavaScript-Aufruf oder über einen Wert im Cookie.
Soweit so gut.

Das Problem ist jedoch eines: Was wenn der „title“ falsch ist?
Dann wird gar kein Style aktiviert. Denn das zu aktivierende Style kann nicht gefunden
werden. Die Website präsentiert sich in dem Fall also in seiner schönen spartanischen Form.

Was dem Skript also fehlt, ist eine Ausweichroutine.
Am Besten sogar eine zweistufige. (Default-Design oder dann das Erstbeste).

Ohne jetzt mal auf Codeoptimierung und Effizienz zu achten, hab ich obigen Code nun wie folgt ergänzt:

function setActiveStyleSheet(title) {
  var i, a, main;
  var old = getActiveStyleSheet();
  var setcookie = false;
  var found=0;
  var founddef=0;

  if (! title) {
     title = "Default";
  }
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
     if(a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
	  if (a.getAttribute("title") == "Default") {
	      founddef = 1;
	  }
      if(a.getAttribute("title") == title) {
    	 a.disabled = false;
         found = 1;
	 setcookie = cookieManager.setCookie("style", title, 365);
      }
    }
  }
  if (found==0) {
     if (founddef ==1) {
       for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
         if(a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
           a.disabled = true;
           if(a.getAttribute("title") == "Default") {
             title="Default";
             a.disabled = false;
             setcookie = cookieManager.setCookie("style", title, 365);
           }
         }
	 return;
       }
     }

      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
         if(a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
              a.disabled = false;
	      title = a.getAttribute("title");
	      setcookie = cookieManager.setCookie("style", title, 365);
	      return;
        }
    }
    return;
  }
}

Was passiert?
Es wird zunächst festgehalten, ob ein Style überhaupt gesetzt wurde.
Nebenbei wird auch geschaut, ob es ein default-Designs gibt, welches den Titel „Default“ trägt.
Wenn kein Design gesetzt wurde, wird -sofern vorhanden- das Default-Style aktiviert;
Wenn auch dieses nicht vorhanden ist, dann wird eben das erste Design aus der Liste der
mit <link rel="stylesheet" title=""> definierten Styles genommen.
Zudem wird bei beiden Fällen das Cookie aktualisiert.

Wann braucht man dies eigentlich?
Im Prinzip trifft das Problem ganz entschieden während der Entwicklung von Styles. Wenn man
mit vielen verschiedenen Browsern auf alle möglichen Systemen arbeitet und zwischen offiziellen Webauftritten und etwaigen Testhosts rumspringt, kann es leicht passieren, daß zum einen
mal eine CSS-Datei nicht richtig eingebunden wird, zum anderen aber daß aus der Cookieinformation Müll kommt.
Beides kann dann extrem verwirren und auf die falsche Fährte bringen (insbesondere weil die Browsercaches da ja auch gern mitmischen).

Von daher ist die obige größere Fehlerredundanz sicherlich nicht falsch.

1 Kommentar zu “Update zu Changestyle.js

Kommentarfunktion ist geschlossen.

  1. Hallo,

    gut, daß der Styleswitcher mal überarbeitet wurde. Nach 5 Jahren wurde das auch mal Zeit ;-)

    Was ich allerdings vermisse und im ganzen Web nicht gefunden habe, ist die Unterstützung von mehreren Stylesheets GLEICHZEITIG(!). Also z.B. zum einen Veränderung der Schriftgröße und Veränderung des Kontrastes. Und das ganze am besten noch mit einer PHP-Fallback Variante.
    Das wär schön :-)

    Viele Grüße von OLE