Innehåll

  1. Introduktion
  2. Historik
  3. Webbstandarder
  4. Struktur och presentation
  5. (X)HTML
  6. CSS
  7. Tillgänglighet
  8. URL:er
  9. Referenser
  10. Ordlista

6. CSS

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.

Webbläsarstöd

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.

Läs mer:

Olika sätt att applicera CSS

Det finns flera olika sätt att applicera CSS på element i ett HTML-dokument.

Externt

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>

Inline

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.

Internt

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.

Läs mer:

Syntax

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.

Läs mer:

Överflödiga element och klasser

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.

CSS-tips

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.

CSS-Layouter

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.

Läs mer:

Kommentarer, frågor eller förslag? Kontakta mig.

© Copyright 2004-2008 Roger Johansson