Jag noterade igår att Det finns en bra bok på svenska om att jobba med webbstandard. Tommy Olsson har skrivit “Max räckvidd med HTML och CSS“. Såg just att Lena på kaxigt.com har bett Tommy skriva om bakgrunden till boken. Tack för initiativet!

Där skriver Tommy bland annat om två olika sätt att jobba med introduktion av HTML och CSS. Antingen blandar man båda, som t.ex. Ian Lloyd gjort i sin bok “Build Your Own Web Site The Right Way Using HTML & CSS“. Då kastas man rakt in i båda världarna och kan göra allt på en gång. Baksidan av detta är att man senare, när man använder boken som referens, har lite svårt att hitta. Då tvingas man bläddra fram och tillbaka för att hitta materialet.

Tommy valde att presentera en del i taget, även om det sättet att skriva

kanske är lite torrare och tråkigare. Anledningen är att det då går att skriva boken så att den fungerar som en referensbok när man väl har läst den. Det tycker jag är väl så viktigt, eftersom man knappast lyckas få allt att fastna vid första genomläsningen.

Boken står sig bra som referenslitteratur. Söker man material på engelska om web standards blir det problem att sortera bland alla alternativ. Tänk att det finns de som skriver så initierat – på svenska.

Är du nyfiken på boken kan du även läsa ett provkapitel.

Vet du vilken teckenstorlek du vill ha på dina webbsidor i pixlar – men inte i em? Då finns ett verktyg som snabbt hjälper dig ta fram regler: CSS Web Typography-Matrix.

Du behöver bara fylla i vilka storlekar du vill ha på brödtext och rubriker i pixlar och fylla i radhöjden. Tryck på en knapp och du får en genererad CSS-kod.

z-index är css  “motsvarighet” till lager i Photoshop. Man kan bestämma vilka objekt som ligger över eller undervarandra. Det finns en del bestämda regler för hur det går till. Du kan lära dig det mesta om z-index i artikeln The CSS Z-Index Property: A Comprehensive Look

Vi brukar konstatera att inline style går före allt annat när det gäller CSS. Man använder ibland inline när man vill prova något snabbt. Men det kan även finns exempel när javascript eller ett cms häver ur sig något slikt. Vad gör man då?

Jo, Chris Coyier tipsar om följande kod. Jag använder hans exempel.

Detta finns i koden, och vi vill ersätta det:

<div style=”background: red;”>
The inline styles for this div should make it red.
</div>

Då kan vi använda följande vår stilmall:

div[style] {
background: yellow !important;
}

Nu när det börjar gå mot skolavslutning och sommarlov är det väl hög tid att tänka på advenstkalender? Jo, faktiskt är det inte så dumt. Det finns nämligen en adventskalender för webbmakare, 24ways.org.  Den har funnits i tre år och kommer varje år med 24 olika personer som ger var sitt tips.

Även om vi har långt kvar till dessa mörka tider, kan det vara idé att bege sig dit. Du kan till exempel på tips av Jason Santa Maria om hur du bygger ett layoutsystem i moduler, få hjälp av John Hicks att göra egna stilmallar för olika sajter. Med hjälp av CSS trollar du bort det du inte vill se på dem, med hjälpa av webbläsarnas inbyggda formatmallar. Drew McLellan ger en minneslista vad man ska tänka på när man går från designfasen till utvecklingsfasen av en webbplats.

Firebug för Firefox är ett ovärderligt verktyg för att till exempel jobba med CSS på webbsidor. När jag nu använder Mac provar jag Safari 4 (beta). WebKit är “Firebug för Safari” och ett viktigt verktyg. Du kan inspektera html-koden, css, javascript och se på nedladdningstider (se bilden) eller titta på storlekar (hur mycket de olika delarna “väger” i kB). Vissa delar av utseendet är betydligt “macigare” än hos Firebug (se bilden).

Du kan lära dig grundfunktionerna i en bloggpost där man presenterar nyheter. Usingmac har även en genomgång med en videodemonstration.

Hoppsan! Web Developer’s Handbook var en länksamling jag missat helt. En mycket gedigen lista till olika webbresurser. Bakom den står Vitaly Friedman, en av grundarna till Smashing Magazine.

Här finns läsning i det oändliga! En del länkar verkar vara ganska gamla, men å andra sidan: vem orkar hålla en sådan lista aktuell och uppdaterad? Vaska fram det som passar.

När man för musen över en länk och vill den ska se annorlunda ut styrs det med en pseudoklass i css som kallas “hover”. Man kan använda effekten på olika sätt. Tipsen kommer från  WebDesignerWall.

CSS sprites är en teknisk term man använder när man gör en grafisk bild som innehåller flera olika bilder i sig. Genom att ange en exakt bakgrundsposition, kan man visa den bild (del av bild) man vill.

Smashing Magazine har en artikel om CSS sprites med kort historik om sprites, många exempel och länkar till artiklar (bilden är ett utsnitt från ett Pokemon Sprite Sheet)

PS. Boken är givetvis en e-bok som du kan ladda ner. Och erbjudande gäller 12 dagar till från dagens datum, den 20 nov.