Too Cool for Internet Explorer

Impressum

Immer wieder steht man beim Webdesign vor der Frage, wie man das Layout, Farben, Schriften oder Ansichten einer Seite vom Nutzer einfach und schnell ändern lassen kann. Sinnvolle Möglichkeiten sind Javascript, PHP oder die in den Browsern vorhandenen Möglichkeiten zur Anzeige alternativer Styles. Für welche man sich entscheidet liegt zum Einem an den persönlichen Vorlieben und auch daran, wen man mit der Styleänderung beglücken will.

Dem Sicherheitsfanatiker kann ich nur eine Variante empfehlen. Er gestaltet Seiten als statische HTML-Seiten und lässt CSS-Styles nur durch den Browser ändern. Diese Methode ist auch für jüngeres Publikum geeignet, da diesen die Möglichkeiten der zum IE alternativen Browser geläufig sind.

Für die Verwendung von Javascript spricht einiges. Es sind keine besonderen serverseitigen Voraussetzungen zu erfüllen und es funktioniert in den meisten Fällen gut. Nach Auswertung von Log's der letzten 2 Jahre ist aber festzustellen, dass ca. 15% der Besucher auf diesen Seiten Javascript deaktiviert haben. Ein CSS-Switcher würde nicht funktionieren.

Bleibt nur noch als serverseitiger Switcher eine Lösung in PHP. Die hat zudem den Charme, das sie völlig browserunabhängig funktioniert. Einzig die eigentlichen Stylesheets müssen die verschiedenen Browser berücksichtigen. Aber das ist ja nichts Neues. Gut, ich habe mich also mal im Netz umgeschaut und aus den vielen Codeschnipseln was gebastelt.

PHP-Styleswitcher

Grundlagen

Vernünftig gestaltete Webseiten trennen immer den Inhalt der Seite vom eigentlichen Layout. Das Layout wird durch die Formatierungssprache CSS (Cascading Stylesheets) beschrieben. Diese Beschreibungen können in eigene Dateien ausgelagert werden. Diese externen Dateien sind dann in die HTML-Datei einzubinden. Dies erfolgt durch den link - Tag im Kopf der Datei:

<head>
...
<link rel="stylesheet" type="text/css" href="/css/meinstyle.css">
<link rel="alternate stylesheet" type="text/css" href="alternate.css" title="anderes Style">
...
</head>

An dieser Stelle setzt jetzt der Styleswitcher an. Um ein anderes Style anzuzeigen, muss dem Browser nur mitgeteilt werden, welche CSS-Datei zu laden ist.
Aber woher soll der PHP-Interpreter wissen, welche CSS-Datei der Nutzer wünscht. Dafür sind Cookies, die im Browser Informationen speichern, ideal geeignet, da diese sich sogar bis zum nächsten Besuch das gewählte Style merken (wenn der Besuch nicht länger als 1 Jahr zurück liegt, der Nutzer Cookies akzeptiert und Cookies nicht regelmäßig löscht). Nun müssen nur noch die Informationen in den Keks. Das erfolgt mit Hilfe von URL-Parametern. Dann fügen wir dem Script noch ein paar Konfigurationseinstellungen hinzu und fertig ist der Teil zum Lesen und Speichern von Informationen. Wir nennen das Script style_cookie.php:

<?php
// Konfiguration des PHP-CSS-Switchers
// absoluter Pfad für die Datei style_css.php
$stylescriptpath="/softphp/phpsw/scripts/";

// StandardCSS-Dateiname ohne Endung, zur Anzeige eines festgelegten Designs bei Fehlern etc.
$standardcss="seitea";

// Konfiguration des PHP-CSS-Switchers Ende ! ab hier keine Änderungen erforderlich



if(isset($_GET['style'])) {
  
setcookie("PHPstylekeksBsp"$_GET['style'], time()+3600*365*24"/");
}
elseif(!isset(
$_GET['style'])) {
  if(isset(
$_COOKIE['PHPstylekeksBsp'])) {
    
$style $_COOKIE['PHPstylekeksBsp'];
  }
  else {
    
$style $standardcss;
  }
}
if (
$style=='') {$style $standardcss;}
?>

