Kafli 12: Sértækni & flóðið

Þegar við erum búin að setja upp HTML, skrifa CSS sem velur element með selectorum og gefa eigindum gildi innan reglusetta, hvernig veit vafrinn nákvæmlega hvaða gildi fyrir hvert eigindi eigi að nota þegar útlitið er teiknað? Þá koma tvö hugtök til tals: sértækni (e. specificity) og „flóðið“ (e. the cascade).

Fyrir allar CSS reglur og fyrir hvern selector er reiknað sértækni (e. specifitcy) sem er á forminu a,b,c,d þar sem:

Við fáum síðan gildi sem er fernd (gætum hugsað sem tölu með því að skeyta gildinu saman í tölu, en er samt ekki tala) sem er sértækni gildið.

li.first                 /* a=0 b=0 c=1 d=1 → 1,1 */

.item .link:active       /* a=0 b=0 c=3 d=0 → 3,0 */

#main                    /* a=0 b=1 c=0 d=0 → 1,0,0 */

style="" beint á element /* a=1 b=0 c=0 d=0 → 1,0,0,0 */

Þetta gildi, ásamt öðru, ræður því hvaða reglur eru notaðar fyrir hvert eigindi. Hærra sértækni gildi þýðir að líklegra er að sú regla sé notuð. Eins og sést er ID selector með næst hæsta sértækni gildið og er því óæskilegt að nota þessa selectora nema í sérstökum tilvikum. Sama gildir um CSS skilgreint í style attribute á elementi.

Þegar útlit er sett saman þarf að komast að því nákvæmlega hvaða skilgreiningar eigi við fyrir hvert element. Þá er „flóðið“ (e. cascade) notað. Þetta er það mikilvægur partur af CSS að þetta er það sem fyrsti stafurinn stendur fyrir: Cascading Style Sheets. Skilgreiningar geta komið frá þremur stöðum:

Eftir að allt CSS hefur verið lesið frá öllum upprunum er skilgreiningum raðað eftir:

Þessi röðun er síðan notuð til að reikna hvaða gildi hver yfirlýsing fær.

Með því að skilgreina !important á yfirlýsingar höfum við áhrif á það hvar í röðinni yfirlýsingin lendir. Þetta gæti hljómað sem góð hugmynd en í raun er hún það ekki. Yfirlýsingar með !important hunsa sértækni gildi og skilgreiningar röð. Þær vinna því gegn almennu reglunni um það hvernig gildi eru reiknuð og geta valdið rugling.

div {

  font-size: 100px !important;

  /* það er mjög mikilvægt að allur texti sé 100px! */

}

Ef tveir eða fleiri aðilar vinna í sama CSS verkefni sem spannar hugsanlega fleiri skrár, og aðili lendir í einhverjum vandræðum með að fá rétt gildi með því að nota selectora og setur !important á yfirlýsingu. Næsti aðili hefur verið að nota rétta selectora til að fá fram útlit en allt í einu hætta þær skilgreiningar að vera réttar því !important gildi tekur yfir skilgreiningar. Þarf þá að skoða öll möguleg skjöl til að finna hvaðan gildið kemur.

Þegar útlit er birt þarf að reikna gildi fyrir allar yfirlýsingar sem tæki styður. Til þess er byrjað á að finna skilgreint gildi eftir reglu:

Sum gildi eru erfð í börnum frá foreldri sínu, þetta sparar okkur heilmikla vinnu og lætur CSS virka eins og við myndum gera ráð fyrir.

<h1>Halló <em>heimur</em></h1>

h1 { color: blue; }

/*

  allur texti innan h1 er blár, líka sá

  sem er innan em, þar sem color erfist

*/

Fyrir aðrar yfirlýsingar eru skilgreind upphafsgildi. Þau eru yfirleitt rökrétt en stundum geta þau valdið okkur vandræðum, sérstaklega þegar við notum shorthand. T.d. er background-color með sjálfgefna gildið transparent, engin bakgrunnslitur.

Þegar komið er að því að fá raun gildi er það fengið með eftirfarandi reglu:

<section>

  <div>halló</div>

</section>

html {

  font-size: 10px;

}

section {

  width: 10em;

  /* reiknað, notað og raun gildi: 10px * 10 = 100px */

}

div {

  font-size: 2em;

  /* reiknað, notað og raun gildi: 10px * 2 = 20px */

  border: 0.01em solid black;

  /*

  reiknað og notað gildi: 0.01 * 20px = 0.2px

  raun gildi: 1px, rúnað upp

  */

  width: auto;

  /*

  reiknað gildi: auto

  notað gildi: 100px, búið að reikna section

  raun gildi: 98px, út frá box model og border

  */

}