9.4 Regler for Kombination af Typografiark

9.4.	Indhold
		9.4.1	Import fra andre Typografiark
		9.4.2	Kombination af Information fra flere Typografiark
			9.4.2.1	Fremgangsmåden ved Kombination af Typografiark
		9.4.3	!important Regler
		9.4.4	Bestemmelse af en Selektors Specifikhed
		9.4.5	Anden Style Information end Typografiark

9.4.1 Import af regler fra andre Typografiark

I CSS2 er det også muligt at importere regler fra andre typografiark. Det gøres ved hjælp af den specielle regel "@import", der skal efterfølges af en URL til det typografiark, der skal importeres:

    @import "eksempel.css"
    @import url(eksempel.css)

Disse to regler importerer det samme typografiark og vise begge udgaver af den syntaks, der kan anvendes.

"@import" regler skal stå før alle andre regler i et typografiark.

Da man kan lave typografiark til mange forskellige typer medier kan man angive medieafhængige "@import" regler og derved spare browseren for at hente typografiark for medier, den ikke understøtter. Man angiver medietyperne i en kommasepareret liste efter URL'en:

    @import url(lilleskrift.css) print
    @import url(blaalig.css) projection, tv

Udelader man medieangivelsen, gælder importen for alle medier. Medieangivelsen "all" har samme effekt.

9.4.2 Kombination af Information fra flere Typografiark

Typografiark kan stamme fra tre forskellige kilder:

• Forfatteren: angiver typografiark til et kildedokument i overesstemmelse med de regler, der gælder for det sprog, der bruges til at beskrive hjemmesiden. I HTML kan regler indsættes i selve dokumentet eller kædes sammen med det fra en ekstern fil.
• Brugeren: kan definere style information til et bestemt dokument, f.eks. ved at angive en file med et typografiark eller ved hjælp af en browser, der har en funktion, der genererer et brugerdefineret typografiark
• Browseren: skal indeholde et default typografiark, der kommer før alle andre typografiark i et dokument. Dette default typografiark skal præsentere dokumentsprogets elementer på en måde, der vil falde i de flestes smag. Dette er grunden til, at den samme side kan se anderledes ud i Internet Explorer end i Navigator.

Typogrfiark fra disse tre kilder vil overlappe hinanden og samarbejde i overensstemmelse med reglerne for kombination af typografiark.

I CSS vægtes hver enkelt regel, og når flere regler passer, vil den regel med den største vægt blive anvendt. Som standard har forfatterens typografiark større vægt end brugerens, men det er lige omvendt med regler, der er defineret med !important. Alle regler har større vægt end regler i browserens default typografiark.

Importerede typografiark vægtes også, og deres vægt bestemmes af importrækkefølgen. Regler i et givent typografiark har større vægt end regler fra et importeret typografiark. De importerede typografiark kan selvfølgelig også selv importere typografiark og definere deres egne regler, og der gælder de samme regler for vægtning.

9.4.2.1 Fremgangsmåden ved Kombination af Typografiark

Når browseren skal finde den korrekte værdi af en element/egenskab kombination, sker det på denne måde:

1. Find alle de erklæringer, der passer på det elerment og den egenskab, det drejer sig om. Erklæringen passer, hvis den tilhørende selektor svarer til det aktuelle element
2. Erklæringer sorteres først og fremmest efter vægt og oprindelse:
   • Forfaterens typografiark overstyrer brugerens typografiark, som igen overstyrer browserens default typografiark
   • Ved erklæringer defineret med !important overstyrer brugerens typografiark forfatterens, som igen overstyrer browserens default typografiark
   • !important erklæringer overstyrer normale erklæringer
   • Et importeret typografiark har samme oprindelse som det typografiark, der importerer det
3. I anden omgang sorteres efter selektorens specifikhed, idet mere specifikke selectorer overstyrer mere generelle. Pseudo-elementer og pseudo-klasser regnes for af være almindelige elementer og klasser.
4. Endelig sorteres efter den rækkefølge, de angives i. Hvis to regler har samme vægt, oprindelse og specifikhed, vinder den, der er angivet til sidst. Regler fra importerede typografiark regnes for at være angivet før reglerne fra typografiarket selv.

9.4.3 !important Regler

Som det ses, er der en lille kamp om overtaget mellem forfatterens og brugerens typografiark, hvor forfatterens normalt vil få overtaget (ifølge regel 2 herover).

CSS giver dog mulighed skabe balane i regnskabet ved at indføre "!important" regler, der har fortrinsret over almindelige regler. Der kan være "!important" regler i både forfatterens og brugerens typografiark, men i modsætning til normale regler, overstyrer brugerens "!important" regler forfatterens:

    H1  { font-size: 16pt !important }

Derved tilgodeses brugere med særlige behov så som større fonte eller bestemte farvekombinationer.

Dette er en ændring i forhold til CSS1, hvor forfatterens "!important" regler overstyrede brugerens.

Erklærer man en hovedegenskab som f.eks. background for "!important", svarer det til at man erklærer alle dens underegenskaber for "!important".

Disse to uddrag af henholdsvis en brugers og en forfatters typografiark, demonstrerer, hvordan "!important" reglerne fungerer:

    /* Uddrag af brugerens typografiark */
    P  { text-indent: 1em !important }
    P  { font-style: italic !important }
    P  { font-size: 18pt }

    /* Uddrag af forfatterens typografiark */
    P  { text-indent: 1.5em !important }
    P  { font: 12pt sans-serif !important }
    P  { font-size: 24pt }

Den første regel i brugerens typografiark overstyrer den tilsvarende hos forfatteren, da den er erklæret med "!important". Det samme er tilfældet med brugerens anden regel på grund af "!important" erklæringen. Brugerens tredje regel er derimod ikke "!important" og vil derfor tabe til forfatterens anden regel, der sætter style information for en hovedegenskab. Af samme årsag vil forfatterens tredje regel heller ikke komme til anvendelse, da den ikke er erklæret "!important".

9.4.4 Bestemmelse af en Selektors Specifikhed

En selektors specifikhed beregnes som følger:

• Find antallet af ID attributter i selektoren (=a)
• Find antallet af andre attributter og pseudo-klasser i selektoren (=b)
• Find antallet af elementnavne i selektoren (=c)
• Ignorer pseudo-elementer

Herefter får man specifikheden ved at sammensætte de tre tal a-b-c i et talsystem med et meget stort grundtal. Jo større tal, jo større specifikhed. Her er nogle eksempler:

*	{ }	/* a=0 b=0 c=0 -> Specifikhed =	0 */
LI	{ }	/* a=0 b=0 c=1 -> Specifikhed =	1 */
UL LI	{ }	/* a=0 b=0 c=2 -> Specifikhed =	2 */
UL OL + LI	{ }	/* a=0 b=0 c=3 -> Specifikhed =	3 */
H1 + *[REL = up]	{ }	/* a=0 b=1 c=1 -> Specifikhed =	11 */
UL OL LI.Red	{ }	/* a=0 b=1 c=3 -> Specifikhed =	13 */
LI.Red.Level	{ }	/* a=0 b=2 c=1 -> Specifikhed =	21 */
#x34y	{ }	/* a=1 b=0 c=0 -> Specifikhed =	100 */

I HTML har hvert element en style attribut, hvis værdi er en eller flere typografiark regler. Disse regler har ingen selektorer, men ved kombination af typografiark anses de for at have en ID som selektor, af hensyn til trin 3 (specifikhed: a=1, b=0, c=0). Til gengæld regnes de for at komme efter alle andre regler af hensyn til trin 4.

9.4.5 Anden Style Information end Typografiark

Rundt omkring på Internet er der mange sider, der indeholder style information, som ikke stammer fra typografiark, og det vil der sandsynligvis være i lang tid fremover også. Så i en overgangsperiode vil der sider med en blanding af gammeldags style information fra f.eks. FONT-elementet og moderne style information i form af typografiark.

Denne gammeldags style information skal browseren ifølge CSS2 anbefalingen [CSS2] oversætte til CSS regler med en specifikhed på 0, ligesom disse regler skal anses for at stå i starten af forfatterens typografiark, så de kan overstyres af efterfølgende typografiark regler. Dette er sket for at lette en sammenblanding af de to i overgangsperioden.

Bemærk: I CSS1 havde den gammeldags style information en specifikhed på 1 i stedet for 0. Ændringen skyldes introduktionen af den universelle selektor "*", som har en specifikhed på 0.