Webdesign

De sprookjeswereld van 'stylesheets' | Mode, mode, wat nou mode? | Een printvriendelijke stylesheet

De sprookjeswereld van 'stylesheets'

Ofschoon je met een handjevol HTML-tags een heel eind kunt komen wordt het op den duur knap vermoeiend om steeds weer die voor letterfonts en -kleuren te moeten intypen of aanklikken. Wil je naderhand bijvoorbeeld de grootte van de letter wijzigen dan moet je dus ook al die tags weer langslopen. Veel eenvoudiger is het om de inhoud van een website strikt te scheiden van de aanwijzingen voor de vormgeving. En dit is mogelijk door toepassing van een zogenaamde 'stylesheet' of opmaakmodel waarin éénmaal al deze kenmerken zijn vervat.

Zen Garden

Het systeem heet voluit Cascading Style Sheets (CSS) omdat deze stylesheets elkaar ook onderling kunnen oproepen. Het lijkt een simpel en nuttig systeem, maar wie zich echt wil verbazen over de verstrekkende mogelijkheden ervan moet eens een kijkje nemen op de website Zen Garden, the Beauty of CSS Design. Hier zie je hoe door een simpele muisklik eenzelfde tekst op volstrekt uiteenlopende manieren zichtbaar kan worden gemaakt. Wie meer uitleg wil hebben dat op de website beschikbaar is leze het voortreffelijke 'The Zen of CSS Design' van Dave Shea en Molly E. Holzschlag (ISBN 0321303474)

'Zen Garden' illustreert op overtuigende wijze de kracht van het systeem van stylesheets, verder CSS te noemen... Ook levert een goed doordachte toepassing van CSS veel tijdwinst voor de maker en een stabielere site met minder kans op onregelmatigheden. De afzonderlijke html-pagina's bevatten verder aanmerkelijk minder code waardoor ze ook bij de gebruiker sneller zullen binnenkomen. Dit temeer daar ook een nauwkeurige opmaak niet langer een overmaat aan soms ingewikkelde tabellen noodzaakt en de posionering van alle grafische elementen helemaal met CSS kan worden geregeld.

Nog meer voorbeeldsites

Ook op CSSBeauty zijn voorbeelden te vinden hoe met behulp van stylesheets, maar dan bij gewone, vaak commerciële sites. Stylegala is eveneens een site, waar naast veel praktische informatie over webdesign, een galerie wordt bijgehouden van opmerkelijke sites die een goed gebruik maken van CSS. Een van de hoogst genoteerde sites is overigens A List Apart van Jeffrey Zeldman en onder webontwerpers beter bekend als 'ALA'. Het nieuwe ontwerp van Jason Santa Maria wordt gekenmerkt door een grote elegantie die de uitmuntende inhoud uitstekend weet over te brengen.

Een elftal lege voorbeeldsites, ofwel 'templates', met zowel de daarbij gebruikte (X)HTML- als CSS-code, zijn te vinden op de Zwitserse site CSS Intensivstation (Duits zowel als Engels). Een leerzaam artikel van Russ Weakley op de site Max Design beschrijft een mooie methode om met behulp van gekleurde 'boxen' zelf een complete website met een CSS-layout te realiseren. Nog meer buitengewoon nuttige artikelen van dezelfde auteur zijn te vinden op de artikelindex van dezelfde website.

Browser-ondersteuning van CSS

Al eind 1996 werd een volledige CSS1-standaard voorgesteld door het W3-consortium (W3C), dat zelf in 1994 was opgericht om de verschillende html-implementaties te standaardiseren. Deze werd twee jaar later gevolgd door een verder uitgewerkte CSS2. Was het aanvankelijk - toen - marktleider Navigator die er nogal een puinhoop van maakte, later werd die bedenkelijke rol overgenomen door Microsoft's Internet Explorer. De nog veel gebruikte versie 5.x (en zelfs 6.0 in 'quirks'-mode) geeft een volkomen verkeerde interpretatie van het belangrijke box-model.

Overeenkomstig de defintie van het W3C wordt de 'box' gevormd door de diverse 'blok-elementen', zoals tabel, paragraaf en lijst-tags en ook kan er een hoogte (height) en breedte (width) aan worden gegeven. Daarbuiten volgen respectievelijk 'padding', 'border' en 'margin'. In de IE5.x interpretatie echter bestaat de hoogte en breedt van 'box' uit de inhoud + de padding + de border (dus zonder margin). Het gevolg is uiteraard een volkomen ander uiterlijk in IE5.x en ook in IE6 wanneer deze niet expliciet in de 'standards'-mode is geplaatst.

Wordt vervolgd...

Mode, mode, wat nou mode?

Een door velen niet goed begrepen aspect van website-ontwerp is het feit dat browsers op twee verschillende manieren een stylesheet kunnen interpreteren. Deze twee manieren of 'modes' heten 'quirks' en 'strict' en kunnen in principe ook worden aangegeven in de bovenste regel - de zogenaamde Doc-regel - van een html-pagina. Oudere browsers (zoals Netscape 4 en IE 5/Windows) zullen echter altijd in de quirks-mode opereren.

