CSS

LET OP! Dit artikel staat op onze ToDo lijst. Dit wil zeggen dat de auteurs de informatie al wel wilden plaatsen, maar dat het artikel nog vertaald dient te worden en/of dat er dode/verkeerde links in staan. Uiteraard kan iedereen het artikel bewerken en dus complementeren. Zie ook de ToDo Instructie.

==Inleiding==

Cascading Style Sheets (afgekort tot CSS) is een techniek voor de stijl (vormgeving) van webpagina's. De informatie over de vormgeving wordt toegevoegd aan de HTML van het document. Die informatie kan in het document zelf staan, maar ook in een extern document dat wordt geïmporteerd. Een dergelijk apart geïmporteerd document wordt ook wel stylesheet genoemd.

Een belangrijke reden voor de introductie van Cascading Style Sheets is om de vormgeving van webpagina's te standaardiseren, zodat verschillende webbrowsers dezelfde pagina op dezelfde wijze aan de gebruiker tonen. Het World Wide Web Consortium heeft daartoe de standaard vastgelegd. De vastgelegde standaard is in de loop van de jaren uitgebreid. De oorspronkelijke standaard staat bekend als CSS1. Latere uitbreidingen staan bekend als CSS2 en CSS3. Deze laatste uitbreiding (CSS3) is nog in ontwikkeling en is als zodanig geen officiële standaard.

Moderne browsers ondersteunen CSS1 inmiddels volledig. De ondersteuning voor CSS2 is minder. Omdat CSS3 nog geen officiële standaard is, is daar slechts experimentele ondersteuning voor. De meest gebruikte browser, Microsoft Internet Explorer (versie 6.0) wordt bekritiseerd omdat het onvoldoende ondersteuning van CSS2 biedt. Begin 2005 heeft Microsoft een nieuwe versie van Internet Explorer (versie 7) aangekondigd. Microsoft heeft echter nog geen duidelijkheid gegeven over verbetering van de ondersteuning voor CSS2.

Inhoud 1 Aspecten van stijl en overerving 2 Klassen 3 Prioriteit 4 Geschiedenis van CSS 5 Ondersteuning van CSS 6 Externe links

Aspecten van stijl en overerving

Met Casading Style Sheets kan de vormgeving van elk element in een webpagina worden bepaald. Een element van een webpagina wordt gedefinieerd door het gebruik van een HTML tag. De term cascading geeft aan dat de stijl van elementen Overerving vertoont: elk element heeft neemt de stijl over van zijn parent element, tenzij er een eigen stijl voor dat element is gegeven. Elke webbrowser heeft een ingebouwde stylesheet die de vormgeving van alle elementen bepaalt als er geen stylesheets aan een document worden meegegeven.

Een stijl bestaat uit een aantal aspecten zoals lettertype en voor- en achtergrondkleur. Ook breedte van kantlijnen, de horizontale en verticale positie, de zichtbaarheid, de transparantie, of een element boven of onder een ander element ligt en vele andere aspekten kunnen in een stylesheet worden aangegeven.

Elk aspect van de stijl wordt onafhankelijk overgeërfd door child elementen in een webpagina. Daarom hoeven alleen de afwijkende aspekten van een stijl te worden aangegeven. Als er in de stijl een lettertype wordt aangegeven voor het hele document, dan wordt dat lettertype in het hele document gebruikt en hoeft het niet voor elk element apart te worden te worden aangegeven.

Niet alle aspecten van een stijl erven over. Bijvoorbeeld de breedte en hoogte van een element erven niet over. Als een element een box vormt met gespecificeerde breedte, dan refereert een relatieve aanduiding voor breedte van child elementen aan de breedte van de box. Als de breedte van een tabel op 100 pixels is gezet en een cel in die tabel heeft breedte 25%, dan betekent dat 25% van 100 pixels.

Klassen

De klasse van een HTML element wordt aangegeven door de naam van de tag. Het is echter mogelijk om aan een tag een klasse toe te voegen (class="verzonnen_klassenaam"), waardoor het element de stijl van de corresponderende klasse in het stylesheet overneemt. De aspecten van stijl die niet in deze corresponderende klasse worden aangegeven, erft het element echter nog steeds van het parent element of van de tag klasse.

