Zum Quellcode

Der nachfolgende Quellcode ist nicht besonders formatiert. Am leichtesten ist er überschaubar, wenn man ihn aus der Seite kopiert und dann in einen Editor einfügt, der die Syntax hervorhebt.
Ich habe hier einige Stylesheets verarbeitet, die ich zum Testen bestimmter Effekte geschrieben habe. Es ist also nichts besonders "Durchgestyltes" zu erwarten.
Es geht hier auch weniger um das perfekte Styling, als vielmehr um eine Demonstration, was man alles mit ein und dem selben Markup anstellen kann. Also am besten einfach einen Style aussuchen.
(Sofern JavaSkript deaktiviert ist, den "Switch Style" Knopf drücken.)

Der gekürzte Seitenquellcode

<?php
if (empty($_GET['style'])) {
  if (empty($_COOKIE['style'])) {
    $css_name = "default";
  }
  else {
  $css_name = $_COOKIE['style'];
  }
}
else {
  $css_name = $_GET['style'];
}
setcookie("style", $css_name, time()+(60*60*24*30), "/examples/styleswitcher/", ".{$_SERVER['SERVER_NAME']}");
$_GET['style'] = $css_name;
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de-DE">
  <head>
    <link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="css/<?php echo $css_name?>.css" />
    <link rel="alternate stylesheet" type="text/css" media="screen" title="Blume" href="css/blume.css" />
    <!--und so weiter-->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!--Weitere Metatags-->
    <title>« um-fritz.de »« Styleswitcher »</title>
  </head>
  <body id="style">
  <div id="wrapper">
    <div id="header">
    <form action="<?php echo $_SERVER['SCRIPT_NAME']?>" method="get">
        <fieldset>
            <select name="style">
            <option value="default" selected="selected">None</option>
            <option value="blume">Blume</option>
            <option value="the_wall">The Wall</option>
            <option value="fruits">Fruits</option>
            <!--Weitere Optionen-->
            </select>
            <input type="submit" value="Switch Style" />
        </fieldset>
    </form>
    <h1>Styleswitcher</h1>
    </div><!--ENDE header -->
    <div id="menu">
    <ul id="navlist">
    <li><a class="style" href="styleswitcher.php?style=<?php echo $css_name?>" title="Styleswitch">Styleswitch</a></li>
    <li><a class="ite2" href="/styleswitcher" title="mit JavaScript eine Seite zurück" onclick="history.go(-1); return false">History Back</a></li>
    <li><a class="ite3" href="/styleswitcher" title="Artikel: Styleswitcher mit PHP">Artikel</a></li>
    <!--Weitere Links-->
    </ul>
    <div class="clear"></div>
    </div><!--ENDE menu -->
    <div id="content">
      <h2>Der gekürzte Seitenquellcode</h2>
      <p><code>
      <!--Hier steht der Inhalt-->
      </code></p>
    </div><!--ENDE content -->
    <div id="footer">
    <p>
    <!--Inhalt Footer-->
    </p>
    </div><!--ENDE footer -->
  </div><!--ENDE wrapper -->
</body>
</html>

Die Überprüfung des CSS Codes funktioniert nur, wenn die Seite mit GET Parameter aufgerufen wurde, also z.B.
.../styleswitcher.php?style=blume