Style Switcher

Bei heutigen Webseiten werden Layout und Content strikt getrennt und so landen die Formatvorgaben in CSS-Dateien, die neben den Schriften auch die Formatierung komplett gestalten. Es ist damit sehr einfach das Layout einer Seite anzupassen oder sich an verschiedene Geräte anzupassen. Interessant ist z.B. die Änderung von Schriftgrößen oder natürlich das Testen eines neuen Layout parallel zur produktiven Seiten. Es gibt auch Browser, die ihnen das Überschreiben von Styles erlauben. für meine Testzwecke pflege ich immer das produktive Stylesheet und daneben ein zweiten Stylesheet zum Testen. Hier beschreibe ich , wie ich umschalte:

Basisseite

Hier mal eine Musterseite zum Spielen. In dieser Seite sind zwei unterschiedliche Stylesheets im Header, die per Skript dann erst einmal abgeschaltet werden aber über einen "Klick" auf die Aufzählung umgeschaltet werden können.

<html><head>
<style>/* Stylesheet 1: */
...
</style>

<style>/* Stylesheet 2: */
...
</style>
</head>
<body>

<ul>
<li class="menuitem" onclick="SetStyle(0)">Stylesheet 1
<li class="menuitem" onclick="SetStyle(1)">Stylesheet 2
<li class="menuitem" onclick="DisableStyles()">No Stylesheet
</ul>


<script>
function DisableStyles() {
document.styleSheets[0].disabled = true;
document.styleSheets[1].disabled = true;
}

function SetStyle(n) {
DisableStyles()
document.styleSheets[n].disabled = false;
}
SetStyle(0);

</script>
</body>
</html>

Hier dann die beiden Listen zum Auswählen

Mehrere externe Style Sheets

Meine Stylesheet sind natürlich nicht direkt als "<Style>" im Header definiert sondern als Link eingebunden

Da ist aber nur ein StyleSheet und ein "alternatives" Stylesheet, wenn der Browser dies unterstützt. Man kann aber auch mehrere Stylesheets addiert, was ganz praktisch ist, um eine Basis-Stylesheet und ein zweites z.B. für Formulare zu nutzen.

<link rel="stylesheet" type="text/css" href="msxfaq.css">
<link rel="stylesheet" type="text/css" href="formular.css">

Der Browser lädt beide Stylesheets und "merged" die Daten zusammen. Das zuletzt geladene Stylesheet gewinnt. Wenn ich also mehrere Stylesheets nutzen möchte, deren Einstellungen sich überlagern, dann ist die Reihenfolge wichtig. Um also die "Standard"-Ansicht zu nutzen, auch wenn der Browser z.B. kein Skript unterstützt, muss der Default am Ende stehen

<link rel="stylesheet" type="text/css" href="alternative1.css">
<link rel="stylesheet" type="text/css" href="alternative2.css">
<link rel="stylesheet" type="text/css" href="standard.css">

Dann kann per Skript wieder das ein oder andere Stylesheet ab und angeschaltet werden.

Weitere Links