CSS 3 Preview

Via del.icio.us kwam ik op de preview site van CSS3 info. Op deze site staat een preview pagina vol nieuwe functies die in de derde versie van ons geliefde styling taaltje beschikbaar zullen zijn. Hopelijk gaan alle browsers hier ook aan meedoen (ik noem geen namen – kuch). In het kort even de highlights.

Borders
border-color – met verschillende kleuren een gradient samenstellen
border-image – voor alle vier borders (top/right/bottom/left) afbeeldingen instellen als border
border-radius – ’rounded corners’ (errug leuk)

Tekst effecten
text-shadow – tekst schaduwen. Lijkt een beetje op de headers op geenstijl.nl (hier wordt echter gebruik gemaakt van javascript)

Backgrounds
background-origin & background-clip – met background-origin kun je bepalen waar de achtergrond wordt gepositioneerd. Moet deze bijvoorbeeld beginnen bij de border, de padding of in het gedeelte van de box waar de content komt. Background-clip is een soort van overflow: hidden; property voor de background. Deze kan ook weer op ingesteld worden op border, padding of content.
background-size – mogelijkheid tot het aangeven hoe groot een background moet worden. Dit heeft hetzelfde effect als de width & height van een gewone afbeelding.

User-Interface
box-sizing – handige feature waarmee je aangeeft of de border bijvoorbeeld aan de binnenkant van de box moet worden gerendered en niet aan de normale buitenkant.

Kleuren
HSLA colors – mogelijkheid tot het geven van een opacity aan een hsl kleur (wat overigens een alternatief is voor rgb)
opacity – opacity meegeven aan kleuren
RGBA colors – zie hierboven, alleen dan met rgb kleuren

Verder zijn er nog een aantal nieuwe selectors bijgekomen die het mogelijkmaken om te zoeken op prefixen en suffixen. Erg interessante ontwikkelingen dus. Zelf vermoed ik echter dat het nog wel jaren zal duren voordat dit alles mainstream wordt. Alleen de onbekende opensource browser webkit ondersteund (bijna) alle nieuwe css3 mogelijkheden. Daarnaast ondersteunen Safari en Firefox (alpha 3 builds) ook al een aantal nieuwe features. Er is nu echter al een groot probleem aan het onstaan: veel features kunnen alleen met browser-specifieke tags worden gebruikt: bijvoorbeeld moz-opacity, webkit-opacity, etc. Hopelijk wordt dit gewoon gestandaardiseerd naar gewoon opacity.

Ik kijk er in ieder geval naar uit om in de toekomst gebruik te maken van enkele van deze nieuwe features.

Bron: CSS3.info

/edit
Webkit blijkt helemaal niet onbekend te zijn, maar de engine die wordt gebruikt in de nieuwste safari browsers en andere (KHTML) browsers.