Stylesheet switcher maken
In veel gevallen kan het handig zijn dat een gebruiker zelf kan bepalen hoe een webpagina eruit ziet,
zo houdt de een van een klein lettertype en is dat voor de ander niet te lezen. Ook in het kader van
toegankelijkheid op het web is een stylesheet switcher een handig instrument om dergelijke zaken
mee te regelen. In dit artikel maken we een stylesheet switcher om de grootte van lettertype te kunnen
veranderen. Maar natuurlijk kun je dit voor allerlei andere zaken ook gebruiken.
Een stylesheet switcher
Een van de bekendste voorbeelden van websites die gebruik maken van stylesheet switcher is
CSS Zengarden. Hier wordt het CSS
bestand helemaal aangepast en het HTML document wordt ongemoeid gelaten. Vele honderden versies
zijn hiervan al gemaakt. Wij gaan een eenvoudige versie maken, we hebben als basis een eenvoudige
pagina genomen
en laten zien hoe we er voor kunnen zorgen dat er een ‘gewone’ versie is, een groot lettertypeversie en een
versie met een klein lettertype.
Het HTML document
Het eerste dat we nodig hebben is het HTML document:
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="wrapper">
<div id="content">
<h1>Lorem ipsum</h1>
<p>Dolor sit amet...</p>
<p>Vivamus pharetra...</p>
<p>Quisque facilisis...</p>
<p>Dolor sit amet,..</p>
<p>Vivamus pharetra...</p>
</div>
</div>
</body>
</html>
Wrapper wordt hierbij gebruikt als een soort omhulsel voor CSS, content is voor de inhoud van het
document. Hiervoor hebben we dummytekst gebruikt.
Een JavaScript
Om een stylesheet te kunnen laten veranderen moeten we gebruik gaan maken van een JavaScript.
In Firefox is het mogelijk om dit zonder JavaScript te doen, maar de meeste mensen gebruiken nog steeds
Internet Explorer en daarbij kan dat niet zonder een scriptje. Om het script op te roepen plaats je in de
head van bovenstaand document de volgende code:
<script src=”styleswitcher.js” type=”text/javascript”></script>
Vervolgens maak je een document aan dat je opslaat als styleswitcher.js, met daarin de
volgende code:
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
De stijlbladen invoegen
Vervolgens moet je de links naar de stijlbladen invoegen, dat gebeurt in de head van het document.
Zet er voor het gemak even bij welk soort stijlblad het is met behulp van commentaar code, bijvoorbeeld
<!-- grote letters -->. Wij zetten de volgende code in ons document:
<link rel="stylesheet" type="text/css" href="main.css" />
<!-- normaal -->
<link rel="stylesheet" type="text/css" href="normaal.css" title="normaal lettertype" />
<!-- alternatieven -->
<link rel="alternate stylesheet" type="text/css" href="groter.css" title="groter lettertype" />
<link rel="alternate stylesheet" type="text/css" href="kleiner.css" title="kleiner lettertype" />
De structuur van de webpagina
We gaan de structuur van de webpagina maken met behulp van een aantal divs. In de div 'masthead'
zetten we een div met de naam 'stylebox', waarin de links komen te staan naar de verschillende stijlbladen.
De hele html pagina wordt dan als volgt:
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Switcher</title>
<script src="styleswitcher.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="main.css" />
<!-- normaal -->
<link rel="stylesheet" type="text/css" href="normaal.css" title="normaal" />
<!-- alternatieven -->
<link rel="alternate stylesheet" type="text/css" href="groter.css" title="groter" />
<link rel="alternate stylesheet" type="text/css" href="kleiner.css" title="kleiner" />
</head>
<body>
<div id="wrapper">
<div id="masthead">
<div id="stylesBox">
<ul>
<li>Kies een stijl</li>
<li><a href="non-javascript.html" onclick="setActiveStyleSheet('normaal'); return false;">Normaal</a></li>
<li><a href="non-javascript.html" onclick="setActiveStyleSheet('groter'); return false;">Grotere letters</a></li>
<li><a href="non-javascript.html" onclick="setActiveStyleSheet('kleiner'); return false;">Kleinere letters</a></li>
</ul>
</div>
</div>
<div id="content">
<h1>Lorem ipsum</h1>
<p>Dolor sit amet...</p>
<p>Vivamus pharetra...</p>
<p>Quisque facilisis...</p>
<p>Dolor sit amet,..</p>
<p>Vivamus pharetra...</p>
</div>
</div>
</body>
</html>
De stijlbladen
Tenslotte moet je de stylesheets gaan maken. Er is ook een stylesheet, main.css, waarin andere stijlen komen te
staan die voor iedere pagina gelden, de stijlbladen normaal, groot en klein gelden alleen maar voor de
lettergroottes. Hier volgen de vier verschillende stijlbladen.
body {
font-family: Georgia, sans-serif;
}
#wrapper {
width: 700px;
margin: 0 auto;
}
#content {
text-align: justify;
border: 1px solid #009;
padding: 10px;
}
#stylesBox {
margin-left: 530px;
padding-left: 20px;
font-size: 10px;
}
#stylesBox ul {
list-style-type: none;
}
#stylesBox li {
margin-bottom: 6px;
}
a {
color: #009;
}
a:hover {
color: #7e7448;
}
#content p{
font-size: 12px;
}
#content h1{
font-size: 16px;
}
#content p{
font-size: 15px;
}
#content h1{
font-size: 19px;
}
#content p{
font-size: 10px;
}
#content h1{
font-size: 14px;
}
