CSS

De visuele weergave van de site wordt niet binnen de HTML aangegeven, maar er wordt gebruik gemaakt van de richtlijnen voor CSS 2.1. Hierdoor is de site bruikbaar als er geen stylesheets gebruikt kunnen worden. Een eventueel redesign van de site zal hierdoor vergemakkelijkt worden.

CSS-management

De site heeft stylesheets voor twee verschillende mediatypen. De stylesheets met media="screen" zorgen voor de visuele weergave op het scherm, en het stylesheet met media="print" zorgt voor een nette printoutput.

Helaas is de CSS ondersteuning (nog) in geen enkele browser perfect. Het is te allen tijde beter om zo min mogelijk hacks te gebruiken. De beste methode is om afwijkingen ten opzichte van een juiste implementatie van de CSS-richtlijnen recht te trekken. Meestal zal dit voor voor Internet Explorer gelden en mits goed georganiseerd zullen deze hacks toegepast kunnen worden zonder dat daar in de toekomst weer problemen voor terugkeren.

IE5/Mac

De ontwikkeling en ondersteuning Internet Explorer 5 voor Mac is door Microsoft stopgezet. Deze browser is ook niet meer te downloaden via de site van Microsoft. Het is dus veilig om exclusief voor deze browser hacks toe te passen. De Commented Backslash MacIE5 CSS Hack komt een aantal maal in "scherm.css" voor.

Voorbeeld

.intro {float: none; /* Verberg voor IE-mac \*/ float: left; /**/ }

IE6 en lager / Windows

Op verzoek van de ontwikkelaars van IE7 zijn met behulp van Conditional comments opmaakregels geschreven die exclusief voor Internet Explorer zijn.

Voorbeeld

<!--[if lte IE 6]>
 <link rel="stylesheet" type="text/css" media="screen" href="/styles/screen_ie.css" />
<![endif]-->

Hierdoor kan beter geanticipeerd worden op nieuwe versies van deze browser. Zodra IE7 of latere versies beschikbaar komen, kunnen — indien nodig — de benodigde hacks in het juiste stylesheet gezet worden.

Declaraties, id en class

De opmaakregels zijn zo veel mogelijk generiek van aard, zodat de regels binnen meerdere HTML-documenten ingezet kunnen worden. De verschillende blokken zijn binnen het stylesheet duidelijk aangegeven en nieuwe declaraties kunnen dan ook het beste in het betreffende blok aangevuld worden.

Voorbeeld

/*  Content
-------------------------------------------- */
#content {
/* Verberg voor IE-mac \*/ clear:both; /**/
}

#content a:hover, #content a:focus {
color:#000;
...

id en class

Om de opmaak van een element afzonderlijk te regelen kan gebruik gemaakt worden van een id of een class. Een id kan slechts éénmaal per HTML-document gebruikt worden, terwijl een class meerdere malen en voor verschillende elementen gebruikt kan worden.

Voorbeeld

<h2 id="korter">
 Dat kan korter
</h2>
<p>
Met name automatisch gegenereerde CSS-bestanden gaan wel eens wat slordig 
...
</p>
<div class="voorbeeld">
 <pre><code>padding-top: .7em;
 ...
 </code></pre>
</div>
<p>
 Dat kan een stuk korter, want we kunnen het in één regel samenvatten. Begin 
 ...
</p>
<div class="voorbeeld">
 <pre><code>padding: .7em 1.2em .2em 1.3em</code>
 </pre>
</div>
<p>
 Ook hoef je echt niet 
 ...

De naamgeving van een id of een class beschrijft de functie van het element, en niet de visuele weergave. Voordeel: bij een redesign zal het uiterlijk van de site veranderen, maar de functionaliteit van een element zal niet wijzigen.

Typogrammen

Om de site langdurig hetzelfde uiterlijk te laten behouden is het belangrijk om een aantal typografische beslissingen vast te leggen. Het doel hiervan is dat er eerst gekeken kan worden of het element al is gedefinieerd voordat er een nieuwe stijl wordt bedacht.

Koppen en paragrafen

Bijbehorende CSS

h1 {
margin: -.6em 0 0 0; 
color: #2e2a25;
font:200% 'Gill Sans', 'Gill Sans MT', verdana, arial, sans-serif;
text-transform: uppercase;
}

h2 {
font-size: 110%
}

h3 {
font-size: 100%
}

p {
margin:0 0 1em;
}

Links

a {
color:#ba0808;
text-decoration:none;
border-bottom:1px solid #decd9a
}

a:visited {
color:#b74a43
}

a:hover, a:focus {
color:#ba0808;
border-color:#ba0808;
}

Lijsten

ul {
margin:0 0 1em;
padding:0;
list-style:none;
}

ul li {
padding-left:16px;
background:url(/img/bg_li.gif) no-repeat 0 .4em;
}

ul ul {
margin-bottom:0
}

ul ul li {
padding-left:12px;
background:url(/img/bg_li_li.gif) no-repeat 2px .4em;
}

Kleuren

De site maakt gebruik van onderstaand kleurenpalet. Bij het introduceren van een nieuwe kleur moet deze beslissing voldoende beargumenteerd kunnen worden, en moet de kleur passen bij het palet.

• gebroken wit: #fff8dd
• beige: #fdf2d2
• oranje: #ff9900
• oud roze: #b74a43
• rood: ba0808
• antraciet: #221111

« terug naar het artikel