kaxigt.com

Stilmallen – Cascading Style Sheet – liksom HTML är ett kraftfullt verktyg i vårt hemsidebyggande. Här får du i tre guider lära dig grunderna i CSS3. Det här är del 1.

Introduktion till CSS3

Att skilja på struktur (HTML) och presentation (CSS) skapar också de bästa förutsättningarna för en standardisering med korrekt syntax.

Det vi använder idag är en kombination av specifikationerna CSS level 2.1 och CSS3. I takt med nya och mer avancerade applikationer och ett ökat behov av att utveckla webben som exempelvis HTML5, så följer även CSS samma fotspår.

CSS3 är den rekommenderade standarden av W3C idag.

Vad är då CSS3?

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

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 Smashing Magazine gjort en bra och överskådlig CSS3 cheat sheet över modulerna. Det går utmärkt att spara denna.

CSS3 kompatibla webbläsare

Vilka webbläsare kan hantera CSS3?

Idag klarar de flesta webbläsarna att hantera CSS3. Med CSS3 kan vi 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.

Det öppnar sig också 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?

Testa  gärna din webbläsare för att se vilka CSS3 moduler den stöder.

HTML6 och CSS4 håller på att arbetas fram för att bli den nya tekniken inom webbdesign, dock kommer vi få vänta i många år innan allt blir klart. Du kan redan nu kontrollera om din webbläsare klarar av att rendera de CSS4-selektorer som redan är klara. Spännande!