– 2024 har vært enda et fantastisk år for CSS!

Det skriver Chromes DevRel-team i forbindelse med at de har gitt ut CSS Wrapped 2024, der de går igjennom 17 nye CSS-funksjoner som har kommet i 2024.

• Noen av funksjonene har blitt en del av Baseline, som vil si at de er modne nok til at du kan ta det i bruk og være noenlunde trygg på at det fungerer godt for de fleste som bruker moderne nettlesere.
• Andre funksjoner fungerer bare i enkelte av de aller nyeste nettleserne – men kan likevel være verdt å begynne å test ut.

Her er fem CSS-nyheter fra 2024 som vi likte spesielt godt.

#1: Field Sizing

Med den nye field-sizing-egenskapen kan du få størrelsen til felter til å endre seg automatisk for å tilpasse seg innholdet.

Praktisk hvis du for eksempel har et skjema med ett eller flere felter du vil skal endre størrelse etter hvert som brukeren taster inn noe i feltet. Uten field-sizing måtte du enten sette en fast størrelse på feltet, eller bruke JavaScript for å telle antall tegn og øke høyde eller bredde på elementet etter hvert som brukeren taster inn tekst.

Med field-sizing trenger du bare én kodelinje for å få feltet til å tilpasse seg innholdet:

textarea, select, input {
  field-sizing: content;
}

Prøv det selv her:

📖 Mer info på MDN

#2: Styling av <details>

HTML-elementet <details> brukes typisk til å lage "accordions", der brukeren kan klikke på elementer for å vise eller skjule informasjon på en nettside.

Slike accordions ser ofte litt trauste og kjedelige ut, men fra og med Chrome 131 (og i Edge) har du fått bedre muligheter til å style <details>.

Du kan for eksempel bruke display-egenskapen til å lage en horisontal accordion som dette:

📖 Mer info hos Google

#3: Scroll-drevne animasjoner uten JavaScript

Det har blitt ganske vanlig at nettsider bruker ulike former for animasjoner basert på hvor langt ned på siden brukeren har scrollet. Det kan for eksempel være at elementer dukker opp eller endrer størrelse eller posisjon når du scroller nedover på siden.

Scroll-animasjoner har tidligere krevd at du skriver noe i JavaScript for å for eksempel legge til en eventlistener som holder styr på scroll-posisjonen, eller at du importerer et animasjonsbibliotek.

I de nyeste versjonene av Chrome og Edge kan du imidlertid animere ting på siden utelukkende med CSS.

Du kan lese mer om det, få oppskrifter og se demoer på nettstedet scroll-driven-animations.style. Sjekk også denne videoen:

#4: Anchor Positioning

CSS Anchor Positioning kom i Chrome 125 tidligere i år og er en ny måte å posisjonere elementer relativt til andre elementer på.

Enkelt fortalt fungerer det ved at du definerer ett element (for eksempel en <div>) som skal være ankeret, og så kan du posisjonere et annet element i forhold til ankeret. Perfekt når du skal lage menyer, tooltips, dialogbokser som skal posisjoneres på en bestemt måte i forhold til andre elementer.

Her er teksten "Over-Easy" posisjonert i forhold til ankeret – som i dette tilfellet er en div som omslutter et bilde av et egg:

📖 Mer info hos Google og MDN

#5: Popover-API

Det nye popover-API-et gjør det enklere å lage "tooltips", dialogbokser, menyer og andre ting.

API-et kan nå brukes i alle de tre viktigste nettlesermotorene, det vil si at du kan bruke det i de nyeste versjonene av Chrome, Edge, Firefox og Safari.

Det er nå enkelt å trigge en "popover" fra en knapp (<button>) på denne måten:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

Se hvordan det fungerer her:

📖 Mer info på MDN

Dette var bare 5 av de 17 nye CSS-funksjonene, sjekk gjerne ut de andre på CSS Wrapped 2024.

Få også med deg State of CSS 2024-undersøkelsen og les om hvilke CSS-teknologier utviklere bruker mest og liker best:

Én av tre tester ikke på mobil: «Jeg skjønner det ikke!»

tirsdag 29. oktober 2024