Alternatrive Stylesheets

Klabautermann · Verfasst: Mi 11.02.04 15:42

Hallo,

ich war grade mit FireFox auf dieser Seite texturizer.net/thunderbird/extensions/ und entdeckte unten im Startusbar eine mir bisher unbekanntes Symbol (Kästchen mit bunten Stiften) entdeckt. Also clickte ich gleich mal drauf und erkannte, dass man damit zwischen verschiedenn CSS-Dateien wechseln kann, welche im Quelltext so definiert werden:

markieren

Quelltext

1:
2:
3:
4:
5:
6:
7:

<link rel="stylesheet" type="text/css" media="screen,projection" href="../../mozilla.org/css/style.css" />
<link rel="stylesheet" type="text/css" href="http://texturizer.net/mozilla.org/css/print.css" media="print" />
<link rel="alternate stylesheet" title="Locked Menu" media="screen,projection" href="../../mozilla.org/css/lockedmenu.css" type="text/css" />
<link rel="alternate stylesheet" title="Classic" media="screen,projection" href="../../mozilla.org/css/classic.css" type="text/css" />
<link rel="alternate stylesheet" title="Classic with Locked Menu" media="screen,projection" href="../../mozilla.org/css/classic-lockedmenu.css" type="text/css" />

<script src="../../mozilla.org/javascript/styleswitcher.js" type="text/javascript"></script>

Scheinbar spielt auch ein Java-Script mit. Das ganze scheint mir aber nur im Mozilla zu funktioneren, sehe ich das richtig?
Ist das eine Eigenentwicklung von denen, oder sichd die anderen Browser nur mit der Implementierung hinterher?

Ich finde die Funktion generell recht praktisch, aber wenn es nur für einen Browser ist, dann lohnt es sich nciht soetwas auf eigenen Seiten zu implementieren.

Gruß
Klabautermann

Ehemaliges Mitglied Erhaltene Danke: 1

Das Prinzip ist DOM-basierend. Es funktioniert auch mit dem IE, dann aber wohl ohne das Symbol in der Statusbar. Mit dem Mozilla 1.5, dem IE6 SP1 und dem Opera 7 habe ich folgendes erfolgreich hinbekommen:

Mein alternatives Stylesheet benutzt einfach Schwarz als <body>-Hintergrund und heißt "black.css". Ging am schnellsten.
Beides habe ich wie von dir gezeigt in eine Test-HTML eingebunden:
markieren

Quelltext
1:
2:

<link rel="stylesheet" type="text/css" href="norm.css">
<link rel="alternate stylesheet" type="text/css" title="Schwarz" href="black.css">
Beachte bitte, dass nur das zweite Stylesheet einen Titel (Schwarz) hat. Und du musst
markieren

Quelltext
1:

rel="alternate styleehset"
schreiben, weil es sonst sofort benutzt wird. Und das wollen wir ja nicht.

Folgende kleine JavaScript-Funktion ermittelt (mit Hilfe von DOM, ich schrieb das ja schon) alle "link"-Tags und sucht nach dem, dessen Titel du im Funktionskopf übergibst. Vorher werden alle Stylesheets, die ein "title"-Attribute haben, deaktiviert - darum bleibt das Standard-CSS (in meinem Fall "norm.css") auch immer aktiv.

Wird der Name bzw. der Titel dann gefunden, wird das Stylesheet aktiviert, auch wenn es mit "alternate stylesheet" gekennzeichnet ist.

markieren

Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:

function setStylesheet(title) {
  var i;
  var styles = document.getElementsByTagName("link");

  if(styles.length > 0) {
    for(i=0;i<styles.length;i++) {
      if(styles[i].getAttribute("rel").indexOf("style") != -1 &&
         styles[i].getAttribute("title"))
      {
        styles[i].disabled = true;

        if(styles[i].getAttribute("title") == title)
          styles[i].disabled = false;
      }
    }
  }
}

Damit man´s auch sieht, das ganze via JavaScript-Link:

markieren

Quelltext

1:	<a href="javascript:setStylesheet('Schwarz');">mach mich Schwarz!</a>

Die von dir genannte Seite ermittelt beim Laden und Beenden noch das jeweils aktuelle Stylesheet und lädt bzw. speichert es in einem Cookie für den nächsten Besuch.

Ich hoffe, das hilft dir weiter. Ich überlege gerade, ob ich mir den Spaß mache und meiner Seite eine alternative Farbgebung spendiere.

Klabautermann · Verfasst: Mi 11.02.04 18:33

Hi,

MathiasSimmack hat folgendes geschrieben:

Ich hoffe, das hilft dir weiter. Ich überlege gerade, ob ich mir den Spaß mache und meiner Seite eine alternative Farbgebung spendiere.

ja, das war schoen mal sehr informativ.

Aber wenn du das Ursprungsstyle nicht benennst, wie kannst du auf dieses zurück schalten?

Gruß
Klabautermann

Ehemaliges Mitglied Erhaltene Danke: 1

Indem du einen Leerstring übergibst:

markieren

Quelltext

1:	<a href="javascript:setStylesheet('');">zurück</a>

Ich schrieb doch, im ersten Schritt werden alle Stylesheets mit "title"-Attribut deaktiviert.

Klabautermann · Verfasst: Mi 11.02.04 18:45

MathiasSimmack hat folgendes geschrieben:

Indem du einen Leerstring übergibst:

markieren

Quelltext

1:	<a href="javascript:setStylesheet('');">zurück</a>

Ich schrieb doch, im ersten Schritt werden alle Stylesheets mit "title"-Attribut deaktiviert.

Ah jetzt ja. Danke.

Gruß
Klabautermann

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme