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

---

1. Skrifum áhugavert, skýrt efni
2. Setjum það upp með aðgengilegu, merkingarfræðilegu HTML
3. Bætum við grunn útliti sem er vel stutt
4. Bætum við flóknara útliti sem er e.t.v. minna stutt
5. 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);, 2px dregnir 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ð :root gerviklasanum
• 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. bottom eða left, 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á block og inline

---

• margin-inline vísar í left og right ef við lesum frá vinstri-til-hægri, öfugt ef lesið frá hægri-til-vinstri, og vísa í top  og bottom ef lesið frá topp til botns
• padding-inline-start og padding-inline-end, o.s.fr.
• Tengist því hvernig flexbox virkar

---

border-radius

• Hægt er að rúna horn á boxi með border-radius
• Hvort sem border er skilgreint eða ekki
• Ef við skilgreinum eina tölu er miðað við hringlaga horn en tvær tölur miða við sporöskjulaga horn
• border-radius generator frá Mozilla

Dæmi

---

box-shadow

• Getum skilgreint einn eða fleiri skugga á boxum með box-shadow
• Utan (outset, sjálfgefið gildi) eða innan boxsins (inset)
• box-shadow generator frá Mozilla

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ða path sem getur notað SVG skilgreiningu fyrir flókin form

Dæmi