Fyrirlestur — Cascade
Vefforritun 1 — TÖL107G
Ólafur Sverrir Kjartansson, osk@hi.is
Að teikna útlit
- Hvernig veit vafri hvaða gildi fyrir hvaða eigindi eigi að nota?
- Reglur og reiknirit
- specificity og cascade
Specificity – sértækni
- Fernd á forminu
a,b,c,d
a, 1 ef skilgreint í style attribute, annars 0b, fjöldi id selectorac, fjöldi attribute selectora og gervi-klasad, fjöldi elementa og gervi-elementa
- Skilgreinir gildi sem heitir sértækni
- Getum hugsað sem tölu, en er í raun fernd
Specificity – dæmi
li.first {} /* a=0 b=0 c=1 d=1 → 1,1 */
#main {} /* a=0 b=1 c=0 d=0 → 1,0,0 */
.item .link:active /* a=0 b=0 c=3 d=0 → 3,0 */
style="" /* a=1 b=0 c=0 d=0 → 1,0,0,0 */
Cascade – „flóðið“
- Þegar útlit er birt þarf að komast að því nákvæmlega hvaða skilgreiningar eigi við hvert element
- Allar skilgreiningar fyrir element fundnar og raðað
Skilgreiningar geta komið frá þremur stöðum:
- User agent, sjálfgefnir stílar frá tæki sem birtir
- Notanda, notandi tækis, t.d. að allt sé stækkað
- Höfundi, skilgreiningar frá höfundi vefs
Röðun
- Skilgreiningum user agents
- Skilgreiningum notanda
- Skilgreiningum höfundar
- Skilgreiningum höfundar merktar með
!important
- Skilgreiningum notanda merktar með
!important
- Sértækni
- Röð innan skjals, seinna skilgreint fær forgang
!important
- Getum ýtt skilgreiningu upp listann með
!important
- Hunsar sértækni
- Yfirleitt ekki góð hugmynd
- breytir útreikningum og ruglar í okkur/teymisfélögum
- Getum samt notað, t.d. ef við höfum gefna CSS skrá sem við getum alls ekki breytt, getum þá yfirskrifað
div {
font-size: 100px !important;
/*
það er mjög mikilvægt að
allur texti sé 100px!
*/
}
Specificity & cascade
- Specificity & cascade vefst fyrir mörgum
- Oft ástæða fyrir pirring út í CSS! Lærum vel!
Gildi reiknuð
- Höfum núna þær reglur sem við notum fyrir hvert element, getum fundið skilgreint gildi fyrir hvert eigindi
- Ef „flóðið“ gefur okkur gildi, notum það
- Annars, erft gildi
- Annars, upphafsgildi
Erfð gildi
Sum gildi erfast frá foreldri til barns.
<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
*/
Upphafsgildi
- Fyrir aðrar yfirlýsingar eru skilgreind upphafsgildi
- Yfirleitt rökrétt en stundum geta þau valdið okkur vandræðum, sérstaklega með shorthand
- T.d. er
background-color með sjálfgefna gildið transparent, engin bakgrunnslitur
- Reiknað gildi—reiknað úr hlutfallslegum gildum eins langt og hægt er, t.d. hlutfallsleg breidd m.v. foreldri
- Notað gildi—fáum nákvæm gildi úr öllum, leyst úr háðum gildum
- Raun gildi—gildi notað við birtingu, t.d. þarf að námunda tölur að einhverjum aukastaf
Dæmi um gildi
Inherit, initial
- Getum skilgreint sérstaklega hvort gildi erfist eða sé sett sem upphafs
inherit segir gildi að erfa frá foreldriinitital setur gildi sem upphafsgildi skv. vafra/tæki
Reset
- Hver vafri stillir sitt user agent stylesheet
- Viljum oft hafa hreinan grunn
- CSS reset setur öll element í „núllstöðu“
- CSS Tools: Reset CSS
Dæmi um reset
Að skrifa CSS
- Notum ekki
id í selectorum
- Hátt specificity, getur valdið vandræðum
- Ekki endurnýtanlegt: aðeins eitt id per síðu
- Nýtum „flóðið“ til að minnka endurtekningar
- Góð og snyrtileg heiti á klössum
/* ekki svona */
.MikilvaegurTexti { }
.ListOfItems { }
/* heldur svona */
.important-text { }
.list-of-items { }
Samsett orð í forritun
- Kebab-case er ein af nokkrum leiðum til að skrifa samsett orð án bila
- Þurfum oft að gera það þegar bil hefur merkingu
- Aðrar leiðir t.d.
lowerCamelCase og snake_case
- Ættum að huga að í kóðastíl og gæta samræmis
Validation
- W3C heldur úti validation þjónustu
- Bæði villur og viðvaranir
- Til þess að fá allar upplýsingar þurfum við að kveikja á öllum warnings undir more options