Fyrirlestur — CSS stuðningur
Vefforritun 1 — TÖL107G
Ólafur Sverrir Kjartansson, osk@hi.is
Progressive enhancement
  - Upplifun sem krefst minnstu mögulegrar tækni
- Bætum virkni við eins og stuðningur er til staðar
- Byrjum einfalt og bætum við virkni í lögum
  - Skrifum áhugavert, skýrt efni
- Setjum það upp með aðgengilegu, merkingarfræðilegu HTML
- Bætum við grunn útliti sem er vel stutt
- Bætum við flóknara útliti sem er e.t.v. minna stutt
- Bætum við aukinni virkni með JavaScript

Fallback
  - Ný eigindi eða gildi leyfa okkur að gera eitthvað skemmtilegt
- En hvað ef það eru ekki allir vafrar farnir að styðja eigindið?
- Skilgreinum fallback gildi sem við erum nokkuð viss um að sé stutt
width: 99%; /* fallback */
width: calc(100% - 30px);
calc
  - calc()er fall sem leyfir reikninga með mismumandi einingar
- calc(50% - 2px);,- 2pxdregnir frá- 50%þegar notað gildi er fundið
Vafraforskeyti
  - Meðan vafri er ekki með fullkominn stuðning við staðal eru vafraforskeyti (vendor prefixes) oft notuð til að bjóða upp á stuðning.
- Ekki notað á nýrri virkni en enn til staðar fyrir suma virkni
  - Minni og minni þörf, þurfum yfirleitt ekki en fer eftir því hvaða vafra við ætlum að styðja og hversu gamlar útgáfur af þeim
- Æskilegt að nota sjálfvirk tól til að sjá um, t.d. autoprefixer
display: flex;
user-select: none;
verður með autoprefixer fyrir fjórar seinustu útgáfur af vöfrum:
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Hvað getum við notað?
  - Hvaða vafrar styðja hvað af CSS?
- caniuse.com hefur yfirgripsmikinn gagnagrunn yfir stuðning vafra á ákveðinni virkni
Feature queries
  - Feature queries er nýleg leið til að athuga hvort vafri styðji eigindi og gildi
- Hreiðraðar CSS reglur eru notaðar ef stuðningur fyrir hendi
- Notum fyrir nýja virkni sem þarf meira en bara fallback gildi
@supports (writing-mode: vertical-lr) {
  h1 {
    float: left;
    writing-mode: vertical-lr;
  }
  /*
  ef vafri styður writing-mode er
  h1 lóðrétt vinstra megin
  */
}
Shim & polyfill
  - Shim (eða shiv) er virkni sem „stungið“ er inn og veitir virkni frá nýju API í gömlu umhverfi
- Polyfill er kóði eða plugin sem veitir þér aðgang að virkni sem þú gerir ráð fyrir að vafrinn bjóði upp á. Þ.e.a.s. shim fyrir vafra API
- HTML5 Cross Browser Polyfills
Að skrifa CSS
  - Notum í dag virkni sem verður ekki að fullu studd í öllum vöfrum fyrr en í framtíðinni
- Ákveðum hvaða vafra og stýrikerfi við ætlum (eða ætlum ekki að styðja)
- Prófum í viðeigandi tækjum
- Nýtum okkur progressive enhancement
CSS variables
  - CSS variables (eða custom properties) leyfa okkur að skilgreina breytur
    
      - t.d. fyrir lit, ákveðna lengd eða eitthvað annað sem er mikið notað
 
- Breytingar verða auðveldari og getur bætt lesanleika
  - Skilgreinum með --<heiti>: gildi;
- Notum með var()fallinu
- Ef ekki skilgreind getum við sent aðra færibreytu sem  fallback gildi, var(<breyta>, #000)
  - Breytur sem skilgreindar eru munu erfast frá foreldri til barns og eru háðar cascade
- Getum skilgreint breytur efst í trénu með :rootgerviklasanum
- Getum notað breytur með calc(), t.d.calc(var(--multiplier) * 1em)
Dæmi
env() gildi
  - Sumir vafrar skilgreina env()gildi eftir því í hvaða umhverfi eða stýrikerfi er verið að keyra
- T.d. þarf að gera ráð fyrir „öruggu“ svæði þegar eitthvað er birt? „Notch“ á símum, eða neðri stika á iOS Safari.
- env(safe-area-inset-bottom)gefur okkur gildi sem hægt er að bæta við með- calc()til að efnið okkar sjáist.
Logical properties
  - Logical properties er þegar við notum logical gildi en ekki physical gildi til að skilgreina eigindi
- Physical gildi er t.d. bottomeðaleft, og takmarkast af samhengi—í flestum tilfellum er það samhengi að við séum að lesa frá vinstri til hægri
- Logical gildi eru ekki fest með nákvæmum gildum heldur vinna útfrá blockoginline
  - margin-inlinevísar í- leftog- rightef við lesum frá vinstri-til-hægri, öfugt ef lesið frá hægri-til-vinstri, og vísa í- topog- bottomef lesið frá topp til botns
- padding-inline-startog- padding-inline-end, o.s.fr.
- Tengist því hvernig flexbox virkar
border-radius
Dæmi
box-shadow
Dæmi
CSS shapes
  - Leið til að brjótast út úr boxunum með shape-outside
- Skilgreinum hvernig inline element leggjast upp að boxinu okkar
- Setjum form eða notum alpha channel (gegnsæi) á mynd
Dæmi
object-fit
  - Stýrum því hvernig innfellt efni (t.d. mynd) er meðhöndlað með object-fit
- fill, sjálfgefið, fyllir algjörlega út í foreldi
- cover, hlutur fyllir út í box en stærðarhlutföllum er haldið, ef hlutur passar ekki er klippt af honum
  - contain, hlutur fyllir út í box en stærðarhlutföllum er haldið, ef hlutur passar ekki er hann skalaður, getur myndast „letterbox“
- none, ekkert er átt við hlut
Dæmi
clip-path
  - clip-path býr til „klippt svæði“ eftir skilgreindri braut
- Getum skilgreint sem circle,ellipse,polygon, eðapathsem getur notað SVG skilgreiningu fyrir flókin form
Dæmi