Scriptorama.nl

Na het voorstel van Daniel Glazman en David Hyatt voor CSS variabelen, heeft David Hyatt met enkele collega's van Apple nog 3 voorstellen tot uitbreiding van CSS standaard gepubliceerd, namelijk: Transitions, Animation en Transforms.

CSS Transforms

CSS Transforms zouden je in staat stellen om simpele en complexere transformaties toe te passen op block-level elementen. Denk hierbij aan functies als rotate, skew, translate en matrix.

Op zichzelf zijn deze functies niet bijzonder handig, hooguit leuk voor een gimmick of wat. Maar wanneer je het combineert met Javascript en CSS Transitions kun je hier erg leuke animaties mee maken.

Deze functionaliteit zit voor een groot deel al in Safari 3.1 (ook beschikbaar voor Windows), al zijn alle CSS properties die dit voorstel beschrijft dan nog netjes geprefixed met -webkit.

Bekijk een voorbeeld van CSS Transforms (Safari 3.1 vereist).

CSS Transitions

Het idee achter CSS Transitions is dat je controle krijgt over de snelheid en verloop waarmee een CSS eigenschap een nieuwe waarde krijgt. Om aan te geven dat een wijziging van de opacity eigenschap 2 seconden moet duren, zou je de volgende CSS code gebruiken:

Op het moment dat je de opacity waarde zou wijzigen, bijvoorbeeld via Javascript maar ook bijvoorbeeld met de CSS pseudoclass :hover, dan wordt gedurende 2 seconden de opacity waarde verandert totdat de doelwaarde bereikt is. Op die manier krijg je een manier vloeiende overgang in plaats van een plotselinge overgang.

Net als CSS Transforms zijn CSS Transitions ook al te gebruiken in Safari 3.1 waarbij alle CSS properties nog geprefixed zijn met -webkit.

Bekijk een voorbeeld van CSS Transitions & CSS Transforms (Safari 3.1 vereist).

CSS Animations

Met CSS Animations definieer je keyframes waarin je het verloop van een animatie kan opgeven. Dit setje keyframes gebruik je dan als animatie. Zo kun je bijvoorbeeld een animatie die een div van links naar rechts schudt:

Conclusie

Het lijkt er op dat Apple een beetje haast krijgt met het ontwikkelen van nieuwe, nog niet gestandardiseerde, functionaliteit voor de webbrowser. Buiten deze 3 voorstellen voor uitbreiding van de CSS standaard heeft het WebKit team namelijk recentelijk ook nog implementaties van CSS Gradients en CSS Canvas drawing opgeleverd.

Het is wat mij betreft een goed iets dat Apple bezig is met dergelijke functionaliteit, vooral ook omdat ze het proberen te standardiseren. Sure, een hoop van deze functionaliteit is beschikbaar via Javascript libraries maar die vereisen een initiele download en hebben tevens geen mogelijkheid tot hardware acceleratie, iets wat de browser zelf wel kan implementeren.

Of de voorstellen uiteindelijk ook geaccepteerd worden als uitbreiding op de CSS standaard is natuurlijk nog maar de vraag, maar het heeft in elk geval de potentie om het werk van de frontend developer een stukje makkelijker en leuker te maken.