Style Sheet on Demand

Viele Besucher haben unterschiedliche Vorlieben. Da Style Sheets die komplette Seite formatieren können, lassen sich verschiedene Versionen der Seite bauen, aus denen der Besucher seine bevorzugte Version auswählt. Hier die JavaScript-Variante des Tricks.

Sinn macht das vor allem zur Unterscheidung zwischen Druck- und Bildschirmversion, oder mit größeren Schriften für Besucher mit Sehschwächen.

Zum Live-Demo (neues Fenster)

Die Beispiel-Datei kann drei verschiedene externe Style Sheets aufrufen. Ein kleines Javascript wählt das jeweilige Style Sheet aus. Mit dem Link wird die Datei in einem neuen Fenster aufgerufen. Mit einem Fragezeichen wird der Wert für die Style Sheet-Abfrage angehängt, den unsere JavaScript Funktion dann abfragt.

Die Links in der Datei sehen so aus (die Datei heißt linker.html):

 <a href="linker.html?1" target="_blank">Seite
neu formatieren (1)</a><br>
 <a href="linker.html?2"
target="_blank">Seite neu formatieren (1)</a><br>

<a href="linker.html?3" target="_blank">Seite neu formatieren
(1)</a><br>

Das Skript im HEAD der Datei sieht wie folgt aus:

      <script language="javascript">
 var style
= location.search;
 style = style.substr(1,2);

      if(style=="1")
{document.write('<link rel="stylesheet" type="text/css"
href="linker1.css">');}
 if(style=="2") {document.write('<link
rel="stylesheet" type="text/css" href="linker2.css">');}

if(style=="3") {document.write('<link rel="stylesheet"
type="text/css" href="linker3.css">');}
 </script>

Der Variable “style” wird mit location.search der mit dem Fragezeichen übermittelte Wert zugewiesen. Da nicht nur die Zahlen 1, 2 oder 3, sondern auch das Fragezeichen zugewiesen wird, weist die Funktion substr der Variable “style” nur das zweite Zeichen zu, das Fragezeichen wird also gelöscht. Die IF-Abfrage entscheidet anhand des Wertes der Variable “style”, welches Style Sheet nun eingebunden wird.

Weitere Beiträge:

• 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
• Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
• Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
• Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
• Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
• 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
• Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.