Nachdem ich mehrere Artikel und Skriptbeispiele zum Thema Styleswitcher studierte, kam ich zu dem Ergebnis, daß keines, der von mir gefundenen Beispiele, dafür geeignet ist, ohne gravierenden Umbau der Skripte und ohne mit Kanonen auf Spatzen zu schießen mehrere CSS-Dateien gleichzeitig zu laden. Dies kann z. B. notwendig sein, um auch dem Netscape Navigator 4.x die ihm möglichen Angaben für mehrere Layouts mitzugeben.
Also beschloss ich der Einfachheit halber die CSS-Dateien der verschiedenen Layouts durchzunummerieren. Unter der Maßgabe, daß die alt[x].css die Definitionen für den NN 4.x enthält und neu[x].css die modernen Browser bedient, ergab sich folgendes Schema für den Aufruf der externen CSS Dateien.
<link rel="stylesheet" href="css/alt0.css" type="text/css">
<link rel="stylesheet" href="css/neu0.css" type="text/css" media="all">
Da media="all" vom NN 4.x nicht interpretiert wird, kann man die ihm unbekannten und insbesondere die ihn verwirrenden Angaben dort verstecken. Anstatt alt0.css könnte dort natürlich auch ein anderer Dateiname stehen. Genausogut könnte es sich auch nur um eine einzubindende CSS-Datei handeln.
Auf dieser Seite stelle ich diese Funktionalität dem NN 4.x nicht zur Verfügung, da das meiner Meinung nach wenig Sinn macht. Vielleicht probiere ich es jedoch später einmal, auch diesem "Saurier" verschiedene Layouts zugänglich zu machen.
Das Skript ist ein simpler Umschalter zwischen verschiedenen Stylesheetdefinitionen. Es speichert den Wert in einem Cookie auf dem Rechner des Seitenbenutzers. Mit dem folgenden Code wird die Datei mit den Funktionen in die Seite eingebunden, auf der sich auch das Formular mit dem Umschalter befindet.
<?php
include("style.php");
$sc = setkeks($styles);
if (isset($_COOKIE["cstyle"]))
{
$styleset = $_COOKIE["cstyle"];
}
if (isset($_POST["set_style"]) and preg_match("/$sc/",$_POST["set_style"]))
{
$styleset = $_POST["set_style"];
}
if (!isset($_COOKIE["cstyle"]) and !isset($_POST["set_style"]))
{
$styleset = 0;
}
?>
Der obige Codeschnipsel wird am Anfang der Seite, also vor jeglichem HTML-Code, eingebunden. Wenn vor der Ausführung der Funktion setkeks() ein vom Browser darzustellendes Zeichen gesendet werden sollte, dazu gehören auch Leerzeichen, könnte das Cookie nicht mehr übermittelt werden und es gäbe eine PHP-Fehlermeldung "Header always sent".
Die Variable $styleset ergänzt die Zeile(n) zum Aufruf der CSS-Dateien um die Nummer des Layouts. Das sieht nach dem oben gezeigten Beispiel so aus:
<link rel="stylesheet" href="css/alt<?php echo $styleset; ?>.css" type="text/css"> <link rel="stylesheet" href="css/neu<?php echo $styleset; ?>.css" type="text/css" media="all">
Die Funktion, die das Formular darstellt, wird wie folgt an der gewünschten Stelle im HTML-Code eingefügt.
<?php style_menu($styles); ?>
Das Array $styles ist in der Datei style.php in der Zeile 6 definiert. Dort sind in der Reihenfolge der gewünschten Layouts deren Namen notiert. Das heißt: dem Layout "Normal" sind die CSS-Dateien alt0.css und neu0.css zugeordnet und es steht im Array $styles an erster Stelle (Position 0). Zum Alternativlayout "Anders" gehören die Dateien alt1.css und neu1.css und es belegt im Array die zweite Stelle (Position 1) usw. usf..
...
$styles = array("Normal","Anders"); // Zeile 6 der style.php
...
Damit sind alle zur Einrichtung und zum Betrieb des Skriptes eventuell nötigen Angaben erklärt. Die Seite mit dem Schalter läßt sich nun in verschiedenen Layouts aufrufen. Damit nun aber auch die anderen Seiten des Webangebots in einem anderen Layout erstrahlen, muß auch dort das Cookie gelesen und der Wert in den Aufruf der CSS-Datei integriert werden. Deshalb wird dort am Anfang der Datei folgender Codeschnipsel eingefügt.
<?php
if (isset($_COOKIE["cstyle"]))
{
$styleset = $_COOKIE["cstyle"];
}
else
{
$styleset = 0;
}
?>
Und natürlich erfolgt auch hier das Einfügen des Ergebnisses in den CSS-Aufruf.
<link rel="stylesheet" href="css/alt<?php echo $styleset; ?>.css" type="text/css"> <link rel="stylesheet" href="css/neu<?php echo $styleset; ?>.css" type="text/css" media="all">
Die, zum Download bereitstehende, ZIP-Datei enthält folgende Dateien:
Download des Stylesheetschalters
(letzte Änderung: 09.11.2011, 14:08 - Größe: 8,3 KB - bisherige Downloads: 227)