In onze vorige blogpost hadden we het over HTML5 en de impact hiervan op ons huidig werk. Terwijl HTML5 vooral meer betekenis zal toevoegen aan onze webpagina’s, zal CSS3 ervoor zorgen dat we Photoshop heel wat minder vaak moeten opstarten om eenvoudige en veelvoorkomende effecten te bereiken in onze webpagina’s.

Denk maar eens aan het implementeren van enkele eenvoudige ronde hoeken, dit kon tot nu toe nooit of moeilijk zonder onze favoriete Adobe-telg. Of hoe vaak heb je de hulp van Photoshop al niet moeten inroepen om een eenvoudig schaduweffect te plaatsen rond een div? Wij in ieder geval al veel te vaak. Daarom zijn we ook erg enthousiast over de nieuwigheden die CSS3 ons zal brengen.

We zetten in dit artikel de leukste en handigste CSS3-properties op een rijtje, maar eerst is een kort woordje uitleg over de ondersteuning van CSS3 in de verschillende browsers op zijn plaats.

Kan ik CSS3 zomaar gebruiken in mijn huidige ontwerpen?

Het antwoord is ja, maar ... niet alle browsers ondersteunen momenteel alle nieuwe CSS3 properties. Internet Explorer spant zoals de traditie het vereist de kroon en ondersteunt zelfs in versie 8 geen enkele van de door ons gebruikte CSS3-eigenschappen. De beste ondersteuning is er in Firefox (3.5+) en recente webkit browsers zoals Safari en Chrome.

Concreet wil dit zeggen dat je CSS3 mag gebruiken in je webpagina’s, maar dat dit enkel van toepassing zal zijn op de meest recente browers. Bovendien kan je niet zomaar gebruik maken van de “echte” CSS3-tags aangezien deze nog niet officieel bestaan, het zijn enkel zogenaamde voorlopige recommendations. Eigenschap border-radius is zo één van die recommendations die het wellicht zullen halen in de finale versie van CSS3, maar die momenteel nog steeds kunnen wijzigen.

Firefox en Webkitbrowsers ondersteunen de eigenschap reeds op hun eigen manier, maar ze moet wel aangeroepen worden met een browserspecifieke prefix.

Voor Firefox wil dit zeggen:

Voor Webkit browsers:

Merk op dat we prefix -moz- hebben toegevoegd voor Firefox en -webkit- voor Safari en Chrome.

Ook Internet Explorer beschikt over een eigen prefix (-ms-), net zoals Opera ( -o- ) en Konqueror ( -khtml- ). Meer over deze vendor-specifieke extensies kan u lezen op css3.info en op Sitepoint.

Ronde hoeken met CSS

Eén van onze favoriete CSS3-properties is zonder twijfel border-radius. Hiermee kan je zonder moeite ronde hoeken op een HTML-element plaatsen.

Twitter.com was een van de eerste grote online spelers die deze eigenschap gebruikte.

Text Shadow en Letterpress-effect

Niet echt nieuw in CSS3, maar toch een eigenschap die pas sinds kort sterk opkomt is text-shadow. Deze eigenschap maakt het mogelijk schaduw onder teksten te plaatsen. Erg subtiele schaduweffecten zorgen ervoor dat je een zogenaamd letterpress-effect kan verkrijgen zonder dat je hiervoor Photoshop moet gebruiken.

In Solidshops.com gebruiken we érg subtiel deze eigenschap reeds. Let op de subtiele lichte schaduw (slechts één pixel) onder de groene tekst van onze succesboodschap.

Aangezien het een eigenschap is die eigenlijk al sinds CSS2 bestaat - maar die door weinig browsers werd ondersteund - moet je hier geen vendorspecifieke prefix meegeven.

CSS Gradients

CSS Gradients is een feature waar we erg hard naar uit kijken. Jammer genoeg ondersteunt op het moment van schrijven enkel Safari 4 deze eigenschap. Wie wil kan hier zelf CSS Gradients genereren. Aangezien de stijlregel op zich redelijk complex is kan het handig zijn deze te genereren in plaats van hem zelf te schrijven.

Box Shadow

Met box-shadow kunnen we schaduw genereren onder onze HTML-elementen. Hoewel het een erg handige eigenschap is, bleek dit onze interface van Solidshops.com erg te vertragen. Wellicht gaat het om een tijdelijk probleempje, maar voor ons was het een reden om de eigenschap nog niet op te nemen in ons eindproduct.

Conclusie

CSS3 is iets om als webdesigner naar uit te kijken. Hoewel het nog lang zal duren vooraleer alle browsers volledige support zullen kennen, kan je nu toch al langzamerhand de nieuwe eigenschappen toevoegen aan je ontwerpen. Weliswaar zullen enkel bezoekers met een recente browser kunnen genieten van deze vernieuwingen terwijl oudere browsers je pagina zoals vroeger te zien zullen krijgen.

Let bovendien op: de CSS3-eigenschappen met hun vendor-specifieke prefixen valideren niet in de W3-validator! Pas CSS3 dus pas toe nadat je je volledig afgewerkte CSS2-stylesheet hebt gevalideerd.

Happy coding!

Extra informatie en bronnen

GoodBytes: Web design trends en toekomst (deel 1 van 2): HTML5
Smashing Magazine: Push your design into the future with CSS3
Carsonified: 30 Essential CSS3 resources
Web Resources Depot: HTML5 en CSS3 cheat sheets