Het stijlbladen-concept

Toen omstreeks 1995 het begrip 'stylesheet' vaste vorm kreeg werd daar al vanaf 1993 intensief over gesproken. Eind 1996 werd door het World Wide Web-Consortium - afgekort W3C - de eerste versie van CSS1 gepubliceerd. Daarmee kon de vormgeving van letterfonts en -groote, de spatiëring en kleur los van de inhoud van de html-pagina's worden geregeld. Een enorme verbetering, ware het niet dat de implementatie in de browsers zo bedroevend geregeld bleek.

Het toen leidende Netscape 4 maakte er al helemaal een puinhoop van, maar ook Microsoft's IE 4 liet de nodige steken vallen. Daardoor ontstond de akelige situatie dat ontwerpers op grote schaal work-arounds moesten bedenken om toch een redelijke weergave te bereiken, hetgeen natuurlijk juist niet het doel was van de stijlbladen. Bovendien zouden hiermee nieuwe, verbeterde browsers onbedoeld weer afwijken van het beoogde ontwerp.

To quirks or not to quirks...

Als oplossing werden de oudere browsers gedwongen om volgens de oude (quirks) regels te werken, terwijl de web-ontwerpers voor de nieuwere browsers - die de normen van CSS (Cascading Style Sheets) zo goed mogelijk volgden - een keuze kregen voorgelegd. Bij bepaalde fouten in de toepassing viel men ook weer automatisch terug op de quirks-mode, hetgeen trouwens ook bleef gelden voor IE 5 voor Windows.

Het hele concept wordt op een voortreffelijke manier uitgelegd op de site met als naam (hoe kan het anders) 'Quirksmode'. Het is tegelijk een voorbeeld van het vernuft waarmee steeds weer een oplossing wordt gevonden voor ontstane problemen, terwijl het aan de andere kant ook laat zien hoe arrogantie en lamlendigheid van sommige browsermakers de zaak onnodig ingewikkeld plegen te maken...

Een printvriendelijke stylesheet

Een site die op het beeldscherm heel mooi en duidelijk overkomt kan er bij het uitprinten soms heel wat minder fraai uitzien. Vaak zal dit veroorzaakt worden doordat een zwart/wit-printer de gekleurde kopregels niet duidelijk weergeeft, maar ook kan het lettertype te klein of juist te groot uitvallen, terwijl ditzelfde kan gelden voor de marges.

Een perfecte oplossing is het toepassen van een speciale stylesheet die optimaal is afgestemd op het afdrukken en die automatisch in werking treedt zodra een printcommando wordt gegeven. In de eerste plaats is het hiervoor nodig om in de header van al je pagina's - naast de link naar de reguliere stylesheet - een extra link naar de print-stylesheet aan te brengen. Dus zo:

Hierbij is 'print.css' natuurlijk deze aparte stylesheet waarin je de print-vormgeving definiëert. 'Screen.css' is de reeds bestaande stylesheet voor de schermweergave, maar hier dient ook expliciet het media-type te worden aangegeven, anders gaan er dingen verkeerd.

De aangepaste stylesheet

Een goed ontworpen webpagina zal over het algemeen niet van een vaste breedte in pixels zijn voorzien, want ook bij beeldschermweergave kan dat al noodzaken tot horizontaal scrollen. Bij het printen is het nog belangrijker om binnen de breedte van een A4-formaat te blijven. Het handigste is dan om helemaal geen breedte op te geven en de printerdriver de zaak te laten afhandelen.

De achtergrond wordt vanzelfsprekend op wit en de fontkleur op zwart vastgelegd. Daarnaast dient de lettergrootte in (typografische) punten te worden weergegeven - over het algemeen zal dit tussen 9-11 pt bedragen. De linkermarge geef je in millimeters aan, dus ongeveer zoals dit:

body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: Black;
background-color: White;
text-align: left;
margin-left: 20mm;
}

Vergeet niet eenzelfde procedure voor de koppen uit te voeren, waarbij niet alleen de grootte kan worden aangepast, maar ook de onder- en bovenmarge. Bijvoorbeeld:

H2 {
font-size: 14pt;
margin-top: 6pt;
margin-bottom: 2pt;
font-weight: bold;
color: Black;
}

Ook de links verdienen extra aandacht, en dit zeker wanneer je deze niet door onderstreping, maar door een afwijkende kleur kenmerkte. Bij mij ziet de aangepaste vorm er zo uit:

a {
font-size: 8.5pt;
color: #747474;
font-weight: bold;
text-decoration: underline;
}

Vanwege de extra onderstreping heb ik de fontgrootte iets kleiner genomen dan van de bodytekst en de kleur middelgrijs gemaakt. Wanneer je gebruikmaakt van de fonttypes 'em' en 'pre' dan dienen ook deze een aanpassing te ondergaan. Tenslotte vragen ook tabellen een eigen stylering:

table, tr, td {
font-size: 9pt;
color: Black;
background-color: White;
}