Nå kan du bruke container queries i CSS - men hvorfor, og hvordan?

Støtte for container queries, PWA-boost på iOS, core-js ved vendepunkt og SEO-guide i ForrigeUke.

"En utrolig etterlengtet feature er endelig støttet i alle store browsere — nemlig container queries". 📸: Ole Petter Baugerød Stokke
"En utrolig etterlengtet feature er endelig støttet i alle store browsere — nemlig container queries". 📸: Ole Petter Baugerød Stokke Vis mer

Dette var uken da mulighetsvinduet til å oppleve IE ble enda smalere 🙅 Og 6543 ting andre ting skjedde i frontend-verdenen!

Endelig støtte for container queries i CSS! ⭐️

En utrolig etterlengtet feature er endelig støttet i alle store browsere — nemlig container queries.

Dette vil gjøre jobben langt enklere når du skal lage responsivt design! Med container queries kan du basere deg på mengden tilgjengelig plass en container har, fremfor i dag hvor du må bruke media queries som baserer seg på størrelsen av nettleservinduet.

Slik fungerer det: Du definerer en containment context ved å sette container-type attributtet på en CSS-selector, og så kan du bruke @container lenger ned i “treet”. Da vil du få en komponent som forholder seg til størrelsen til containeren, i stedet for hele nettleservinduet!

.wrapper-rundt-innhold {
  container-type: inline-size;
}

@container (width > 700px) {
  .innhold {
    font-size: 2em;
  }
}

core-js står ved et vendepunkt

I forrige uke kunne vi lese et interessant og ganske trist innlegg fra skaperen av core-js om hvordan det det er å jobbe med gratis open-source kode.

Ifølge utvikleren har arbeidet med dette over 9 år vært en svært utakknemlig jobb. Forsøk på å få inn litt penger for å forvalte biblioteket slik at han har noe å leve av resulterer i lite avkastning, latterliggjøring og hets.

core-js er et bibliotek som de aller fleste som bruker JavaScript bruker. Noen direkte, men de aller fleste indirekte via f. eks babel. Det tilbyr polyfills slik at utviklere kan bruke ny JavaScript-kode uten å knekke eldre nettlesere. Med ca. 250 millioner nedlastninger fra npm hver måned er det ett av de mest brukte bibliotekene, og det hele blir forvaltet frivillig av én kar. Trikkefaktor, sa du?

Så, hvorfor er dette viktig? Veldig mange avhengigheter vi bruker er av denne typen — laget av noen som gjør dette på helt frivillig basis, og som får lite igjen for strevet. Hvordan skal vi som utviklersamfunn forholde oss til gratis open-source kode? Hvordan kan vi jobbe for å sikre at maintainere som denne, som virkelig brenner for dette, kan få nok igjen for det til å leve av?

SEO — hva er lurt å huske på?

Har du noengang tenkt på hvordan du lander nettsiden din høyt blant søketreff i søkemotorene?

En ting er jo at det er viktig å ha mange klikk, men det er også en rekke små og store ting du kan gjøre for å få folk til å velge ditt søketreff over andres, og få søkemotorene til å prioritere din nettside over andres.

I forrige uke kom vi over en kjempefin huskeliste på hva du bør tenke over. Alt fra å legge inn en god og klikkbar tittel og beskrivelse, til å sørge for små bundles og rask lastetid for å få søkemotorene til å prioritere nettopp din nettside!

PWA til folket! ✊

Hvis du noen gang har forsøkt å lage en progressive web app som fungerer for både desktop, Android og iOS, så har du kanskje opplevd at det ikke har vært helt smertefritt! Her snakker jeg iallfall ut fra egen erfaring.

En progressive web app er, veldig forenklet, en måte å gjøre en nettside “installerbar” som en app på mobilen. Det vil si at du kan lage en vanlig web app, og samtidig la brukeren få opplevelsen av at de har en mobilapp fremfor en nettside, om det er ønskelig.

Dette høres veldig bra ut, og fungerer rimelig greit på Android-telefoner. Men når man så skal gjøre tilsvarende for iPhone og iPad har det ikke vært like enkelt, og da undertegnede testet ut dette for to år siden så det ikke ut til at det kom til å skje så mye på denne fronten.

Det var iallfall inntil releasen av iOS and iPadOS 16.4 beta 1 i forrige uke! Da tok Apple et stort steg i riktig retning for å gjøre dette til en langt mer hyggelig affære!

Nå tillater de blant annet installasjonsfunksjonalitet (Add To Homescreen) fra flere nettlesere enn kun Safari og push-notifikasjoner på lik linje med andre apper. Så blir det spennende å se om dette fører til et rush med nye PWAer?

Det var alt vi hadde for denne gang! Tusen takk for at du leste, også sees vi i neste uke! 👋