lillbra.se

Vad håller din kropp för klass?

De kommande månaderna är det många som försöker ta hand om sin kropp lite extra inför sommar- och strandsäsongen. Det kan även vi gränssnittsutvecklare göra. Och den kropp jag pratar om då är bodyn i dina html-dokument.
Chris Coyier påminner oss nämligen om hur ett id (eller en klass) på body-taggen ger bättre kontroll för dina stylesheet.
Säg till exempel att vill ha alla länkar röda istället för blå bara på kontakta-oss-sidan. Att skriva ett separat stylesheet för just den sidan är opraktiskt eftersom det ger redundans. Alternativet att ge alla länkar på den sidan en speciell klass faller på samma grepp.
Den bästa lösningen är istället att ge body-taggen på den sidan ett unikt id, och sedan skriva följande css:

a {
color: blue;
}


#contact-page a {
color: red;
}

Detta är ett simpelt men kraftfullt trick. Genom att endast ändra html-koden på ett enda ställe kan du smidigt styra utseendet för speciella sidor/underavdelningar på din sajt. Principen kan användas till många användbara lösningar – här kommer ett par andra exempel:

Tekniken kan användas för att markera vilken sektion som är aktiv i en huvudmeny. Med hjälp av ett id eller en klass på body-taggen får man rätt flik/menyalternativ markerat på ett enkelt sätt. Läs Roger Johanssons artikel Setting the current menu state with CSS, för att se exakt hur du ska skriva.

Klassifiering av body-taggen är praktiskt för unobtrusive javascript. Genom att med javascript lägga till klassen ”js” på bodyn markerar man att användaren har javascript påslaget. Detta görs med raden:
document.body.className = (document.body.className +' '||'') + 'js';
Från css:en kan man då, med body.js i selektorn, sätta regler för element som ska behandlas med javascript. Till exempel gömma element, som användaren sedan kan ”fälla ut” (med hjälp av något toggle-script).
Detta är ett enkelt och mer effektivt sätt än att t.ex. loopa igenom alla element med javascript och gömma dem därifrån. För användare utan javascript visas elementen som vanligt, eftersom body aldrig får klassen js. Läs Chris Heilmanns artikel om unobtrusive javascript för en mer detaljerad beskrivning.

Även då man vill ge användaren själv möjlighet att anpassa utseendet på sidan är principen praktisk. På A List Apart finns artikeln Invasion of the Body Switchers, där man presenterar kod och demo av en anpassa-funktion med javascript och css. Beroende på användarens val läggs en eller flera klasser till på body-taggen och utseendet ändras.

Så lycka till och ta hand om din kropp!
Förresten; om du läst ända hit så kanske du platsar i gruppen av personer som skulle kunna tänka sig att ha en sådan här tröja

[tags]html, css, body, webbutveckling[/tags]

links for 2008-01-19

• xkcd – A webcomic by Randall Munroe
  Första lektionen, första skoldagen: Sql-injections.
  (tags: fun humor comics nerd)
• Jag längtar efter politik men går på bio i stället – Per Bjurman
  Per Bjurman skriver om farsan – Lennart “Fysikläraren” Larsson
  (tags: lennartlarsson)

The Curse of the Golden Flower

Denna film (med den svenska titeln “Den gyllene blommans förbannelse”) är ett kinesisk drama om intrigerna på kejsarens slott för länge, länge sedan. Kejsaren, kejsarinnan och deras söner lever ett flärdigt men olyckligt liv, och under ytan smids onda planer.

The Curse of the Golden Flower är en otroligt vacker film. Palatset är fantastiskt, kläderna pråliga och lyxiga. Starka färger och guld överallt. Det är härligt filmat med coola vinklar och perspektiv. Som tittare sitter man bara och njuter och insuper de exotiska miljöerna.
Storyn då? Jo, den är fängslande den också och faktiskt mer spännande än jag förväntat. Den har alla klassiska ingredienser som en gammal pjäs eller saga ska ha – svek, tårar, kärlek, mord. Plus även till de häftiga stridscenerna som också är väldigt snyggt gjorda.
Denna filmen var ett skönt (och välbehövligt) byte från alla Hollywood-rullar man ser annars. The Curse of the Golden Flower kan jag starkt rekommendera!

[tags]den gyllene blommans förbannelse, yimou shang, the curse of the golden flower[/tags]