Hur ska webbläsaren göra när ett element får flera olika värden till ett attribut från flera olika regler? Då måste det finnas tydliga regler för vilket värde som är viktigast. Det är denna ordning som kaskaden handlar om.
Det är många delar som samspelar och det kan därför upplevas som ganska svårt och krångligt. Utvecklarverktygen i webbläsaren är ett bra hjälpmedel för att förstå vilka regler som prioriteras. De tre delar som kaskaden består av är:
Vi går igenom dem i omvänd ordning.
När allt annat är lika är det ordningen i källkoden som gäller. En regel som står längre ner i en css-fil är viktigare. Detsamma gäller ordningen som css-filer länkats in i. Även där anses en fil som länkats in senare vara viktigare.
Använder du en återställnings-CSS likt [Normalize.css], [minireset.css] eller [Reboot] är det viktigt att den länkas in först. Annars riskerar du att återställa dina egna regler!
Med specificity menas den vikt som en CSS-regel får baserat på antalet selektortyper i den matchande selektorn.
| Typ av selektor | Beskrivning | |
|---|---|---|
| 1 | typ | Väljer element utifrån namn, till exempel h1 eller nav. Även pseudo-element (exempelvis::before) tillhör denna kategori. |
| 2 | klass | Väljer element utifrån innehållet i class-attributet, till exempel .exempel. Här hör även attribut-selektorer (exempelvis [type="radio"]) och pseudoklasser (exempelvis :hover) hemma. |
| 3 | ID | Väljer element utifrån id-attributet, till exempel #start. |
Om två regler skulle få samma specificity används source order för att välja.
Stilmallar som läggs till direkt i HTML-taggen (som <span style="color: purple;">) ersätter alltid alla externa
stilmallar. Det är en god anledning att försöka lösa problemet på något annat vis.
På [Specifishity] finns en illustration över hur det fungerar.
Med importance menas den process som används när CSS-regler från flera källor ska kombineras.
User-agent stylesheet
Varje webbläsare har en grundläggande stilmall inbyggd. En del webbläsare använder CSS-filer medans andra har den
inbyggd i programkoden.
Standarden har vissa begränsningar för hur denna stilmall får se ut men det finns stora möjligheter för utvecklarna av webbläsaren att välja utformning. Eftersom webbläsarna har lite olika standardutseende är det vanligt att använda någon form av CSS-återställare (exempelvis [Normalize.css], [minireset.css] eller [Reboot]).
Author stylesheet
Den typ av stilmall som man vanligtvis tänker på. Dessa stilmallar bestämmer design och utseende för webbsidan och
skapas av webbsidans skapare. Det vanligaste är externa stilmallar som länkas till HTML-filen men det kan även vara CSS
skriven i <style>-taggen eller med style-attributet.
User stylesheet
Användaren kan i vissa webbläsare göra egna stilmallar och anpassa presentationen utifrån sina egna förutsättningar.
Webbläsaren samlar ihop alla regler från olika källor. Sedan filtrerar den ut de regler som hör till ett visst element.
Sen sorteras reglerna utifrån om de åtföljs av ett !importance och deras ursprung. Sorteringen görs enligt tabellen
nedan. Regler med !important är viktigare än de utan.
| Origin | Importance | |
|---|---|---|
| 1 | user agent | normal |
| 2 | user | normal |
| 3 | author | normal |
| 4 | animations | |
| 5 | author | !important |
| 6 | user | !important |
| 7 | user agent | !important |
| 8 | transitions |
Om flera regler får samma importance används specificity för att avgöra vilken som ska väljas.
När !important används ersätter den alla andra regler. Att använda !important anses vara dålig stil! Eftersom det blir mycket svårare att felsöka bör !important
undvikas in i det längsta!
!important.!important för CSS specifik för den aktuella sidan och som behöver ersätta CSS från främmande källor (exempelvis Normalize.css eller Bootstrap)!important om du skriver CSS som andra förväntas använd!!important för CSS som gäller för hela din sajt!