Je kent vast het probleem dat je voor iedere nieuwe website opnieuw dezelfde stijlen aan of uit moet zetten. Misschien wil je dat de border van een fieldset altijd uit staat, of wil je altijd alle margins en paddings van een ul en de li’s op 0 zetten, enzovoort.

Dat wil je voor iedere website opnieuw en wellicht zijn er nog een heleboel zaken die ook handig zijn om aan het begin van je stylesheet voor iedere website vast te stellen. Misschien zijn er zelfs een hoop van dat soort zaken waar je nog nooit aan gedacht had. Dat geeft niets. Anderen hebben daar namelijk wel aan gedacht, en hebben een aantal standaardinstellingen bedacht die voor iedere website opnieuw handig kunnen zijn. Deze standaardinstellingen kunnen onderdeel zijn van een CSS-framework en daar wil ik je graag kennis mee laten maken.

Kennismaking

Een CSS-framework is altijd sterk afhankelijk van de smaak van de bouwer. Er is dus niet één framework waar iedereen mee werkt. Je bedenkt je eigen framework. Daarbij kun je natuurlijk wel gebruik maken van het denkwerk wat anderen al gedaan hebben. Een CSS-framework bestaat uit een altijd toepasbare (generieke) opzet van een stylesheet-structuur. We kunnen zo’n framework beginnen met een aantal standaardwaarden die handig en toepasbaar kunnen zijn voor iedere website.

We hoeven deze standaardwaarden niet zelf te bedenken. Zoals gezegd zijn anderen hier al mee bezig geweest. Twee voorbeelden van kant-en-klare frameworks zijn Blueprint en YUI van Yahoo!. In dit artikel gaan we het hebben over Blueprint. Blueprint is open source, en wordt gemaakt door vrijwilligers. Je kunt het naar eigen wens aanpassen en gebruiken.

Laten we het eens onder de loep nemen. Blueprint bestaat uit de volgende stylesheets:

• reset.css
• grid.css
• ie.css
• forms.css
• typography.css
• print.css

Basisfuncties

Al deze stylesheets hebben hun eigen functie. Je wilt je eigen framework bouwen en zult dus zeker niet alles nodig hebben wat erin staat. Ik heb ze voor mijn eigen gebruik ook naar mijn eigen smaak ingericht en samengevoegd.

reset.css

Hiermee zet je in één keer alle stijlen op “neutraal”. Je zet alle borders op 0, alle paddings en margins op 0, enzovoort. De line-height in je documenten wordt gezet. De waarde van line-height krijgt geen eenheid (bijvoorbeeld ‘px’ of ‘%’), zodat hij relatief is aan de font-size. Dus als je line-height op 1.5 staat en je font-size op 12px dan wordt de effectieve line-height 12px x 1.5 = 18px.

Het is de moeite waard om ‘reset.css’ door te nemen en te bekijken wat je wel of juist niet wilt gebruiken.

Let op! Als je de stylesheets van het Blueprint framework bekijkt kan het natuurlijk gebeuren dat je declaraties tegenkomt die je niet begrijpt of nooit eerder gezien hebt. Ik adviseer je om deze niet zonder meer over te nemen of weg te gooien. google ze even, sla je boeken erop na of probeer op een ander manier te achterhalen wat een en ander betekent en hoe het werkt.

grid.css

Dit stylesheet geeft je de basis van een layout voor je pagina, met name in de vorm van kolommen. Je kunt kolommen toevoegen en weghalen door de bijbehorende classes toe te passen of niet. Verschillende classes vertegenwoordigen verschillende kolombreedtes. In het zip-bestand dat je hebt gedownload om met Blueprint aan de slag te gaan (via het pad tests/parts/grid.html) vind je een mooie voorbeeldpagina met de maximale mogelijkheden van de grid.css.

Kijk vooral ook naar de class “clearfix”. Een mooie, generieke class om floatende elementen te clearen. Deze class is oorspronkelijk geschreven door de auteurs van Position Is Everything.

ie.css

Om de basisbestanden netjes en valide te houden hebben de makers van Blueprint besloten om een apart stylesheet voor Internet Explorer toe te voegen. Hierin staan een aantal correcties van stijlen voor IE 5.5 en hoger. Binnen dit stylesheet wordt door middel van hacks onderscheid gemaakt tussen de verschillende versies van IE. Zo worden declaraties die volgen op “* html” alleen door Internet Explorer 6 uitgevoerd. In het stylesheet vind je op de juiste plaatsen comments die uitleggen welke declaraties voor welke versies bedoeld zijn.

