CSS3 och HTML5 kommer att innebära ett stort framsteg för webben i stort och dessutom göra livet som webbdesigner mycket trevligare.
Några av de många nyheterna i HTML5:
- Data kan lagras lokalt i en databas, vilket gör att du även utan uppkoppling kan komma åt och redigera t ex Google Docs-dokument (Google har en egen lösning för detta redan Google Gears).
- Videouppspelning direkt i webbläsaren utan plugins som Flash, Silverlight eller annat.
- Formatera text (t ex fetstil, kursiv, färg) utan tunga javascriptlösningar som idag krävs för att skapa textredigering i stil med den som används när du t ex redigerar inlägg i WordPress.
- Canvas-element gör det möjligt att skapa avancerade gränssnitt utan t ex Flash eller Silverlight.
Som du kan se kommer många av de saker som idag kräver tunga och plattformsberoende plugins finnas direkt i alla webbläsare.
Nyheterna i CSS3 gör att ännu större del av formen kan placeras direkt i CSS istället för i bilder. Det blir på så sätt mindre data att ladda och mycket enklare att anpassa sidan för olika kanaler (storlekar på datorskärmar, mobiltelefoner, utskrift mm).
Några av nyheterna i CSS3:
- Skuggor. Det går fint att lägga till skuggor på text eller andra objekt direkt i koden.
- Rundade hörn. Det krävs inte längre ett gäng bilder för att göra en ruta med rundade hörn.
- Opacitet. Äntligen en enhetlig standard för att göra färger och objekt halvtransparanta.
- Övertoningar. Tona från en färg till en annan utan att blanda in Photoshop.
- Fler bakgrundsbilder. Varje objekt kan innehålla fler än en bakgrundsbild.
- Kolumner. Webbläsaren klarar automatiskt av att hantera kolumner, inget mer manuellt brytande av flödande text.
Trots att standarderna inte är spikade än så har de stora webbläsarna börjat implementera många av komponenterna i både CSS3 och HTML5. Undantaget är (som vanligt?) Microsoft Internet Explorer som har väldigt svagt stöd på båda fronterna i version 8. Som tur är är Explorer 9 på god väg och där lovar Microsoft att istället ligga i framkant (kolla in betan här).
Eftersom det fortfarande är många webbläsare som inte stödjer en stor del av de nya standarderna så kan det vara bra att använda dem med måtta. Använder du rundade hörn och skuggor på vissa objekt på din webbsida får du leva med att de blir kantiga och skugglösa för en ganska stor del av besökarna än så länge.
Det finns massor av roliga och bra exempel på nätet vad de nya standarderna kan prestera. Här följer ett par (många av dessa kräver Apple Safari eller Google Chrome för att fungera i dagsläget – ett perfekt läge att prova en ny webbläsare om den du kör idag inte har hängt med i utvecklingen 😉 ):
- Jeff Batterton har ”ritat” en Iphone med hjälp av CSS3, helt utan bilder.
- Apple har i sin kamp för HTML5 tagit fram ett antal exempel på hur öppna webbstandarder kan ersätta t ex Flash.
- Spelbar demo av det klassiska spelet Wolfenstein 3D.
- Fallande löv
- Tweets flyger omkring som bollar (kan inte förklara, klicka på dem för att förstå ;-)).
- Sketchpad knäcker MS Paint vilken dag som helst.
Hur mycket använder du dig av HTML5 och/eller CSS3 idag, och till vad?
Använder det så mycket jag kan till allt det är möjligt, förutsatt att det fungerar i tillräckligt moderna webbläsare. Personligen anser jag det vara en acceptabel förlust att exempelvis IE-användare får se mina hemsidor lite fyrkantigare än i andra webbläsare, dels för att jag är otroligt bekväm av mig och inte är sugen på att lägga ner den extra tid (och kluddigare kod) som krävs för att även dessa skall få runda hörn.
Likväl är jag otroligt sugen på att fler webbläsare tar upp box-skuggor eftersom det är ett jäkla meck att få till det snyggt på sidramar.
Det skulle vara kul om man kunde fixat till något slags height-attribut så att man kan göra en tvåkolumns-layout med en olikfärgad högerkolumn och låta dessa vara lika långa oberoende innehåll i vardera kolumn. Börjar ju kännas fånigt att behöva fulfixa sånt där.
@Marcus
Läs artikeln på http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/
Kolla speciellt under punkt 9.
Om man använder sections och aside i CSS3 för att markera upp huvudinnehållet och en sidoyta kan man styla som att fungera som tabeller (oroa dig inte, det ÄR inte tabeller men dom fungerar likadant vilket gör att man får samma höjd på två celler) genom display: table och display: table-cell
Då slipper man använda t.ex. faux fix osv.
”Formatera text (t ex fetstil, kursiv, färg) ” – Det har man väl kunnat i alla tider utan tunga Javascript?
Alldeles riktigt. Det blev lite väl mycket att läsa mellan raderna där… men nu så är det förtydligat vad vi menade 🙂