Entwickler-Ecke

Off Topic - Alternatrive Stylesheets


Klabautermann - Mi 11.02.04 15:42
Titel: Alternatrive Stylesheets
Hallo,

ich war grade mit FireFox auf dieser Seite http://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:


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


Delete - Mi 11.02.04 17:52
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:
  1. Mein alternatives Stylesheet benutzt einfach Schwarz als <body>-Hintergrund und heißt "black.css". Ging am schnellsten. :mrgreen:
  2. Beides habe ich wie von dir gezeigt in eine Test-HTML eingebunden:

    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

    Quelltext 
    1:
    		 
    rel="alternate styleehset"

    schreiben, weil es sonst sofort benutzt wird. Und das wollen wir ja nicht. :)
  3. 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.

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

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

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


Delete - Mi 11.02.04 18:36
Indem du einen Leerstring übergibst:

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

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


Klabautermann - Mi 11.02.04 18:45
MathiasSimmack hat folgendes geschrieben:
Indem du einen Leerstring übergibst:

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


Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2025 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!