Cascading Style Sheets

Den här artikeln behöver fler eller bättre källhänvisningar för att kunna verifieras. (2018-04) Åtgärda genom att lägga till pålitliga källor (gärna som fotnoter). Uppgifter utan källhänvisning kan ifrågasättas och tas bort utan att det behöver diskuteras på diskussionssidan.

Cascading Style Sheets (CSS, på svenska stilmall) är ett språk som beskriver presentationsstilen för ett strukturerat dokument som till exempel typsnitt, textstorlek och färg. Tekniken är ett sätt att anpassa dokumentet med hänsyn till datortyp, skärmupplösning, färgdjup och installerade typsnitt.

Tekniken introducerades av Håkon Wium Lie och Bert Bos 1994 i webbläsaren Argo. År 1996 kom den första rekommendationen från W3C, CSS1. Det dröjde till år 2000 innan någon webbläsare hade fullt stöd för CSS1, och det var Internet Explorer 5.0 för Mac. Olika webbläsare hade stöd för olika delar av CSS1 och kunde även tolka reglerna olika.^[1]

Ett XML- eller HTML-baserat dokument har inte på förhand en given utformning utan består av strukturerad text utan stilinformation. Hur dokumentet skrivs ut på papper, på en webbsida, på displayen i en mobiltelefon eller en handdator, bestäms normalt av programmet som hanterar dokumentet (t.ex. webbläsaren), utgående från programmets inställningar. Med CSS är det möjligt att också tillhandahålla en stilmall (eller instruktioner för enskilda element), som anger hur dokumentet kan eller skall visas. Också användaren har möjlighet att tillhandahålla stilmallar, som tillsammans med dokumentet stilmall bestämmer utseendet. CSS ingår inte som en del av XML-språket, men används allmänt till exempel av webbläsare.

Användning

CSS används av de flesta stora webbplatser. CSS-dokumentet inkluderas oftast med hjälp av ett link-element:

<link rel="stylesheet" type="text/css" href="sökvägen/till/stilmallen.css">

Denna rad specificerar sökvägen till filen med stilspecifikationerna (href="sökvägen/till/stilmallen.css") och hur webbläsaren ska tolka filen (rel="stylesheet" type="text/css").

Ett annat sätt att använda CSS i ett HTML eller XHTML-dokument är style-elementet, som kan användas på två sätt. Det första är att inkludera CSS-filen via en CSS-instruktion:

<style type="text/css">@import url(stilmall.css);</style>

Alternativt går det att skriva in CSS-koden inbäddad direkt i style-elementet, så kallad inline CSS. Detta är inte rekommenderat då det kan uppstå problem med äldre webbläsare då de tolkar CSS-koden som en del av HTML-koden och därför visar koden direkt på webbsidan. En annan anledning är också för att det blir krångligare att ändra koden i efterhand sedan. Det är därför rekommenderat att använda ett link-element för att koppla CSS-kod till webbsidor, dels för att spara bandbredd och dels för att en HTML-tolk och XHTML-tolk hanterar style-element på olika sätt.

CSS-tekniken har ibland kritiserats för att komplicera arbetet för webbutvecklare då många webbläsares stöd för CSS-standarden varierar kraftigt, webbläsaren Internet Explorer version 6 och tidigare är ofta utsatta för dessa anklagelser. Vissa speciella designdelar anses vara onödigt komplicerade som till exempel horisontell och vertikal centrering av olika element.

Exempel på CSS-dokument

body {background-color: #eaecf0;}
p {font-family: Georgia, "Times New Roman", serif; font-size: 16px; color: #202122;}

Ovanstående CSS-kod innehåller instruktioner för hur body- och p-elementet samt dess innehåll ska presenteras. Den första raden (background-color: #eaecf0;) anger att bakgrunden ska ha en grå färg. Nästa rad ställer in typsnittet till Georgia i första hand, i andra hand Times New Roman, och om besökaren inte har något av dessa typsnitt installerade används ett generiskt seriff-typsnitt. Slutligen anges att texten ska visas i en storlek av 16 pixlar (bildpunkter) och ha en nästan svart färg. Textens färg definieras här för att säkerställa läsligheten, i fall användaren annars skulle ha en text som inte kontrasterar tillräckligt mycket mot bakgrunden.

Resultat:

Variabler

CSS-dokumentationen ger inget eget stöd för variabler. Detta leder ofta till att exempelvis färger måste definieras upprepade gånger i ett CSS-dokument, vilket kan bli omständligt att hantera då mängden CSS-kod växer. För att underlätta arbetet med CSS har ett flertal tillägg utvecklats, oberoende av W3C, som bland annat utökar CSS med stöd för variabler, operatorer och nestlade regler. Exempel på tillägg till CSS är SASS och LESS, vilka erbjuder likvärdig funktionalitet men med varierande syntax. CSS-koden skrivs då enligt respektive tilläggs eget syntax och kompileras sedan till ren CSS-kod som webbläsaren kan tolka.

Standardisering

Frameworks

CSS-ramar är förberedda bibliotek som är avsedda att möjliggöra enklare, mer standardkompatibel utformning av webbsidor med språket Cascading Style Sheets. CSS-ramar inkluderar Blueprint, Bootstrap, Cascade Framework, Foundation och Materialize. Precis som programmerings- och skriptspråkbibliotek är CSS-ramar vanligtvis införlivade som externa .css-ark som refereras till i HTML <head>. De ger ett antal färdiga alternativ för att utforma och lägga ut webbsidan. Även om många av dessa ramar har publicerats använder vissa författare dem mest för snabb prototypning, eller för att lära av, och föredrar att "hantverk" CSS som passar varje publicerad webbplats utan design, underhåll och nedladdningskostnader för att ha många oanvända funktioner i webbplatsens styling^[2].

Designmetoder

När storleken på CSS-resurser som används i ett projekt ökar, behöver ett utvecklingsteam ofta besluta om en gemensam designmetodik för att hålla dem organiserade. Målen är enkel utveckling, enkel samverkan under utveckling och prestanda för de distribuerade stilbladen i webbläsaren. Populära metoder inkluderar OOCSS (objektorienterad CSS), ACSS (atomisk CSS), oCSS (organisk kaskadstilark), SMACSS (skalbar och modulär arkitektur för CSS) och BEM (block, element, modifier)^[3].

Källor

Externa länkar

• W3Cs webbplats om CSS
• Nybörjarguide till CSS
• CSS Framework

(X)HTML HTML HTML · HTML5 · XHTML · Dynamisk HTML (DHTML) · HTML-redigeringsprogram · HTML-element · Webbsäkra färger · Teckenkodning · WHATWG Rendering Renderingsmotor · Quirks mode · Stilmallar Relaterat innehåll W3C · Webbläsare · Validator  · DOM