CSS 3 en de prefixes

Door Jan-Willem Wubkes
De nieuwste versie van CSS (Cascading Style Sheets) is nog volop in ontwikkeling, maar dit betekent niet dat webdesigners de nieuwe functies en mogelijkheden nog niet kunnen gebruiken. Iedereen kan nu beginnen met de implementatie van CSS3 op zijn of haar website. CSS3 biedt onder andere de volgende nieuwe functies:

border-radius;
text-shadow;
box-shadow;
opacity.

Wanneer wel en wanneer niet gebruiken?

Het moge duidelijk zijn dat CSS3 nog niet door alle browsers wordt ondersteund. En browsers die dit wel doen ondersteunen waarschijnlijk niet alle nieuwe functies en mogelijkheden die CSS3 biedt. Hoe en wanneer kan je dan gebruik maken van CSS3 op je website? Laat ik eerst uitleggen in welke situaties CSS3 op dit moment perfect te gebruiken is op een website.
Op elke website heeft men (als het goed is) te maken met visuele ervaring. De visuele ervaring van een website kan opgedeeld worden in twee groepen:

– een kritieke groep;
– een niet-kritieke groep.

In de kritieke groep vallen zaken als gebruiksvriendelijkheid, toegankelijkheid en lay-out. Tot de niet-kritieke groep behoren onder andere interactie (hover, focus etc.), feedback en beweging.

Voor de zaken die in de kritieke groep vallen is het belangrijk om hetzelfde te functioneren in alle verschillende browsers. Deze groep moet dus cross-browser compatible zijn. Voor de niet-kritieke groep is het lang niet zo belangrijk om een gelijke ervaring te creëren in de verschillende browsers. Dit zijn dus perfecte mogelijkheden om CSS3 op toe te passen. Op deze manier kan men CSS3 nu al gebruiken om de interactie van een website te verrijken zonder dat men zich zorgen hoeft te maken dat essentiële elementen (toegankelijkheid, lay-out etc.) van de website worden aangetast.

Hoe CSS3 op een website gebruiken?

De CSS3 specificaties worden langzaam maar zeker in meerdere webbrowsers ondersteund. In de meeste gevallen betreft dit een experimentele ondersteuning. Wanneer de specificatie wordt geschreven en gedebatteerd bij het W3C, besluiten browsers om sommige eigenschappen toch te ondersteunen en de werking op deze manier te testen in de realiteit.

Vaak wordt er bij deze experimentele ondersteuning gebruikgemaakt van een zogenaamde ‘vendor prefix’. Elke browser heeft zijn eigen prefix. Browsers negeren dus prefixes die ze niet herkennen. De prefixes voor de verschillende browsers zijn als volgt:

WebKit -webkit-
Mozilla -moz-
Opera -o-
Konqueror -khtml-
Microsoft -ms-
Chrome -chrome-

Hoe vendor prefixes werken:

De werking van vendor prefixes zal ik uitleggen aan de hand van de border-radius property. Stel dat we de hoeken van een element rond willen maken met een radius van 15 pixels. Dan doen we dat zo:

.rounded {

-webkit-border-radius: 10px;

-moz-border-radius :10px;

border-radius: 10px;

}

In dit voorbeeld is gebruik gemaakt van een class, maar men kan dit natuurlijk ook toepassen op een id.

WebKit (de engine achter Safari en Chrome) en Gecko (de engine achter Firefox) browsers ondersteunen de eigenschap d.m.v. hun eigen vendor prefixes, terwijl Opera de eigenschap ondersteunt zonder een vendor prefix. Ook IE9 ondersteunt de border-radius zonder een vendor prefix.

Denk er wel aan om de eigenlijke CSS3 eigenschap (in dit geval ‘border-radius’) als laatst op te nemen in de declaratie. Op het moment dat een browser uiteindelijk de eigenschap implementeert overschrijft de echte CSS3 eigenschap de experimentele versie daarvan. Zo ben je er zeker van dat de uiteindelijke standaard ‘oppermachtig’ is.

Tot slot:

Komen vendor prefixes rommelig en omslachtig op je over? Denk er dan aan dat het een stuk minder rommelig is dan de code die meekomt met niet-CSS3 oplossingen. Bovendien zijn de prefixes gewoonlijk voorlopers van de uiteindelijke standaard. Een groot verschil dus met andere ‘hacks’ die ook ik heb gebruikt om cross-browser kwesties op te lossen.
Tip: hier vind je onder andere een overzicht van welke CSS3 eigenschappen worden ondersteund door welke browsers.
http://www.findmebyip.com/litmus/