Inheritance, defaults og DevTools

Inheritance

CSS starter ikke på et tomt lærred. Browseren har allerede styles, og nogle værdier nedarves fra parent til child. Når du skriver color på main, kan teksten længere nede i dokumentet derfor få samme farve uden en selector for hvert element.

Arbejd med øvelserne i fire trin: Gæt → afprøv → undersøg i DevTools → forklar. Skriv en forventning, før du afslører resultatet. Hvis resultatet overrasker, så find årsagen, før du ændrer CSS.

I den første øvelse: Hvilken farve får overskriften, afsnittene og links? Forklar især, hvorfor et link ikke nødvendigvis får samme farve som teksten omkring det.

Inheritance er ikke specificity

Gæt resultatet af denne struktur:

<div id="context">
  <h1>Some text</h1>
</div>

h1 {
  color: green;
}

#context {
  color: red;
}

Et id har højere specificity end en element-selector, men reglerne rammer forskellige elementer. Den grønne farve sættes direkte på h1; den røde er en mulig arvet værdi fra parenten. De to selectors konkurrerer derfor ikke om samme elements color i kaskaden.

Prøv at fjerne color fra h1, og prøv derefter color: inherit. Forklar, hvorfor resultatet ændrer sig uden at gøre #context mere specifik.

Standarder og overskrivning

Typografi er ofte et godt sted at bruge inheritance. Fx nedarves color, font-family, font-size og line-height. Egenskaber som margin, padding og border nedarves normalt ikke.

html {
  color: #3b3b3b;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

h1, h2, h3 {
  color: #000;
  line-height: 1.1;
}

Her får siden et fælles udgangspunkt, og overskrifterne får bevidste afvigelser. inherit kan også bruges eksplicit på en egenskab, der normalt ikke nedarves, fx border: inherit.

Browserens defaults

Browserens user agent stylesheet giver blandt andet overskrifter størrelse og margin, links farve og understregning og body en margin. Derudover har CSS-egenskaber initialværdier, som gælder, selv om du ikke har skrevet dem i en regel.

Når du sætter display: flex, følger der fx en standardadfærd med: rækkefølgen følger normalt en række, elementerne wrapper ikke automatisk, og flex-items kan krympe. Skeln mellem browserens element-styles og egenskabernes initialværdier.

Undersøg et link og en overskrift i DevTools. Find en regel fra user agent stylesheet og en arvet værdi. Slå en deklaration fra, og se, hvad browseren falder tilbage til.

Hvorfor roterer linket ikke?

Øvelsen giver et link baggrund, padding og rotate, men rotationen har ingen synlig effekt. Gæt hvorfor, og undersøg derefter linkets display.

Et almindeligt tekstlink er en ikke-erstattet inline-boks, som ikke kan transformeres. Prøv display: inline-block på .cta. Pointen er at ændre boksens opførsel; højere specificity på rotate løser ikke årsagen.

Find beviset i DevTools

Undersøg én konkret egenskab på det element, der ser forkert ud:

Browsernes DevTools viser ikke alle problemer på samme måde. Sammenhold derfor regel, beregnet værdi og det synlige resultat.

Miniudfordring: Du må ikke tilføje en ny override-regel. Vend tilbage til farveøvelsen, og løs problemet ved at ændre eller fjerne en eksisterende deklaration. Brug derefter samme metode, når en reset-regel konkurrerer med en komponent i Cascade Layers.

Forklar din løsning med én sætning: “Det skete, fordi …”. “Det virkede, da jeg prøvede …” forklarer endnu ikke årsagen.

Reset og starter-CSS

Et reset ændrer browserens udgangspunkt. En starter kan også indeholde projektets typografiske og visuelle standarder. Kopiér ikke reglerne uden at kende formålet:

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100svh;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

border-box lader den angivne størrelse inkludere padding og border. Billedreglerne gør billeder til blokke, begrænser dem til containerens bredde og bevarer normalt proportionerne. Et reset, der fjerner alle margins, kræver også, at du selv genindfører passende afstande.

Gennemgå temaets starter.css. Vælg tre regler, og forklar både deres formål og hvad der sker, hvis de fjernes.

Læs mere om inheritance på web.dev.