M

MLOG

Norsk

Lær hvordan du bygger robuste og tilgjengelige webapplikasjoner ved hjelp av progressiv forbedring og funksjonsdeteksjon. Denne veiledningen gir et globalt perspektiv.

Progressiv Forbedring: Funksjonsdeteksjon - Bygging av robuste nettopplevelser for et globalt publikum

I det stadig utviklende landskapet på internett er det avgjørende å sikre at webapplikasjonene dine er tilgjengelige, effektive og fremtidssikre. En av de mest effektive strategiene for å oppnå dette er progressiv forbedring, en designfilosofi som legger vekt på å bygge kjernefunksjonalitet som fungerer på tvers av et bredt spekter av enheter og nettlesere, samtidig som den legger til forbedringer basert på brukerens miljø. En avgjørende komponent i progressiv forbedring er funksjonsdeteksjon, som lar utviklere finne ut om en nettleser støtter en bestemt funksjon før den implementeres. Denne tilnærmingen garanterer en konsistent brukeropplevelse, spesielt på tvers av verdens mangfoldige teknologiske landskap.

Hva er progressiv forbedring?

Progressiv forbedring er en strategi for webutvikling som starter med et solid, tilgjengelig fundament og deretter legger til avanserte funksjoner etter hvert som nettleseren eller enheten tillater det. Denne tilnærmingen prioriterer innhold og kjernefunksjonalitet for alle brukere, uavhengig av enhet, nettleser eller internettforbindelse. Den omfavner ideen om at nettet skal være brukbart og informativt for alle, overalt.

Kjerneprinsippene for progressiv forbedring inkluderer:

Hvorfor funksjonsdeteksjon er viktig

Funksjonsdeteksjon er hjørnesteinen i progressiv forbedring. I stedet for å stole på nettlesersniffing (identifisere brukerens nettleser basert på brukeragentstrengen), fokuserer funksjonsdeteksjon på hva nettleseren *kan* gjøre. Dette er en mye mer pålitelig tilnærming fordi:

Metoder for funksjonsdeteksjon

Det finnes flere metoder for å oppdage nettleserfunksjoner, hver med sine styrker og svakheter. Den vanligste metoden bruker JavaScript for å sjekke om en bestemt funksjon eller API er til stede.

1. Bruke JavaScript for å sjekke etter funksjoner

Denne metoden er den mest utbredte og fleksible. Du sjekker tilgjengeligheten til en bestemt nettleserfunksjon ved hjelp av JavaScript-kode.

Eksempel: Sjekke for `fetch` API (JavaScript for å hente data fra nettverket)


hvis ('fetch' i vinduet) {
  // 'fetch'-API-et støttes. Bruk det til å laste data.
  fetch('data.json')
    .then(response => response.json())
    .then(data => {
      // Behandle dataene
    })
    .catch(error => {
      // Håndter feil
    });
} else {
  // 'fetch'-API-et støttes ikke. Bruk en fallback som XMLHttpRequest.
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json');
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // Behandle dataene
    } else {
      // Håndter feil
    }
  };
  xhr.onerror = function() {
    // Håndter feil
  };
  xhr.send();
}

I dette eksemplet sjekker koden om `fetch`-egenskapen finnes i `window`-objektet. Hvis den gjør det, støtter nettleseren `fetch`-API-et, og koden kan bruke det. Ellers implementeres en fallback-mekanisme (ved hjelp av `XMLHttpRequest`).

Eksempel: Sjekke for `classList` API-støtte


hvis ('classList' i document.body) {
  // Nettleseren støtter classList. Bruk classList-metoder (f.eks. add, remove)
  document.body.classList.add('has-js');
} else {
  // Nettleseren støtter ikke classList. Bruk alternative metoder.
  // f.eks. bruke strengmanipulering for å legge til og fjerne CSS-klasser
  document.body.className += ' has-js';
}

2. Bruke CSS-funksjonsspørringer (`@supports`)

CSS-funksjonsspørringer, betegnet med `@supports`-regelen, lar deg bruke CSS-regler basert på om nettleseren støtter spesifikke CSS-funksjoner eller egenskapsverdier.

