Home > Aan de slag > Alles over CSS (Cascading Style Sheets)

Het W3C heeft CSS (Cascading Style Sheets) geïntroduceerd voor het vormgeven van een HTML-document. CSS kan gezien worden als een 'stijlsjabloon', waarmee de weergave van elementen in een browser kan worden bepaald. Met CSSkan bijvoorbeeld worden omschreven welke vorm, kleur en positie elementen als koppen, paragrafen en menu's op een webpagina moeten hebben. Vaak wordt CSS in een apart bestand opgeslagen waarmee in één keer de vormgeving van de hele website kan worden beïnvloed.

Inhoudsopgave


Voordelen van het gebruik van CSS

CSS en de scheiding tussen structuur en vormgeving

Het gebruik van CSS draagt sterk bij aan de scheiding tussen structuur en vormgeving. De voordelen zijn:

  • Kortere laadtijd, lager verbruik van bandbreedte voor bezoeker en opdrachtgever.
    Een gescheiden CSS-bestand kan in de browser van de bezoeker worden gecached. Daardoor hoeft deze maar één keer geladen te worden. Als HTML-pagina's niet langer markup voor de vormgeving bevatten, zijn ze kleiner in omvang (minder code). Dit scheelt in het verbruik van bandbreedte voor zowel de bezoeker als de opdrachtgever. Het effect voor de bezoeker: pagina's laden merkbaar sneller.
  • Bouw en onderhoud worden gemakkelijker.
    De scheiding tussen structuur en vormgeving maakt de inhoud overzichtelijk en de structuur eenvoudig. Dit vergemakkelijkt de bouw en het onderhoud door webontwikkelaars en contentbeheerders.
  • Efficiëntie en tijdswinst in het ontwikkelproces.
    Een gescheiden CSS-bestand maakt aanpassingen in de vormgeving van de hele site eenvoudig en efficiënt. Vaak zijn meerdere ontwikkelaars verantwoordelijk voor de bouw van een website. Door het scheidingsprincipe kunnen ontwikkelaars grotendeels onafhankelijk van elkaar aan de site werken. Dit bespoedigt het productieproces en vermindert de kans op onvolkomenheden.
  • Een gescheiden CSS-bestand draagt bij aan de consistentie in vormgeving.
    Deze consistentie is belangrijk voor de herkenbaarheid en het gebruik van de site. Een inconsistent uiterlijk wekt bij de bezoeker een slordige, onbetrouwbare indruk.

CSS en beschrijvende markup

CSS komt het beste tot zijn recht in combinatie met beschrijvende markup.

  • De combinatie van CSS en beschrijvende markup (HTML) maakt het mogelijk de pagina te gebruiken zonder CSS.
    Doordat de informatie op de pagina goed gestructureerd is met beschrijvende markup is deze ook nog begrijpelijk zonder de vormgeving die met CSS aan de pagina wordt gegeven. Waarom is dit nuttig?
    • Oude browsers ondersteunen soms geen CSS.
    • Zoek-spiders en gebruikers van schermleesprogramma's en brailleleesregels nemen CSS niet visueel waar. Wanneer beschrijvende markup is gebruikt weten deze gebruikers toch dat iets bijvoorbeeld een kopregel is, zonder dat zij dit uit de vormgeving opmaken. Wanneer alleen in de vormgeving is aangegeven dat iets een kopregel is (door een grote letter bijvoorbeeld), gaat deze informatie verloren als de CSS niet wordt gezien.
  • De in het document gebruikte (beschrijvende) markup heeft al een standaard uiterlijk. Met CSS hoeft op dit uiterlijk slechts te worden gevarieerd.

Mogelijkheden voor webontwikkelaars en bezoekers

  • CSS geeft de webontwikkelaar een breder scala aan vormgevingsmogelijkheden dan HTML-markup.
    Markup voor het vormgeven van teksten is zeer beperkt en achterhaald. Bovendien leidt deze tot problemen met toegankelijkheid, uitwisselbaarheid, bouw en onderhoud.
  • CSS geeft de bezoeker van de site controle over hoe zij sites willen zien.
    Via zogenaamde User Style Sheets kan een bezoeker in zijn browser visuele aspecten van een site overschrijven. Naar voorkeur kan hij bijvoorbeeld een leesbaarder contrast of grotere lettertypes instellen. Webontwikkelaars die CSS (en niet markup) gebruiken voor de vormgeving van een website, maken deze aanpassing door de bezoeker gemakkelijker.

