Translations of this article are available.
Efter att ha varit något som använts mest för att ange typsnitt och textstorlek kan nu CSS användas för att styra ett dokuments hela layout. För att göra det på ett effektivt sätt krävs dock att man använder ett något annorlunda angreppssätt än när man använder tabeller för att styra layouten.
Strukturerad, logisk XHTML är en förutsättning för att man på ett effektivt sätt ska kunna styra presentationen med CSS.
Som nämnts tidigare har webbläsarnas stöd för CSS förbättrats en hel del på senare år. Tyvärr är inte alla webbläsartillverkare lika intresserade av att följa öppna standarder, så stödet varierar en del. Dessutom finns det, som alltid när det gäller programvara, buggar som gör att webbläsare inte beter sig som de borde i alla lägen.
De webbläsare som har bäst stöd för CSS är i dagsläget (början av 2004) Mozilla (och andra webbläsare baserade på Gecko: Firefox (tidigare Firebird), Camino, Netscape 6+), Opera och Safari (och andra webbläsare baserade på WebCore: OmniWeb 4.5 och senare). Internet Explorer 6/Win har inte lika bra stöd, men det räcker en bra bit på vägen. Internet Explorer 5/Mac har mycket bra stöd för CSS 1, men det saknar stöd för en stor del av CSS 2. IE 5.* för Windows har någorlunda stöd, men kan ställa till med en del problem som man bör känna till. Tidigare versioner av Internet Explorer har inget eller så dåligt stöd för CSS att det inte är värt att nämna. Samma sak gäller för Netscape före version 6.
Eftersom Internet Explorer är den webbläsare som just nu har flest användare får man ofta anpassa sig efter vad den klarar när det gäller den övergripande layouten. Därmed inte sagt att man inte kan eller ska ge de besökare som har en modernare webbläsare en ännu bättre upplevelse.
Alla webbläsare som används i dag har alltså inte det stöd för CSS som krävs för att man ska kunna få en webbplats att presenteras på ett grafiskt attraktivt sätt. Lyckligtvis är det bara några få procent som fortfarande använder så gamla webbläsare.
Det är viktigt att poängtera att dessa användare inte blir utestängda. På 90-talet var det populärt att använda webbläsarkontroller för att hänvisa den som använde ”fel” webbläsare (vanligtvis vad som helst förutom Internet Explorer/Win) till en sida som förklarade att man måste ”uppgradera” sin webbläsare för att bli insläppt.
Numera kan man hantera äldre webbläsare bättre. En stor fördel med att använda logisk, välstrukturerad XHTML är att sådana dokument är tillgängliga och användbara även utan stilmallar. Presentationen, utseendet, blir inte samma som i en modernare webbläsare, men innehållet finns där. I de allra flesta fall, för de allra flesta som besöker en webbplats, är innehållet viktigare än ytan. Därför är det bättre att stänga av CSS för webbläsare med dåligt stöd än att stänga ute besökare.
Det finns olika metoder för att göra detta. En av de vanligaste är att använda @import för att länka in sin CSS-fil. Netscape 4 och äldre förstår inte @import och kommer därför inte att läsa in CSS-filen. Det finns mängder av olika sätt att gömma CSS från webbläsare. Gemensamt för de flesta är att de bygger på buggar i webbläsarnas sätt att läsa CSS. Därmed finns alltid risken att en webbläsare uppdateras så att buggen som används för att gömma CSS från den är fixad, men inte det CSS-problem som var anledningen till att gömma viss CSS från just den webbläsaren. Ju mindre man använder dessa så kallade CSS-hack, desto bättre.
Man kan naturligtvis också göra en webbläsarkontroll på serversidan och använda den för att skicka olika CSS-filer (eller ingen alls) till olika webbläsare. Om man gör det måste man se till att hålla webbläsarkontrollen uppdaterad så man inte av misstag skickar fel CSS-fil till vissa när webbläsare uppdateras eller helt nya webbläsare släpps.
Eric Meyer beskriver fyra sätt att gömma CSS från vissa webbläsare.
Sammanställning av en mängd olika sätt att gömma CSS från olika webbläsare.
Dokument som diskuterar olika sätt att förbättra upplevelsen för den som använder en modern webbläsare.
Det finns flera olika sätt att applicera CSS på element i ett HTML-dokument.
Det innebär flera fördelar att ha alla CSS-regler i en eller flera separata filer. HTML-dokumenten blir mindre, CSS-filer lagras i webbläsarens cache-minne och behöver bara laddas ned en gång och man behöver bara ändra i en fil för att ändra presentationen för en hel webbplats. En extern CSS-fil kan se ut så här:
h1 {
font-weight:bold;
}
Observera att det inte ska finnas något <style>-element i en extern CSS-fil.
Man kan länka en CSS-fil till ett HTML-dokument med ett <link>-element:
<link rel="stylesheet" type="text/css" href="styles.css" />
eller med en @import-regel i ett <style>-element:
<style type="text/css">
@import url("styles.css");
</style>
Genom att använda attributet style kan man applicera CSS direkt på ett HTML-element:
<h1 style="font-weight:bold;">Rubrik</h1>
Man bör undvika detta eftersom det innebär att man blandar struktur och presentation.
CSS som ligger i ett <style>-element, som i sin tur ligger i <head>-elementet:
<style type="text/css">
h1 {
font-weight:bold;
}
</style>
Även detta bör undvikas, eftersom det bästa är att ha HTML och CSS i separata filer.
Förklaring av CSS-import, mediatyper med mera.
En CSS-regel består av en selektor och en eller flera deklarationer. Selektorn avgör vilket eller vilka HTML-element som påverkas av regeln. Varje deklaration i sin tur består av en egenskap och ett värde. Deklarationerna omges av { }, och varje deklaration avslutas med ; (semikolon).
En enkel CSS-regel ser ut så här:
p {
color: #0f0;
font-weight: bold;
}
I detta fall är selektorn p, vilket innebär att regeln kommer att påverka alla <p>-element i dokumentet. Regeln har två deklarationer, som tillsammans kommer att göra all text i <p>-element grön och fet.
För en mer detaljerad beskrivning av CSS-regler, se till exempel CSS Beginner's Guide, CSS from the Ground Up eller någon bra bok i ämnet.
Dave Shea har med hjälp av sina läsare sammanställt en lista med praktiska råd och tips för CSS.
John Gallant och Holly Bergevin förklarar hur man skriver kompakt CSS.
Mycket bra förklaring av olika CSS-selektorer och hur de fungerar.
Vanliga misstag när man börjar använda XHTML och CSS är att använda onödiga XHTML-element, överflödiga klasser och extra <div>-element. Det behöver inte nödvändigtvis innebära att koden blir felaktig, men det motverkar en del av syftet med att separera struktur från presentation: att få enklare, renare kod.
Ett exempel på användande av överflödiga XHTML-element:
<h3><em>Rubrik</em></h3>
Om man vill att rubriken ska vara kursiv är det bättre att använda CSS för det:
h3 {
font-style:italic;
}
Överflödigt användande av klasser kan se ut så här:
<div id="main">
<div class="maincontent">
<p class="maincontenttext">
Lorem ipsum dolor
</p>
</div>
</div>
Det räcker med följande:
<div id="main">
<div>
<p>
Lorem ipsum dolor
</p>
</div>
</div>
För att kontrollera element som ligger i div#main kan man sedan använda kontextuella selektorer i sin CSS-kod. I detta fall skulle det kunna se ut så här:
div#main p {
/* regler */
}
Man kan i de flesta fall använda CSS för att få logisk XHTML att presenteras som man vill utan att behöva lägga till överflödig kod, men det finns fall där det kan vara värt lite extra kod för att skapa en viss presentation.
Naturligtvis stöter man på vissa problem och svårigheter när man börjar använda CSS på allvar. En del kan bero på missförstånd, andra på otydliga specifikationer eller buggiga webbläsare. En samling goda råd som underlättar finns i CSS Crib Sheet, sammanställt av Dave Shea. Här är några av de viktigaste, fritt översatta till svenska, och ytterligare några som inte finns med där.
Börja med att validera: Vid felsökning, börja med att validera både HTML och CSS. Många problem kan orsakas av felaktigheter i koden.
Utveckla och testa CSS i den mest avancerade webbläsaren först – testa sedan i andra webbläsare: Om man använder en äldre webbläsare med en dålig och/eller felaktig implementation av CSS för att testa när man utvecklar kommer koden att vara anpassad efter detta. När man sedan testar i en modernare webbläsare är risken stor att den kommer att bete sig annorlunda. Det är bättre att börja med den bästa webbläsaren och sedan anpassa CSS-koden för sämre webbläsare.
Förstå hur ett elements bredd och höjd beräknas: För att få fram ett elements faktiska bredd eller höjd adderar man dess padding
och border till dess width eller height. I Internet Explorer 5.*/Win ingår padding och border i stället i den width eller height som angetts.
Antag att man har följande CSS:
div.box {
width:300px;
padding:20px;
border:10px solid;
}
Den totala bredden blir 360px.
10px + 20px + 300px + 20px + 10px = 360px
I Internet Explorer 5.* blir den totala bredden 300px, och innehållets bredd 240px.
300px - 10px - 20px - 20px - 10px = 240px
För att komma runt detta problem kan man antingen använda ett CSS-hack för att ange olika värden till de webbläsare som gör rätt och de som gör fel, eller så kan man undvika att ange både width och padding eller border för ett element.
För en grundlig förklaring av denna så kallade boxmodell, se dokumentet Box model.
Ange enheter för numeriska värden: CSS kräver att man anger enheter för värden på höjd, bredd, tjocklek, textstorlek och så vidare. Ett undantag är om värdet är 0 (noll). Då behövs ingen enhet, eftersom noll är noll oavsett vilken enhet det är.
Förstå hur float fungerar: Float-begreppet kan vara svårt att förstå, men det är viktigt att lära sig hur det fungerar eftersom man har stor nytta av float när man bygger CSS-baserade layouter. Några mycket bra beskrivningar av hur float fungerar är Containing Floats, Floatutorial och Float: The Theory.
”LoVe/HAte”: Pseudoklasser för länkar ska specificeras i ordningen Link, Visited, Hover, Active.
”TRouBLed”: När man använder kortformen för att specificera margin, padding eller border för ett element börjar man med den övre och går medsols: Top, Right, Bottom, Left.
Namnge klasser och ID efter funktion, inte efter utseende: Om man skapar en klass som heter .smallblue och sedan behöver göra texten stor och röd kommer klassnamnet att vara förvirrande. Det är bättre att använda funktions- eller strukturbeskrivande namn som .copyright eller .important.
Gemener och versaler är olika: CSS gör skillnad på gemener och versaler när det gäller värden på HTML-attributen class
och id (se CSS2 syntax and basic data types).
När det gäller elementnamn är det skillnad på versaler och gemener med XHTML skickat som XML, men inte med HTML eller XHTML skickat som text/html.
Kontrollera ID: Bara ett element per dokument kan ha ett visst ID, medan hur många element som helst kan ha samma class.
Använd endast tillåtna tecken i namn: Värden på class och ID får endast innehålla tecknen [A-Za-z0-9] och bindestreck (-). De får inte börja med ett bindestreck eller en siffra (se CSS2 syntax and basic data types).
Kommentera rätt: Kommentarer i CSS börjar med /* och slutar med */:
/* Detta är en kommentar */
Det finns mängder av exempel och steg-för-steg-förklaringar som visar hur man kan använda CSS för att skapa olika typer av layout. Ett råd är att man börjar med en enkel layout, lär sig hur den fungerar, och sedan ger sig på mer avancerade layouter.
Ett exempel på hur man kan skapa en enkel layout med sidhuvud, två spalter och sidfot.
Samlingssida med länkar till information om olika CSS-layouter.
Kommentarer, frågor eller förslag? Kontakta mig.
© Copyright 2004-2008 Roger Johansson