CSS on steroids

11:5614oktober2009

En modern webbsida består till grunden rent teknisk av HTML, CSS och JavaScript. Det är alltså det man får till sin webbläsare, och som webbläsaren sedan ansvarar för att visa på rätt sätt. Även om den bakomliggande motorn på moderna webbplatser är något helt annat är det trots allt detta som man får till sin dator och som webbläsaren pysslar ihop.

Bakgrund

Man kom snabbt på att man inte kan ha en webbplats som består av en miljard HTML-filer. Det fungerar bara inte. Det tar en massa onödig plats och filerna är nästan likadana. Dessutom fanns det inget sätt att interagera med webbplatsen. Inga användare, ingen sökfunktion, inte ens en gästbok á la -95. Så vi började med serverskriptspråk (PHP, ASP, JSP osv). Idag använder nästan alla webbplatser ett serverskriptspråk, oftast i kombination med en databas. Det var HTML det...

När det gäller JavaScript så har utvecklingen varit något annorlunda. Eftersom det är besökarens webbläsare och inte servern som kör JavaScriptkoden kan den fungera olika i olika webbläsare, vilket har krävt att man skriver speciallösningar för webbläsare. Det plus flera andra brister i JavaScript gav liv åt JavaScript-ramverk såsom jQuery, Prototype, MooTools med flera.

CSS däremot har sedan tidernas begynnelse varit rätt simpelt. Det är inte direkt programmering, utan mer regler för hur olika delar på en webbsida ska se ut. Även på den humanitära fronten utmärker sig CSS som ett regelspråk som ofta designers och andra icke-programmerare lär sig. När det gäller ramverk däremot har det varit helt dött på CSS-fronten, fram tills för ett par år sedan, då Blueprint kom, till följd av 960.gs som idag är två riktigt heta stenar för frontendutvecklare. Dessutom tolkar webbläsarna CSS olika på samma sätt som med JavaScript.

Möt CSScaffold

Det som Bluprint, 960.gs med flera erbjuder idag är mallar. Det är vanlig CSS, inget hokus pokus. CSScaffold, som jag upptäckte för ett par veckor sedan, ser väldigt intressant ut. Det är ett ramverk för CSS som är skrivet i PHP. Det innebär att CSS-koden parsas av PHP innan den skickas till webbläsaren. Det innebär att sättet man skriver CSS på utökas, vilket ger utvecklare fantastiska möjligheter.

Den här filmen förklarar det snabbt och enkelt:

1. Man skriver den utökade CSS-koden i sin vanliga CSS-fil. Man kan exempelvis skriva "+clearfix;" i en selector för att ge elementet de attribut som en clearfix normalt ger, fast med bara en enda rad kod.
2. När en browser sedan frågar efter CSS-filen kommer .htaccess-filen säga: "Vänta lite, CSScaffold ska ju titta på filen först"
3. CSScaffold går igenom filen och ersätter raden med alla de riktiga clearfix-attributen och skickar filen till webbläsaren. Vad som kommer ut är alltså ren och skär CSS, men CSScaffold har gjort allt grovjobb. Woho!

CSScaffold har stöd för bland annat variabler, funktioner, "nested selectors" och gridsystem "out of the box" men erbjuder även ett ramverk för att enkelt utöka funktionaliteten med plugins. Verktyget är bakåtkompatibelt med vanlig CSS, så man behöver inte förändra sina nuvarande CSS-filer för att börja dra nytta av fördelarna.

Vad CSScaffold, som ännu är väldigt nytt, erbjuder i sig är visserligen intressant, men den riktiga guldgruvan ligger i själva idén och den potential som finns. En sak jag själv funderade över, som jag ännu inte hittat något stöd för, är möjligheten att automatiskt räkna ut relativa mått baserade på pixelmått; en inbyggd em-kalkylator helt enkelt! Det innebär dels att man slipper använda en extern kalylator för att räkna ut em-måtten och dels att man kommer kunna skapa en typografisk vertikal rytm grymt mycket enklare än tidigare, vilket jag personligen tycker är riktigt intressant.

Så vad är haken?

Jag var tagen av alla fördelarna med CSScaffold och tänkte "kan vi införa detta direkt i produktionen, vad är haken?". Jag kom fram till att

• Radnumreringen blir bruten, vilket skadar oss som använder Firebug för att snabbt leta reda på var i CSS-filen själva regeln befinner sig
• Inte direkt stabil. Jag hittade ett par buggar själv som upphovsmannen fixade (stort plus).
• Ännu ett litet projekt, vilket betyder ont om support
• Andra utvecklare kan behöva lära sig grundläggande syntax och filstruktur för CSScaffold

Radnumreringen har jag en idé på lösning till (som kanske dyker upp här i bloggen senare). Att utvecklare behöver lära sig nya system är inget unikt för detta projekt. De andra två punkterna beror på att det ännu är ett litet projekt, så de försvinner förhoppningsvis med tiden.

CSScaffold må inte vara riktigt redo ännu, men det har som sagt stora potential. Jag ska fortsätta experimentera och hålla er uppdaterade.