Att bygga i CSS

Det är någonting nästan magiskt med att se hur en sida kommer till liv med CSS och hur en liten div tagg plötsligt exploderar fram färg och form från tomma intet, men så har vi irritationen och vansinnet när CSS inte riktigt gör som man tänkt sig. Så är det att bygga i CSS.

För en gammal räv som mig som började bygga hemsidor på 90-talet då tabeller var lika vanligt som att glatt norpa både kod och bilder från lite var stans utan tanke på validering eller upphovsrätt så är det fortfarande ett komplicerat förhållande till CSS över tabeller diskussionen som gäller. Eftersom tabeller på ett enkelt sätt delar upp arbetsytan i ett rutnät som följer innehållet så är det enkelt att jobba med texturer och bakgrunder som utan krångel följer med innehållet även i närliggande fält och eftersom CSS mer är som ett lapptäcke av innehållsfält som man lägger som ett pussel lite flytande både över och under varandra så är det inte helt lätt att byta arbetstänkande, men det är helt klart värt det.

Att bygga i CSS kräver lite mer förarbete än att bygga i tabeller och man måste fundera lite extra på hur man ska lägga divtaggar och annat så att "lapptäcke" blir optimalt. När man väl fått den delen ur vägen så brukar jag börja med att lägga ut divtaggarna och samtidigt märka upp vart dom börjar med remarks. Detta gör jag så att jag ser vad som är vad för det kan bli en del förvirring i stora projekt med mängder av divtaggar som slutar på samma ställe och råkar man glömma en då blir det mycket krångel för att rätta till/hitta det problemet.

Den totala mängden kod brukar bli betydligt mindre eftersom man flyttar mycket av informationen till stylesheet som innehåller all egentlig layout, vilket återigen känns lite bakvänt eftersom jag är van att lägga bilder och liknande direkt i koden. Fördelen blir även att man kan använda samma stil på flera element och på så sätt minska den totala mängden kod.

Anledningen är att man genom att lägga allting i stylesheet och styra layout genom CSS är dels att det blir betydligt enklare att ändra saker eftersom en fil styr all layout på alla sidor samtidigt, dels så kan man använda sidan som ren text genom att ta bort stylesheet vilket är ett bra alternativ för textbaserade webbläsare, talsyntes program eller mobiltelefoner och liknande.

Nu när jag jobbar med layouten för en ny webshop som är helt baserad på CSS så har jag även passat på att anpassa layouten för Mortfiles till att bli helt CSS styrd också. Jag tog en stund igår och gjorde om layouten samtidigt som jag ändrade headern till den nya varianten med inbyggd sökfunktion och ny logga. Här ser du hur den ser ut med CSS och utan så du kan se skillnaden.

[url="http://mortfiles.se/images/old_blog/2008/01/header.gif" title="Mortfiles nya header"> Andra bloggar om: stilmallar,