<ForrigeUke uke=”51” år=”2024” />

Denne uken ser vi litt inn i spåkula og ser hva vi kan ha i vente på CSS-fronten.

Trekkspill uten JavaScript!

Har du noen gang prøvd å animere for eksempel åpningen av en accordion? Da har du sikkert opplevd hvor kronglete det kan være. Siden høyden er dynamisk og bestemmes av innholdet, klarer ikke CSS sin transition eller animation å jobbe direkte med åpningen. Løsningen har dermed vært å regne ut høyden ved hjelp av JavaScript og sette den eksplisitt på elementet.

Einar Afiouni i Bekk har som del av luke 22 i bekk.christmas vist oss hvordan dette blir enklere gjennom interpolate-size. Denne er på vei til en nettleser nær deg, og med den kan vi animere høyden uten å måtte ty til JavaScript. Dette gleder jeg meg veldig til!

Om du er sugen på flere CSS-tips, har Einar faktisk skrevet hele 24 artikler på bekk.christmas med CSS-godbiter du kan kose deg med. Får du en bedre dessert til lutefisken enn litt fersk CSS-inspirasjon? Neppe!

Dagens CSS: interpolate-size

Verdig typografi-design på web

Å jobbe med typografi på webben kan ofte være ganske herk. Noen fonter får du liksom aldri til å sitte helt symmetrisk i tekstboksen, og så fort du prøver noe fancy — som for eksempel å la teksten “ligge” på én linje — må du gjerne inn med noen magiske padding-verdier for å få det på plass.

Heldigvis skriver Jason Bradberry, designer i Set Studio og Piccalilli, denne uken litt om hvor mye enklere dette blir med de foreslåtte CSS-propene text-box-trim og text-box-edge. De lar oss nemlig styre hvordan tekstboksen skal kutte bort «leading space» basert på fontens egne metrikker. Jeg skal ikke prøve å forklare noe dypere hva dette betyr (for her er jeg på tynn is) — det lar jeg heller Jason ta hånd om — men jeg synes helt klart dette ser ut til å være en veldig nyttig endring!

Why I'm excited about text-box-trim as a designer

Det var alt for denne gangen, goood juuuul! 🎅