CSS-triks: Sånn får du dynamisk font-størrelse

Siste nytt fra Interop-prosjektet, React Server Components i RedwoodJS og CSS-triks for dynamisk skriftstørrelse i ukas ForrigeUke.

Her har du CSS-snutten som gir deg dynamisk font-størrelse uten breakpoints. 📸: Ole Petter Baugerød Stokke
Her har du CSS-snutten som gir deg dynamisk font-størrelse uten breakpoints. 📸: Ole Petter Baugerød Stokke Vis mer

Dette var uken for teknologisk nedtur📉, domfellelse av en kryptogründer🧑⚖️ og en nyfødt programvareutvikler. 🤖

Og 1843 ting skjedde i frontend-verdenen!

🔮 Siste nytt fra Interop-prosjektet

2023 viste seg å være et fantastisk år for Interop-prosjektet og flere viktige features ble endelig kompatible på tvers av nettlesere.

Deriblant :has(), container queries, subgrid og border image er noen av featursene som ble kompatible på tvers av nettleserne. 🎉

Interop-prosjektet er et samarbeid mellom ulike nettleserleverandører og har som mål å sikre samme funksjonalitet og atferd for webfunksjoner på tvers av ulike nettlesere👨💻

Nå er prosjektet i gang igjen for 2024, og det jobbes med 17 features som man håper på vil bli stabile. Det blir spennende å følge med på utviklingen!

Har du lyst på en sniktitt av det som kommer i 2024? Sjekk ut Interop 2024-dashboardet. ✨ Dette gir deg oversikt og status over arbeidet for 2024! 💥

🚀 React Server Components nå tilgjengelig i RedwoodJS

Denne uken kunne RedwoodJS annonsere at de har utviklet støtte for React Server Components (RSC). 🤩

Tilbake i juli 2023 kunngjorde core-teamet at de hadde startet arbeidet med å tilby støtte for RSC, som en løsning for både server-side rendering (SSR) og mange av ulempene ved rene SPA-er.

Med de nye endringene blir det det spennende å se om de klarer å ta opp kampen med Next.js. 💪

Rammeverket tilbyr mange av de samme funksjonene som Next.js, inkludert SSR, men skiller seg ut ved å legge til støtte for GraphQL. Vi som brukere er invitert til å teste og gi tilbakemeldinger på de nye endringene. ✨

👉Ta en titt og sjekk ut de nye endringene - kanskje RedwoodJS er et alternativ for ditt prosjekt?

💅CSS-triks for dynamisk skriftstørrelse

Er skriftstørrelsene dine justert med media queries? Vel, da bør du sjekke ut dette trikset! 💡

«This CSS is now part of most websites I make.» James Ficher

Som James Ficher viser, har man tidligere kunnet tilpasse skriftstørrelse basert på skjermstørrelse ved hjelp av media queries:

p { font-size: 1.125rem; }

@media (min-width: 740px) {
   p { font-size: 1.25rem; }
}

Istedenfor å definere skriftstørrelsen stykkevis ved hjelp av forskjellige breakpoints, er det mulig å bruke en lineær funksjon som tilnærmer seg ønsket størrelse jevnt over skjermens bredde:

:root {
    font-size: calc(1rem + 0.25vw);
}

Ved bruk av calc() kan vi definere en funksjon som øker skriftstørrelsen proporsjonalt med skjermens bredde ved å bruke viewport uniten vw, samtidig som den beholder et minimumsnivå definert av 1rem. Dermed blir størrelsen på skriften automatisk tilpasset skjermen og CSSen litt slankere.

Vinn-vinn for både brukere og utviklere. 🎉

Det var alt for nå, ses igjen neste uke! 👋