Diese kleine Script wird ganz an den Anfang einer HTML-Datei eingefügt. Damit ist gemeint, vor allen HTML-Tags. Dann sind nur noch die Pfadangaben anzupassen, wobei hier absolute Pfadangaben erforderlich sind (ausgehend vom ROOT-Verzeichnis):

<?php include($_SERVER['DOCUMENT_ROOT'] . '/absoluter Pfad/style_cookie.php'); ?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
...

Jetzt probieren wir die Datei mit dem Switcher aus (Dateiendung .php, sonst wird der Code ignoriert). Wie zu erwarten funktioniert nichts. Es wird zwar ein Cookie gesetzt, der aber immer den gleichen Inhalt hat. Wir erinnern uns, der Inhalt des Cookies sollte mit einem URL-Parameter gesetzt werden. Und der Inhalt sollte der Name der zu verwendenden CSS-Datei sein. Also geben wir, wenn die Datei z.Bsp. index.php heißt (!die Datei mit dem Content, nicht die CSS-Datei), folgendes in die Adresszeile ein:

http://www.meine-seite.de/content/index.php?style=seitea

Jetzt wird der Cookie mit den Werten des Parameters style gefüllt. Das ist natürlich etwas mühsam und nicht anwenderfreundlich. Als Linkliste für verschiedene Styles sieht es dann so aus:

<a href="<?php echo $_SERVER['PHP_SELF']?>?style=seitea">Style 1</a><br>
<a href="<?php echo $_SERVER['PHP_SELF']?>?style=seiteb">Style 2</a><br>

Aber selbst damit lasses sich die Styles noch nicht wechseln. Der statische link - Tag für die CSS-Dateien muss noch ersetzt werden. An die Stelle des link - Tags muss eine Templatedatei eingefügt werden, die den Inhalt des Cookies verwertet. Hier ist erst einmal die Templatedatei, die style_css.php genannt wird:

<?php
/**
 erste Zeile: Pfad zu den CSS-Dateien als absolute Pfadangabe und Dateierweiterung, z.B. href="/styles/css/<?php echo $style?>.css"
 weitere Zeilen sind optional: alternative Styles für Browser, die das unterstützen, z.B. Firefox
*/
?>
<link rel="stylesheet" type="text/css" href="/softphp/phpsw/css/<?php echo $style?>.css">
<link rel="alternate stylesheet" href="/softphp/phpsw/css/seitea.css" type="text/css" title="Style 1">
<link rel="alternate stylesheet" href="/softphp/phpsw/css/seiteb.css" type="text/css" title="Style 2">

Abschließend ist nur noch im head - Bereich der HTML-Datei folgendes einzusetzen:

<?php include($_SERVER['DOCUMENT_ROOT'] . $stylescriptpath . 'style_css.php'); ?>

Und hier nochmal eine Beispiel HTML-Datei im Zusammenhang:

<?php include($_SERVER['DOCUMENT_ROOT'] . '/absoluter Pfad/style_cookie.php'); ?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<?php include($_SERVER['DOCUMENT_ROOT'] . $stylescriptpath 'style_css.php'); ?>

</head>
<body>

  <div id="navigation">
    ................
  </div>

  <div id="content">
    <p>Lorem ipsum ......</p>
    <p>Posse homero .....</p>
  </div>

  <div id="styleswitch">
  <p>Ändern sie hier per Klick das Aussehen der Website:<br>
    <a href="<?php echo $_SERVER['PHP_SELF']?>?style=seitea">Style 1</a><br>
    <a href="<?php echo $_SERVER['PHP_SELF']?>?style=seiteb">Style 2</a><br>
  </p>
  </div>

</body>
</html>

Zusammenfassung

Wir benötigen einen Web-Server mit PHP-Fähigkeiten. Die beiden Dateien style_cookie.php und style_css.php, eine endliche Anzahl verschiedener Styles, die in CSS-Dateien abgelegt sind und ein wenig Scriptcode in den Webseiten, die verschiedene Styles unterstützen sollen.
Wie das funktioniert, kann hier ausprobiert werden. Alle wichtigen Dateien noch als zip-Archiv phpsw.zip. Die Pfade vor Verwendung bitte anpassen.

August 2010