CSS kent ook pseudoklassen. Daarmee wordt aangegeven dat de stijl van een element afhankelijk is van een status. Een bekende pseudoklasse is de status van een link, de tekst van een link kan een andere kleur hebben als het betreffende document recent is bekeken. Een andere pseudoklasse is de hover waardoor de stijl van een element anders wordt als de muis in het element staat.

Prioriteit

Omdat er verschillende manieren zijn om een stijl aan te geven, is de prioriteit hiervan expliciet geregeld. Hieronder staat de prioriteit aangegeven (een hogere prioriteit heeft voorrang over een lagere prioriteit). Elk aspekt van stijl wordt daarbij afzonderlijk bekeken.

1. stijl aangegeven in de tag van het element.
2. stijl volgens de naam van de class in de tag.
3. stijl volgens de naam van de tag (aspekten van stijl die niet expliciet zijn aangegeven worden bepaald door de ingebouwde stylesheet in de browser).
4. stijl van het parent element.

Geschiedenis van CSS

Vanaf het begin van het World Wide Web heeft elke browser zijn eigen interne stylesheet gehad, die er voor zorgde dat de tags in een document werden geïnterpreteerd. Het concept van cascading style sheets werd in 1994 voorgesteld door de Noor Håkon Wium Lie. Hij besloot samen te werken met de Nederlander Bert Bos die in die tijd werkte aan een eigen browser (Argo) die gebruik maakte van stylesheets.

Het voorstel werd door Håkon Wium Lie gepresenteerd op de "Mosaic and the Web" conferentie in Chicago en samen met Bert Bos, nogmaals in 1995. In die tijd was het W3C in oprichting en organiseerde een project om tot een standaard voor CSS te komen. In december 1996 werd de CSS1 aanbeveling gepubliceerd. In 1997 begon een werkgroep van de W3C aan uitbreiding van de specificatie. Dit resulteerde in de CSS2 aanbeveling, gepubliceerd mei 1998. Een aanpassing van CSS2 (CSS2 revisie één, CSS2.1 genoemd) wijzigde delen van de CSS2 standaard, onder anderen werden enkele nieuwe waarden toegevoegd, en niet-geïmplementeerde delen uit de standaard verwijderd. Een verdere uitbreiding van CSS tot CSS3 is in ontwikkeling bij het W3C.

Ondersteuning van CSS

Hoewel de CSS1 aanbeveling in 1996 werd gepubliceerd, duurde het tot 2000 voordat er een browser beschikbaar kwam die deze specificatie volledig ondersteunde. De eerste browser die deze ondersteuning bood was Internet Explorer 5.0 voor de Mac. Andere browsers volgden toen echter snel.

Op dit moment is er geen enkele browser die CSS2 volledig ondersteunt. De beste ondersteuning wordt op dit moment geboden door de "Presto" engine (Opera browser), op korte afstand gevolgd door browsers gebaseerd op de "Gecko" engine (ontwikkeld door Mozilla), en de "KHTML" engine (o.a. gebruikt in de Safari en Konqueror browser). CSS2.1 kent wel een volledige implementatie, in de Opera web browser.

De ondersteuning voor CSS2 van Internet Explorer is de minste van alle moderne browsers. Eén van de bekendste problemen van Internet Explorer op dit gebied staat bekend als de Internet Explorer box model bug. Volgens de CSS2 specificatie is de aangegeven breedte (width) van een element een maat voor de inhoud van het element (zonder de randen mee te rekenen). Internet Explorer interpreteert de breedte echter als externe breedte (dus met de randen meegerekend).

Externe links

• W3C CSS 1 aanbeveling (Engels)
• W3C CSS 2 aanbeveling (Engels)
• W3C CSS revisie 2.1 aanbeveling (Engels)
• W3C CSS3 voortgang (Engels)
• Quirksmode (Engels) website gewijd aan implementatie van CSS door verschillende browsers.
• CSS tutorial (Engels) w3schools.com

Een deel van de structuur en/of teksten op deze pagina is overgenomen van http://nl.wikipedia.org