Als je tijdens de bouw van je website zelf nog onderscheid moet maken tussen IE en andere browsers, dan kun je natuurlijk je eigen declaraties ook weer kwijt in dit stylesheet. Om te voorkomen dat dit stylesheet aan andere browsers dan Internet Explorer geserveerd wordt moeten we het aan de head van de pagina toevoegen door middel van conditional comments.

forms.css

Dit stylesheet geeft je een aantal classes die je kunt gebruiken om je formulieren op te maken. Ik beschouw het voornamelijk als een mooi startpunt waarin je een aantal goede ideeën aan de hand gedaan worden. Zo wordt bijvoorbeeld een duidelijk onderscheid gemaakt (via verschillende classes) tussen meldingen zoals ‘opdrachten succesvol afgerond’, ‘er is iets fout gegaan’ en ‘een mededeling’. Ze lijken op elkaar, maar toch zijn er duidelijke verschillen: goed idee!

typography.css

Altijd een lastig onderdeel, de typografie. Zeker de font-size is de moeite waard om even bij stil te staan. In ‘reset.css’ wordt de font-size op de body (en op een groot aantal andere elementen) op 100% gezet. In ‘typography.css’ wordt de font-size op de body weer terug gezet naar 75% (persoonlijk zou ik daar liever 62.5% van maken). Vervolgens kun je de font-size van afzonderlijke elementen bepalen met em’s. Omdat in ‘reset.css’ de font-size voor een groot aantal andere elementen op 100% staat (ten opzichte van de grootte die je voor de body hebt aangegeven), zal de overerving (ook in tabellen) geen probleem zijn. En dat is wel zo prettig. 

Ook hier weer een aantal aardige voorstellen zoals de classes ‘quiet’ en ‘loud’ om tekst te benadrukken of juist ondergeschikt te maken.

print.css

Een aantal classes en declaraties die eerder voor mooie opmaak zorgden voor monitoren worden hier weer vereenvoudigd voor papier. Kleuren worden overschreven door zwart, achtergronden worden uitgezet en de lettergrootte wordt op de body naar punten (pt) gezet. Dit alles om het de printer zo eenvoudig mogelijk te maken en natuurlijk om op kleur te besparen.

Een mooie toevoeging (werkt alleen in browsers die CSS3 ondersteunen) is het uitprinten van de waarde van het href-attribuut. Normaal zou een printer van een linkje alleen de tekst die gelinkt wordt printen. Dat zegt de lezer van de uitgeprinte tekst natuurlijk niets over waar dat linkje naar toe gaat.

Bekijk de onderste declaraties uit dit stylesheet maar eens. Daar zul je zien dat via de declaratie content de bestemming van een link ook in print zichtbaar wordt.

Voorwaarts!

Je kunt uit de bovenstaande stylesheets gebruiken wat van je gading is. Als je de verschillende stylesheets naar je eigen behoefte hebt aangepast kun je ze samenvoegen, zoals dat door de ontwikkelaars ook gedaan is in het stylesheet ‘screen.css’. Om te besparen op Kb’s kun je declaraties op één regel zetten en witregels weghalen. Zorg er wel voor dat de declaraties uit ‘reset.css’ altijd bovenaan staan. Ze moeten in een aantal gevallen overschreven kunnen worden (denk bijvoorbeeld aan de font-size op de body).

‘Print.css’ laat je natuurlijk buiten deze samenvoeging.

Persoonlijk

Tot zover de verkenning van Blueprint. Nu mijn persoonlijke invulling van hoe de rest van het CSS-framework eruit kan zien.

Ik maak een ‘master.css’ aan, waarin ik niets anders doe dan de stylesheets die ik wil gebruiken importeren.

import url(screen.css);

Door import te gebruiken verberg ik de stylesheets voor echt heel oude browsers. Zij begrijpen deze regel namelijk niet en zullen dus helemaal geen stijlen laden, en dat is ook beter voor ze.

Vervolgens maak ik mijn eigen stylesheet aan, bijvoorbeeld ‘general.css’. Hierin ga ik al mijn eigen stijlen declareren. Dit zet ik ook weer in de master:

import url(general.css);

Ik importeer nu dus twee stylesheets in mijn ‘master.css’. Deze master kan ik gaan includen in de head van mijn pagina’s. Mocht ik in de toekomst een stylesheet willen toevoegen die op alle pagina’s van de website van toepassing moet zijn, dan kan ik deze gewoon in de ‘master.css’ importeren.

Printen

Om te voorkomen dat de stijlen uit de ‘master.css’ conflicten gaan veroorzaken tijdens het printen geef ik ‘master.css’ het media type “screen” mee. Het print-stylesheet ‘print.css’ include ik op de gebruikelijke manier in de head van mijn pagina’s. Dit stylesheet geef ik natuurlijk het media type “print” mee.

Internet Explorer