Continuïteit en uitwisselbaarheid

  • De ondersteuning van CSS door browsers is op dit moment redelijk tot goed.
    Basisregels voor vormgeving, gedefinieerd in CSS level-1 genieten om dit moment nagenoeg 100 procent ondersteuning van moderne browsers. Regels voor de complete lay-out van een website worden gegeven in de CSS level-2 specificatie. Ondersteuning hiervoor door moderne browsers is redelijk. Ook oude browsers zonder ondersteuning voor CSS geven van toegang tot de site (mits de ontwikkelaar het gebruik van de site niet van CSS afhankelijk heeft gemaakt). CSS is dus ook 'backward compatible'.
  • Style Sheets hebben de toekomst.
    Markup voor het manipuleren van de vormgeving is door het W3C achterhaald verklaard. Het komt in huidige HTML-versies nauwelijks voor en is uitgesloten van opname in toekomstige markup-talen. Ondersteuning van CSS door browsers wordt daarentegen steeds beter.

Naar boven


Richtlijnen voor het gebruik van CSS

Webontwikkelaars moeten, waar mogelijk, structuur van vormgeving scheiden. Hen wordt daarom sterk aangeraden waar mogelijk CSS voor de vormgeving van een site te gebruiken. CSS moet zo veel mogelijk in gelinkte externe bestanden worden geplaatst. Dit wordt omschreven in de volgende webrichtlijnen:

  • R-pd. 1.1: Houd structuur en vormgeving gescheiden.
  • R-pd. 9.1: CSS dient in gelinkte bestanden geplaatst te worden en niet gemengd te worden met de HTML broncode.

Ook moeten webontwikkelaars er rekening mee houden dat pagina's nog steeds bruikbaar zijn wanneer CSS niet wordt ondersteund. (Dit betekent uiteraard niet dat de pagina's hetzelfde uiterlijk moeten hebben als wanneer CSS wél door de browser wordt ondersteund.). Deze eis is zowel in de webrichtlijnen als in de Web Content Accessibility Guidelines 1.0 vastgelegd:

  • IJkpunt 6.1: Organiseer documenten zo dat ze zonder style sheets gelezen kunnen worden.

Het verschil tussen CSS Level-1 en Level-2

CSS Level-1 bevat hoofdzakelijk basisregels voor de vormgeving van tekst en beeld. De CSS Level-2 specificatie is een uitbreiding op CSSLevel-1. CSS Level-2 bevat naast de regels van CSS Level-1 ook nog eens regels voor de lay-out. Via CSS Level-2 kan men hele blokken inhoud over het beeld verplaatsen.

CSS Level-3

De specificatie voor CSS Level-3 is op dit moment nog sterk in ontwikkeling. Ondersteuning voor deze nieuwe CSS-variant is nog niet optimaal.

Omdat regels die niet door browsers ondersteund worden, automatisch worden genegeerd, levert het op zichzelf geen problemen op om regels toe te passen uit de CSS Level-3 specificatie, of zelfs regels uit browserspecifieke CSS specificaties zoals die van Microsoft. Punt van aandacht is wel dat een brede ondersteuning hiervoor niet is gegarandeerd.

Omdat de CSS Level-3 specificatie nog in ontwikkeling is, en gezien het belang van het gebruik van open standaarden, wordt aangeraden alleen die onderdelen uit CSS Level-3 te gebruiken die door de meest gangbare browsers goed worden ondersteund.

Links en referenties

Naar boven


CSS-ondersteuning door browsers

Browserondersteuning voor CSS Level-1 is zeer goed; vrijwel alle moderne browsers bieden 100 procent ondersteuning. Webontwikkelaars moeten dus in elk geval gebruikmaken van de mogelijkheden van CSS Level-1.

Browserondersteuning voor CSS Level-2 is redelijk te noemen, maar kent voor enkele browsers gebreken, waardoor de drempel voor beginners meestal erg hoog is. Kennis en ervaring met deze gebreken zijn een vereiste voordat een webontwikkelaar besluit om een volledige CSS-lay-out op te zetten. Voor veel webontwikkelaars is dit een reden om vast te houden aan tabellen voor lay-out. Het gebruik van tabellen voor lay-out voor websites wordt echter afgeraden. Zie ook Tabellen voor lay-out.

Drie groepen browsers

Om de gebreken met ondersteuning voor CSS Level-2 te doorgronden, is begrip van het volgende model noodzakelijk. Browsers zijn met betrekking tot ondersteuning voor CSS in te delen in drie groepen.

  • Browsers die goede tot vrijwel volledige ondersteuning voor CSS bieden.
    Deze browsers vormen zelden een probleem voor webontwikkelaars die uitgebreid CSS willen toepassen. Browsers die in deze groep voorkomen zijn de moderne varianten van Firefox, Opera, Apple's Safari en Microsoft Internet Explorer vanaf versie 8.
  • Browsers die (gedeeltelijk) foutieve ondersteuning voor CSS bieden.
    Browsers in deze groep accepteren CSS, maar geven iets heel anders weer dan de webontwikkelaar - die CSS volgens de standaarden gebruikt - bedoelde. Deze groep browsers is de grootste veroorzaker van problemen. Browsers die tot deze groep behoren zijn onder andere Netscape Navigator 4 en alle versies 4 tot en met 7 van Microsoft Internet Explorer. De versies 6 en 7 van laatstgenoemde browser hebben nog steeds een significant marktaandeel.
  • Browsers die geen ondersteuning bieden voor CSS.
    Deze groep negeert CSS volledig en toont een kale, doch toegankelijke en bruikbare website. Omdat CSS van nature optioneel is, ontstaat hier geen probleem. Tot deze groep behoren oude browsers, zoek-spiders, alternatieve browsers, zoals brailleleesregels en tekstbrowsers, en browsers op mobiele apparaten met een klein scherm en geheugen, zoals mobiele telefoons, PDA's en palmtop computers

In de praktijk zijn de browsers uit de tweede groep een belangrijke bron van frustratie voor veel webontwikkelaars. Er gaan regelmatig stemmen op om niet langer rekening te houden met deze browsers. Geadviseerd wordt om bij een beslissing op dit punt eerst Yahoo's Graded Browser Support overzicht te raadplegen of de betreffende browsers (nog) op de A-lijst staan.

Browsers Style Sheets laten negeren

Er is echter veel mogelijk met CSS voor browsers in de tweede groep. Een veelgebruikte tactiek is om versie-4 browsers (Netscape Navigator 4 en Microsoft Internet Explorer 4) naar de derde groep te dwingen door het toepassen van technieken die deze browsers niet ondersteunen en die leiden tot het niet of gedeeltelijk laden van CSS-bestanden door deze browsers.

Links en referenties

CSS hacks

Ondersteuning vinden voor andere browsers in de tweede groep - Microsoft Internet Explorer 5 en 6 - is een proces van proberen en ervaring opdoen. Er zijn genoeg zogenaamde CSS-hacks te vinden, trucjes die gebaseerd zijn op de tekortkomingen in deze browsers, om ze om de tuin te leiden en elementen weer te geven zoals de webontwikkelaar dat bedoeld heeft.

Links en referenties

Alternatief voor hacks in Microsoft Internet Explorer: conditional comments

Het gebruik van CSS-hacks is niet vrij van gevaren. Het is nog onbekend hoe toekomstige browsers met hacks om zullen gaan. Mogelijk zullen webontwikkelaars de code van veel bestaande websites later moeten aanpassen om foutieve weergave in deze toekomstige browsers te voorkomen.

In geval van de meest gebruikte browser, Microsoft Internet Explorer, zijn conditional comments een bruikbaar alternatief voor het gebruik van CSS-hacks. Conditional comments bestaan uit een stuk code tussen (in de meeste gevallen) HTML comment-tags, dat door Internet Explorer wordt gelezen. Dit stukje code vertelt de browser te kijken naar zijn eigen versienummer, en afhankelijk hiervan een speciaal voor Internet Explorer (of Javascript, enzovoort) gemaakte stylesheet in te laden. In deze stylesheet kunnen alternatieve stijlen worden aangemaakt om te compenseren voor de weergavefouten in diverse versies van Internet Explorer.

Conditional comments kennen ook enkele problemen, bijvoorbeeld dat enkele variaties niet als valide HTML gelden. De keuze tussen het gebruik van hacks versus conditional comments is vaker een discussiepunt onder ontwikkelaars; de voor- en nadelen moeten zorgvuldig, per geval, worden afgewogen. Hierbij is uiteraard het voldoen aan de Webrichtlijnen van primair belang.

Onderstaande links bieden de geïnteresseerde ontwikkelaar meer gedetailleerde informatie over het gebruik van conditional comments.

Links en referenties

CSS gelaagd op browsercapaciteit

Een afzonderlijke trend die zich steeds vaker voordoet, is het met opzet gebruiken van geavanceerde CSS Level-2 regels die ondersteund worden door browsers in de eerste groep, maar niet door browsers in de tweede groep. Browsers in de tweede groep leveren visueel een minder indrukwekkend, maar nog steeds acceptabel resultaat. Sommige webontwikkelaars voegen hier nog technieken aan toe die, via omwegen, ondersteuning voor specifiek Microsoft Internet Explorer 5 en 6 alsnog mogelijk maakt.

Links en referenties

Naar boven


Het testen van CSS tijdens het bouwen

Het testen van CSS in webbrowsers

Een bewezen techniek voor het testen van CSS-effecten tijdens de bouw van een website, is het gebruik van een zogenaamde 'standards compliant' webbrowser; een webbrowser uit de eerste groep, zoals Mozilla, Firefox of Safari. Deze browsers tonen de visuele effecten van de CSS het meest consistent, dat wil zeggen: zoals ze eruit horen te zien. Als de CSS in deze browsers naar behoren functioneert, kan de webontwikkelaar daarna testen in browsers uit groep twee, bijvoorbeeld Microsoft Internet Explorer.

Gebruik de standaarden zoals ze bedoeld zijn en kijk of de browsers de standaard correct ondersteunen. Zorg anders voor een aanpassing die het gewenste gedrag oproept.

Achtergrondkleur en kaders voor het opsporen van CSS-problemen

Een methode om eenvoudig de oorzaak op te sporen van een inconsistente lay-out, is het met opzet toevoegen van opvallende achtergrondkleuren en kaders via de CSS background-color en border properties. Vervolgens kan men in de browser zien hoe bepaalde elementen elkaar overlappen, of hoe breed ze zijn.

Links en referenties

Het controleren van CSS-code via online diensten

Het W3C biedt een vrij te gebruiken online dienst aan die voor webontwikkelaars CSS-bestanden controleert. Het wordt daarmee eenvoudiger om fouten op te sporen.

Naar boven


CSS versus tabellen voor lay-out

In Tabellen voor lay-out wordt aangeraden de lay-out van websites te beïnvloeden met CSS. Veel webontwikkelaars beklagen zich over het feit dat het zo moeilijk is lay-out-effecten waar al jaren worden gebruikt te dupliceren met CSS.

Veel effecten zijn echter eenvoudiger te realiseren met CSS dan met tabel-markup, onder meer dankzij de display van CSS. Doordat deze stijlregels niet worden ondersteund door browsers als Microsoft Internet Explorer 6, wordt het beeld gewekt dat CSS zich niet kan meten met tabellen voor lay-out.

Voor het tonen van informatie in kolommen, zoals dat in tabellen gebeurt, zijn diverse alternatieve CSS-methodes voorhanden.

Links en referenties

Naar boven


CSS voor te printen websites

CSS leent zich uitstekend voor het opzetten van printervriendelijke websites. Veel websites bieden de bezoeker een link naar een aparte website voor het printen ervan. Hier is de informatie van de site in platte tekst te vinden en ontbreken elementen als navigatie en decoratie. Met CSS is zo'n afzonderlijke site niet nodig. De webontwikkelaar kan stijlregels toepassen die alleen gelden wanneer de pagina wordt uitgeprint.

Deze regels kunnen ervoor zorgen dat bijvoorbeeld…

  • …achtergrondafbeeldingen en -kleuren vervangen worden door een witte kleur. Dit bespaart de bezoeker inkt.
  • …voor geprinte pagina's irrelevante elementen - zoals navigatie - niet worden getoond.
  • …voor de te printen tekst bepaalde lettertypes worden gebruikt. Vaak wordt een schreef-lettertype prettig leesbaar gevonden op geprinte pagina's.

Links en referenties

Naar boven