Eksempel: Bruke `@supports` til å style et oppsett ved hjelp av Grid Layout


.container {
  display: flex; /* Fallback for nettlesere uten grid */
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

I dette eksemplet bruker `.container` først et `flex`-layout (en funksjon som er bredt støttet). `@supports`-regelen sjekker om nettleseren støtter `display: grid`. Hvis den gjør det, brukes stilene i regelen, og overstyrer det første flex-layoutet med et grid-layout.

3. Biblioteker og rammeverk

Flere biblioteker og rammeverk gir innebygde funksjonsdeteksjonsegenskaper eller verktøy som forenkler prosessen. Disse kan abstrahere kompleksiteten ved å sjekke for spesifikke funksjoner. Vanlige eksempler inkluderer:

Eksempel: Bruke Modernizr


<html class="no-js" >
<head>
  <!-- Andre metatagger, osv. -->
  <script src="modernizr.min.js"></script>
</head>
<body>
  <div class="my-element"></div>
  <script>
    if (Modernizr.borderradius) {
      // Bruk border-radius-stiler
      document.querySelector('.my-element').style.borderRadius = '10px';
    }
  </script>
</body>
</html>

I dette scenariet legger Modernizr til klassen `borderradius` til `<html>`-elementet hvis nettleseren støtter `border-radius`. JavaScript-koden sjekker deretter for denne klassen og bruker den tilsvarende stilen.

Praktiske eksempler og globale hensyn

La oss utforske noen praktiske eksempler på funksjonsdeteksjon og hvordan du implementerer dem, og tar hensyn til globale hensyn som tilgjengelighet, internasjonalisering (i18n) og ytelse.

1. Responsive bilder

Responsive bilder er avgjørende for å levere optimale bildestørrelser basert på brukerens enhet og skjermstørrelse. Funksjonsdeteksjon kan spille en avgjørende rolle i å implementere dem effektivt.

Eksempel: Sjekke for støtte for `srcset` og `sizes`

`srcset` og `sizes` er HTML-attributter som gir informasjon om bildekildealternativene til nettleseren, slik at den kan velge det mest passende bildet for den gjeldende konteksten. 


<img
  src="image-fallback.jpg"
  srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1024w"
  sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
  alt="Beskrivelse av bildet"
>

`srcset`-attributtet spesifiserer en liste over bildekilder med deres bredder. `sizes`-attributtet gir informasjon om bildets tiltenkte skjermstørrelse basert på mediespørringer.

Hvis nettleseren ikke støtter `srcset` og `sizes`, kan du bruke JavaScript og funksjonsdeteksjon for å oppnå et lignende resultat. Biblioteker som `picturefill` gir en polyfill for eldre nettlesere.


hvis (!('srcset' i document.createElement('img')) || !('sizes' i document.createElement('img'))) {
  // Bruk en polyfill som picturefill.js
  // Link til picturefill: https://scottjehl.github.io/picturefill/
  console.log('Bruker picturefill polyfill');
}

Denne tilnærmingen sikrer at alle brukere mottar optimaliserte bilder, uavhengig av nettleser.

2. Webanimasjoner

CSS-animasjoner og -overganger kan forbedre brukeropplevelsen betydelig, men de kan også være distraherende eller problematiske for noen brukere. Funksjonsdeteksjon lar deg tilby disse animasjonene bare når det er hensiktsmessig.

Eksempel: Oppdage støtte for CSS-overganger og -animasjoner


hvis (Modernizr.cssanimations && Modernizr.csstransitions) {
  // Bruk animasjonsklasser
  document.body.classList.add('animations-enabled');
} else {
  // Bruk et statisk brukergrensesnitt eller en mer grunnleggende opplevelse uten animasjoner
  document.body.classList.add('animations-disabled');
}

Ved å deaktivere animasjoner for brukere med eldre nettlesere eller når brukeren har uttrykt en preferanse for redusert bevegelse (via mediespørringen `prefers-reduced-motion`), kan du gi en jevnere og mer inkluderende opplevelse.

Globale hensyn for animasjoner: Vurder at noen brukere kan ha vestibulære lidelser eller andre tilstander som kan utløses av animasjoner. Gi alltid et alternativ for å deaktivere animasjoner. Respekter brukerens `prefers-reduced-motion`-innstilling.

3. Skjemavalidering

HTML5 introduserte kraftige funksjoner for skjemavalidering, for eksempel obligatoriske felt, validering av inndatatype (f.eks. e-post, nummer) og tilpassede feilmeldinger. Funksjonsdeteksjon lar deg utnytte disse funksjonene samtidig som du gir elegante fallbacks.

Eksempel: Sjekke for HTML5-skjemavalideringsstøtte


hvis ('checkValidity' i document.createElement('input')) {
  // Bruk HTML5-skjemavalidering.
  // Dette er innebygd, og krever ikke JavaScript
} else {
  // Implementer JavaScript-basert skjemavalidering.
  // Et bibliotek som Parsley.js kan være nyttig:
  // https://parsleyjs.org/
}

Dette sikrer at brukere med eldre nettlesere fortsatt mottar skjemavalidering, selv om den er implementert ved hjelp av JavaScript. Vurder å gi server-side validering som et endelig sikkerhets- og robusthetslag.

Globale hensyn for skjemavalidering: Sørg for at feilmeldingene dine er lokalisert og tilgjengelige. Gi klare, konsise feilmeldinger på brukerens språk. Vurder hvordan forskjellige dato- og tallformater brukes globalt.

4. Avanserte layoutteknikker (f.eks. CSS Grid)

CSS Grid Layout gir en kraftig måte å lage komplekse, responsive layouter på. Det er imidlertid viktig å sikre at eldre nettlesere håndteres på en elegant måte.

Eksempel: Bruke CSS Grid med en fallback


.container {
  display: flex;  /* Fallback for eldre nettlesere */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

Denne koden bruker `flexbox` som en fallback for nettlesere som ikke støtter `grid`. Hvis nettleseren støtter `grid`, vil layouten bli gjengitt ved hjelp av grid. Denne tilnærmingen skaper en responsiv layout som degraderes elegant i eldre nettlesere.

Globale hensyn for layout: Design for forskjellige skjermstørrelser, sideforhold og inndatametoder (f.eks. berøringsskjermer, tastaturnavigering). Test layoutene dine på forskjellige enheter og nettlesere som brukes globalt. Vurder støtte for høyre-til-venstre (RTL) språk hvis målgruppen din inkluderer brukere som leser RTL-skrifter (f.eks. arabisk, hebraisk).

Beste praksis for funksjonsdeteksjon

For å maksimere effektiviteten av funksjonsdeteksjon, følg disse beste fremgangsmåtene:

Adresse tilgjengelighet (a11y) i funksjonsdeteksjon

Tilgjengelighet er en kritisk komponent i progressiv forbedring. Funksjonsdeteksjon kan bidra til å sikre at nettstedet ditt er tilgjengelig for brukere med nedsatt funksjonsevne.

Internasjonalisering (i18n) og funksjonsdeteksjon

Når du bygger et globalt nettsted, bør du vurdere i18n. Funksjonsdeteksjon kan bidra til i18n-arbeidet ditt ved å legge til rette for språkspesifikt innhold og atferd.

Konklusjon: Bygge for fremtiden

Progressiv forbedring og funksjonsdeteksjon er ikke bare tekniske fremgangsmåter; de er grunnleggende prinsipper for webutvikling som lar deg skape inkluderende, effektive og robuste nettopplevelser for et globalt publikum. Ved å omfavne disse strategiene kan du bygge nettsteder som tilpasser seg det stadig skiftende teknologiske landskapet, og sikre at innholdet ditt er tilgjengelig og engasjerende for alle brukere, uavhengig av enhet, nettleser eller plassering. Ved å fokusere på kjernefunksjonalitet, omfavne funksjonsdeteksjon og prioritere tilgjengelighet, skaper du en mer robust og brukervennlig nettopplevelse for alle.

Etter hvert som nettet fortsetter å utvikle seg, vil viktigheten av progressiv forbedring bare øke. Ved å ta i bruk disse fremgangsmåtene i dag, investerer du i fremtiden til webapplikasjonene dine og sikrer deres suksess i det globale digitale økosystemet.

Gjennomførbare innsikter: