CSS3: Ronde hoeken en rgba kleuren

Om eens te zien wat de nieuwe mogelijkheden zijn met CSS3, heb ik een van mijn speeltuin projecten er mee aangekleed. De collectie van foto’s die de aanleg van Maasvlakte 2 en de veranderingen op en rond de Maasvlakte laten zien, vond ik een prima ondergrond om de nieuwe mogelijkheden op uit te proberen. Het meest benieuwd was ik naar de werking van de ronde hoeken en de RGBa kleuren met het extra alfa kanaal voor transparantie.

Ronde hoeken

De kwaliteit van de ronde hoeken is erg goed. De hoeken zien er altijd erg scherp uit. Zowel in Firefox als in Safari. In gebruik zijn er wel wat stekeligheden. Zo heeft elke browser zijn eigen notatie wijze. Dat zorgt voor veel onnodige CSS regels.

RGBa

Zolang ik mij kan heugen gebruik ik in CSS voor kleurnotaties de hexadecimale notatie wijze: #FF00FF;. Het is dus even wennen om dan opeens RGB waarden te gebruiken. Ik kan nog niet direct voorspellen wat een wijziging in een RGB kleur waarde doet. Met de hexadecimale notatie lukt dat aardig. Maar het extra alfa kanaal brengt nieuwe mogelijkheden. Zo kun je transparante achtergronden gebruiken, zonder dat je afbeeldingen (PNG) nodig hebt. En dat is weer prettig met het oog op dataverkeer. De scheiding van presentatie en gegevens wordt hiermee nog meer duidelijk.

Schaduw

Schaduw bestond al langer in enkele browsers, maar de ondersteuning wordt beter. Naast schaduw op teksten, is het ook mogelijk om op (blok)elementen schaduw te verkrijgen.

Nog lang wachten op ondersteuning in IE?

Nog altijd is Internet Explorer de meest gebruikte webbrowser en die ondersteund al dit leuks niet. Is dat erg? Niet noodzakelijk. Je kunt er namelijk voor kiezen om al deze leuke dingen alleen voor de overige browsers te gebruiken en voor IE een work-around te verzinnen. De vraag is natuurlijk ook hier weer wanneer IE CSS3 (gedeeltelijk) gaat ondersteunen.