En zoals al eerder opgemerkt moeten we natuurlijk nog wat extra stylesheet-zorg aan Internet Explorer besteden. Gelukkig kunnen we IE apart bedienen via conditional comments.

Samenwerking tussen CSS en JavaScript

Je kunt hele mooie functionaliteiten toevoegen aan je website door middel van JavaScript. Als je dat van plan bent wil je dat natuurlijk doen op een manier die jouw website goed toegankelijk houdt, ook voor mensen die door je pagina's heen bladeren met een browser die geen Javscript ondersteund.

Om dat voor elkaar te krijgen zul je tot een goede samenwerking moeten komen tussen CSS en JavaScript. Ik vind het prettig om een apart stylesheet te gebruiken voor de declaraties die alleen te maken hebben met mijn Javscript: js-styles.css

Een eenvoudig voorbeeld

Stel dat je een pagina hebt met daarop een groot aantal veelgestelde vragen. Je hebt besloten om de overzichtelijkheid van je pagina te vergroten door alleen de vragen te tonen. De antwoorden zijn wel aanwezig, maar verborgen.

Als een bezoeker op een vraag klikt verschijnt daaronder het bijhorende antwoord zonder dat hiervoor de pagina ververst hoeft te worden. Het bijhorende antwoord wordt getoond met behulp van een JavaScript-functie.

Je HTML zou er zo uit kunnen zien:

<h2>Eerste vraag</h2> 

<p class="antwoord">Antwoord op de eerste vraag.</p> 
<h2>Tweede vraag</h2> 
<p class="antwoord">Antwoord op de tweede vraag.</p> 
<h2>Derde vraag</h2> 
<p class="antwoord">Antwoord op de derde vraag.</p>

Wat je wilt is dat de antwoorden verborgen worden. Een antwoord mag pas getoond worden op het moment dat er op een vraag geklikt wordt en dan mag natuurlijk alleen het bijhorende antwoord getoond worden. Deze functionaliteit bouw je in met behulp van JavaScript. Het verbergen van de antwoorden doe je via de class ‘antwoord’, die zet je in je stylesheet op display: none;.

Maar wat je ook wilt is dat een browser die geen JavaScript ondersteunt gewoon alle antwoorden laat zien. In dat geval wil je dus die declaratie display: none; op de class ‘antwoord’ helemaal niet uitvoeren. En daar komt dus dat aparte stylesheet voor declaraties die alleen te maken hebben met JavaScript om de hoek kijken. Die declaratie display: none; kun je in ‘js-styles.css’ plaatsen en dat stylesheet kun je aan de head van de pagina toevoegen met behulp van JavaScript.

Het idee

Het idee is eenvoudig. Een browser die geen JavaScript ondersteunt zal het sylesheet ‘js-styles.css’ niet aan de head van de pagina toe kunnen voegen omdat daar JavaScript voor nodig is. Die browser ziet dus de declaratie display: none; voor de class ‘antwoord’ niet, en zal dus de antwoorden allemaal tonen.

Hoe gaan we dat laatste stylesheet ‘js-styles.css’ aan de head toevoegen?

Glad ijs

Ik begeef mezelf nu op glad ijs en veel JavaScript-puristen zullen het hartstochtelijk met me oneens zijn. Feit blijft dat deze methode goed werkt in alle browsers: document.write.

Het scriptje is eenvoudig en kan er zo uitzien:

document.write('<link type="text/css" rel="stylesheet" href="js-styles.css" media="screen" />');

Dit script voer je uit in de head van je pagina en ziedaar: een stylesheet wat alleen gelezen wordt door browsers die JavaScript ondersteunen. Voor iets meer uitleg over waarom je de document.write methode zou gebruiken kun je op quirksmode.org lezen wat Peter-Paul Koch erover te zeggen heeft, onder het kopje ‘The single correct use of document.write’.

Samenvattend

We hebben nu dus een flink raamwerk staan waar we onze website mee aftrappen. Even samenvatten:

• In de head van onze pagina linken we op de normale manier twee stylesheets: ‘master.css’ en ‘print.css’
• In de ‘master.css’ importeren we alle stylesheets die we door de hele website heen willen gebruiken.
• In de head van onze pagina linken we binnen conditional comments stylesheets die specifiek zijn voor IE6 en IE7 en als je wilt ook nog voor IE5.x
• In de head van onze pagina linken we via document.write het stylesheet ‘js-styles.css’ dat we alleen willen gebruiken in combinatie met JavaScript.

Tot slot wil ik nog even benadrukken dat je zelf moet zoeken naar jouw ideale samenstelling van een CSS-framework. Hierboven beschrijf ik mijn manier, maar er leiden natuurlijk vele wegen naar Rome. Download Blueprint en ga aan de slag!

• Home
• Artikelen
• Colofon