Ärvning

Obs!
Alla exempel öppnas i ett nytt fönster!

1. Vad är ärvning?

Ärvning är en viktig princip för stilmallar. Den innebär att ett HTML-element kan ärva egenskaper från ett annat element. Betrakta följande exempel:

BODY { font: Arial; font-size: 12px; color: black }
P { color: blue }
B { font-weight: bold }

Här ärver P egenskaperna från BODY, vilket innebär att texten i P visas med Arial i 12 pixlars storlek. Däremot ärver texten inte textfärgen, som blir blå i stället för svart. På motsvarande sätt ärver B egenskaperna från P och indirekt också från BODY. Det betyder att texten i B blir blå Arial i 12 pixlars storlek, med fet stil.

Hur vet man då vilka element som ärver vilka? I CSS2-specifikationen finns ett särskilt kapitel om detta, nämligen kapitel 3. Man hittar även en del information om ärvning i de övriga kapitlen, framförallt i kapitel 10. Överallt utgår man ifrån ett slags "träd", som ser ut ungefär så här:

Trädets struktur bestäms av några olika faktorer: dels av vilken webbläsare man använder, dels av vilken DOCTYPE-deklaration man tillämpat överst i sitt HTML-dokument.

Som du ser på bilden styr inställningarna i HTML de i HEAD och BODY, medan HEAD och BODY inte påverkar varandra direkt. Däremot kan element i HEAD påverka BODY "indirekt", t.ex om man lägger in en extern stilmall. Ärvningen kan alltså också påverkas av sådana omständigheter.

På motsvarande sätt påverkar inte H, P och de andra elementen på samma nivå varandra. Deras egenskaper måste man alltså ställa in var för sig i stilmallen. En inställning av teckensnittet i P ändrar alltså inte automatiskt teckensnittet inuti tabeller och listor. Däremot kan en sådan grundinställning finnas inbyggd i olika webbläsare.

Trädet ger en ungefärlig bild av hur ärvningen går till. Trots att man alltså borde kunna bestämma mer exakta principer går detta inte att göra i praktiken. Man måste alltså pröva sig fram.

2. Förfäder, arvingar och barn

I specifikationen pratar man om förfäder (ancestors), arvingar (descendants), föräldrar (parents), barn (children) och syskon (siblings). Det är termer för de olika elementen i trädet. Ett element kan vara barn till ett annat och förfader till ytterligare ett. P är i bilden i förra avsnittet förälder till U, men barn till BODY.

En arvinge kan bara ha en förälder i taget, men kan däremot ha flera förfäder. U har P som förälder, men både P och BODY som förfäder. I första bilden är H, P, UL och TABLE syskon och har BODY som förälder. Vart och ett och syskonen kan sedan ha barn, t.ex U.

Det går också att mer i detalj bestämma släktskapet mellan de olika elementen:

P B       pekar ut en arvinge, B, till förfadern P.
P > B    pekar ut ett barn, B, till föräldern P.

Dessutom kan man låta selektorerna peka ut den "förstfödda":

B:first-child     pekar ut det element, B, som är första barnet till föräldern P.

Det kan vara bra att veta att alla barn inte gillar sina föräldrar. Ärvningen fungerar då inte som den skall och barnet gör "uppror". Det märker man när man kollar i webbläsarna. På motsvarande sätt brukar syskon ibland bråka och man lär sig snart vilka element man bör undvika. Själv använder jag t.ex aldrig BLOCKQUOTE, eftersom det tenderar att ställa till med bus då sidorna skall presenteras på skärmen.

3. Hur använder man ärvning?

Varför skall man då lära sig om ärvning? Jo, det främsta skälet är att man kan undvika en hel del kod och ganska många bekymmer, om man använder ärvningen korrekt. De flesta element ärver nämligen snällt från sina förfäder och föräldrar, men långt ifrån alla.

Den princip man bör tillämpa är att skapa en grundläggande stilmall, som man vet fungerar. Den kan man sedan komplettera efter hand. Lägger man in styrning av ett element i taget ser man inte bara vad som fungerar för just det elementet (t.ex bakgrundsfärg eller en specialeffekt), utan upptäcker också när stilmallen kraschar hela sidan.

I HTML-koden brukar man även använda elementen DIV och SPAN för att lösa diverse tvister. De båda elementen kan ses som en slags familjerådgivare. Vi kan titta på följande exempel:

H1 { color: green }
B { color: blue }

När vi kombinerar dessa:

<H1>Rubrik med <B>flera</B> färger</H1>

går det inte att få B att påverka textfärgen i H1, eftersom H1 inte kan ärva från B. Det går visserligen att skriva:

H1 B { color: blue }

för att få alla förekomster av B innanför H1 att skrivas med blått. Men ett mycket enklare sätt är att använda SPAN. Vi skriver då:

H1 { color: black }
.blue { color: blue }

I koden skriver vi sedan:

<H1>Rubrik med <SPAN class="blue">flera</SPAN> färger</H1>

Rubrik med flera färger

Ärvningen kan göras ännu mer komplex och i specifikationens kapitel 5 tar man upp en hel del sådana exempel:

DIV P * [href]

Denna selektor pekar ut alla P-element inne i DIV som innehåller ett href-attribut.

DIV OL>LI P

Pekar ut sådana P-element som finns innanför LI i numrerade listor, vilka i sin tur står innanför DIV.

H1 + H2

Denna selektor pekar ut två syskon, som måste ha samma förälder och där H1 måste komma omedelbart före H2 i dokumentet. Detta kan man t.ex använda för att ta bort indrag direkt efter en mellanrubik:

P { text-indent: 5px }
H2 + P { text-indent: 0 }

Titta på exemplet i praktiken >>

Min bedömning är annars att man har ytterst liten användning för sådana här preciseringar av sina stilmallar när man gör hemsidor. Vill man ha fullständig kontroll över sin produktion gör man själva dokumentet i Quark eller InDesign och exporterar det sedan till PDF, som i sin tur fungerar på webben. Då blir styrningen felfri och man slipper lägga ner mycket tid på att leta efter fel i stilmallen.

Självklart kan det dock vara kul att känna till lite om hur principerna för ärvning fungerar!