CSS (cascading style sheets) är det som styr utseendet på en hemsida – här ändrar du färger, former och layout. Vad måste du då kunna för att CSS:a en hemsida? Jag tänkte ta och berätta hur jag jobbar, samt räkna upp en del viktiga punkter att tänka på.

För det första måste vi självklart ha html-kod att styla och ett CSS-dokument inlänkat. Skriv aldrig css direkt i htmlen eller ”baka in” den i dina html-dokument då det kommer ta längre tid för användaren att surfa runt på sidan. När du länkat in din CSS kan du enkelt redigera utseendet på alla dina html-sidor från en och samma fil.

Se till att alltid ha din html-kod validerad. Enklast gör du det via http://validator.w3.org. Regler som kan vara värda att komma ihåg är att du endast får använda ett specifikt id en gång per html-sida men klasser (class) kan du använda hur många gånger du vill.

Nu till själva CSS:en. Populärt bland front end-utvecklare är att börja med en så kallad ”reset-css”. Den tar bort alla konstiga marginaler och paddingar som finns automatiskt i webbläsare. En av de populäraste är skriven av Eric Meyer. Den är dock, i mitt tycke, inte optimal ur användarsynpunkt eftersom den tar bort allt normalt utseende på bla knappar och rullistor. Jag har därför utvecklat min egen reset som jag alltid börjar mina CSS-dokument med. Denna funkar mycket bra och passar PRODUKTION203s utstakade användarvänlighetsmål väl.

Som CSS-pedant har jag en del regler för mig när jag kodar. Alla properties (margin, padding, width osv) ska t.ex. skrivas i bokstavsordning och alla selectors (id:n och class:er) som har med varandra att göra ska ”tabbas” in. Självklart ska man tydligt kunna se vilken CSS som tillhör vilket område på hemsidan. Därför skriver jag alltid kommentarer i dokumentet samt försöker döpa alla selectors till något vettigt.

Ett helvete som alla front end-utvecklare lever med kallas Internet Explorer 6, som tack och lov sakta men säkert minskar i popularitet. Alla nya webbläsare håller sig idag till en viss standard vad gäller html och css. IE7 är hyfsat bra på denna standard, men IE6 saknar det mesta. Misströsta inte, här är tre bra trix som underlättar:

1. Använd (om du kan) padding istället för margin, IE6 har en tendens att dubbla din marginal.
2. Undvik att använda PNG-24 bilder då alpha-transparens inte fungerar.
3. Se till att din html-kod validerar.

Visas din sida inte korrekt i IE6 kan du läsa in en specifik CSS för endast den browsern. Detta gör du genom att skriva
<!–[if IE 6]><link rel=”stylesheet” href=”css/ie6.css” /><![endif]–>.

Vi ser alla fram emot den dag då CSS3 blir standard. Då kan vi börja med bl a rundade hörn, skuggor och videouppspelning utan att tvingas installera tilläggsprogram som exempelvis Flash.

Utan CSS skulle alla hemsidor se exakt likadana och vem vill det?