CSS 3 – del 1 – Introduktion

Introduktion till CSS3

Stilmallen – Cascading Style Sheet – är ett kraftfullt verktyg i vårt hemsidebyggande. Att skilja på struktur (HTML) och presentation (CSS) skapar också de bästa förutsättningarna för en standardisering med korrekt syntax. De flesta använder idag specifikationen CSS level 2.1 som stöds av de flesta webbläsare, om än i vissa fall med hacks och/eller Conditional Comments för att Internet Explorer ska kunna implementera koderna. Dock är CSS3 på stark frammarsch. Det är egentligen inte så konstigt utan en logisk progress. I takt med nya och mer avancerade applikationer och ett ökat behov av att utveckla webben, exempelvis HTML5 och CSS3, så följer CSS samma fotspår. CSS3 kan man därför förmoda vara den kommande, och av W3C rekommenderade, framtida webbstandarden.

Problemet Internet Explorer

I artikeln Flera skäl till att välja bort IE (6) tog jag upp cssproblematiken med denna webbläsare, företrädesvis då med version 6.0. Trots allt så är det till dagens datum 09-11-08 fortfarande hela 37.5 % som använder Internet Explorer enligt W3C fördelat enligt följande: IE6 10.6%, IE7 14.1 %, IE8 12.8%. Antalet kan emellertid variera per webbplats. Ändock så finns det ett cssproblem knutet till IE och i synnerhet kring CSS3.

Vad är då CSS3?

Man kan säga att CSS3 handlar om att bryta ned CSS till mindre moduler, exempelvis följande:

  1. Texteffekter
  2. Listmoduler
  3. Borders
  4. Bakgrunder
  5. Färger
  6. Box model
  7. User interface
  8. Flerkolumns layout

Det här innebär i sin tur att du bland annat kan göra skuggor på olika element, exempelvis på boxar och/eller fonten. Du kan göra rundade hörn utan bilder (en ännu mer enklare variant än runda hörn utan bilder enbart med css). Du kan skapa flera bakgrundslager på ett och samma element och att du själv kan få välja vilken font vill använda utan en massa javascript. Kort och gott så finns det en massa spännande och roliga effekter med CSS3. Chris Hanscom har på uppdrag av SM gjort en bra och överskådlig CSS3 cheat sheet över modulerna. Det går utmärkt att spara denna.

CSS3 kompatibla webbläsare

I min artikel Flera skäl till att välja bort IE (6) gjorde jag en simpel test. Först testade jag med Firefox och fick detta resultat: From the 43 selectors 43 have passed, 0 are buggy and 0 are unsupported (Passed 578 out of 578 tests). Därefter testade jag med IE8 och här är det resultatet: From the 43 selectors 22 have passed, 1 are buggy and 20 are unsupported (Passed 349 out of 578 tests). Att exempelvis varken IE6 eller IE7 kan komma ifråga beträffande CSS3 förstår vi nog, men baserat på min test och att döma av artikeln Testing Internet Explorer 8: CSS3 for Web Design kan vi i alla fall dra följande slutsatser när det gäller IE8 och CSS3:

  1. Internet Explorer 8 stöder i princip ingen av de nya funktionerna som införs vare sig för webbdesign eller utvecklingen för front-enddesigners
  2. Internet Explorer 8 stöder enbart 22 av 43 tillgängliga CSS3 selectorerna
  3. Internet Explorer är för närvarande en stoppkloss i utvecklingen av standardiseringen

Vilka webbläsare kan då något sånär hyggligt hantera CSS3? Jo Firefox, Konqueror, Opera och Safari/Webkit. Självfallet vill jag inte göra anspråk på att man måste använda någon av de ovanstående webbläsarna. Det är bara synd att IE inte riktigt har fattat galoppen. Med CSS3 kommer vi dels att kunna avlasta våra hemsidor eftersom behovet av Photoshopskapade bilder minskar då det finns liknande effekter i CSS3, det leder också till att sidan blir mer snabbladdad. Dels öppnar det sig många spännande och olika möjligheter att skapa en ännu mer unik och personlig website som vi sedan kan fylla med intressant innehåll. Är det inte mot det vi alla egentligen strävar?

Liknande poster:

Leave a Reply

Your email address will not be published. Required fields are marked *