Se Star Wars-intro med bare HTML og CSS

Ikke engang JavaScript var nødvendig for å lage animasjonen.

Del

4. des. 2009 - 14:44

Kombinasjonen av HTML og CSS gir webutviklere stadig mer spillerom etter hvert som standardene videreutvikles og nyhetene implementeres i nettlesere.

Et godt et eksempel på dette er et arbeid gjort av webutvikleren Guillermo Esteves fra Venezuela. Han har, kun ved hjelp av nyere HTML- og CSS-egenskaper, laget en ganske fin utgave av introen til Star Wars-filmene.

For å få til dette har Esteves tatt i bruk HTML5-funksjonalitet som nedlastbare webfonter og audio-elementet, samt CSS3-funksjonalitet for animasjoner og overganger.

Kun på ett sted har Esteves brukt JavaScript, nemlig til å forsinke avspillingen av musikken.

Dessverre fungerer introen bare helt korrekt i nettlesere basert på en temmelig ny utgave av renderingmotoren WebKit. Dette inkluderer ifølge Esteves først og fremst Safari 4 på Mac OS X Snow Leopard. Men det er mulig å få spilt av animasjonen også Safari 4 på Windows og i nyere versjoner av Google Chrome, men det ser ikke like bra ut.

Årsaken til at animasjonen ikke fungerer så godt (eller i det hele tatt) i de fleste nettlesere, er manglende eller mangelfull støtte for disse CSS3-modulene. Både CSS3 Animations- og CSS3 Transitions-modulene har blitt utformet og foreslått overfor W3C av WebKit-prosjektet med Apple-ansatte som dagens forfattere, så det bør ikke overraske noen at WebKit har kommet lengst med implementeringen.

Denne oversikten i Wikipedia viser at det i tillegg til WebKit, antyder at det kun er Mozilla som har begynt å inkludere en viss støtte for CSS3-overganger i nettleseren. Men også Opera Software har delvis støtte for dette i presentasjonsmotoren Presto 2.3, som brukes i noen få produkter.

De som ikke har Mac OS X Snow Leopard og som ønsker å se Star Wars-animasjonen, kan ta en titt på videoen nedenfor.