Progressiv förbättring: Funktionsdetektering i JavaScript och fallbacks för en global webb

Internet är en global plattform, och som webbutvecklare är det vårt ansvar att skapa upplevelser som är tillgängliga och funktionella för alla, oavsett deras plats, enhet, webbläsare eller tekniska förmåga. Progressiv förbättring, i kombination med funktionsdetektering i JavaScript och lämpliga fallbacks, är en kraftfull strategi för att uppnå detta mål.

Vad är progressiv förbättring?

Progressiv förbättring är en webbdesignstrategi som prioriterar kärninnehåll och funktionalitet, och säkerställer att det är tillgängligt för alla användare med vilken webbläsare som helst. Därefter läggs lager av förbättringar till progressivt baserat på användarens webbläsares kapabiliteter. Se det som att bygga en solid grund först och sedan lägga till dekorationer senare.

Kärnprincipen är att alla ska kunna komma åt det väsentliga innehållet och funktionaliteten på en webbplats. Om en användare har en äldre webbläsare eller har inaktiverat JavaScript, ska de fortfarande kunna navigera på sidan, läsa texten och utföra grundläggande uppgifter.

Progressiv förbättring är inte en ersättning för "graceful degradation" (gradvis nedbrytning). Graceful degradation är en strategi där man först bygger den mest funktionsrika upplevelsen och sedan tillhandahåller fallbacks för äldre webbläsare som inte stöder de senaste funktionerna. Fokus för graceful degradation ligger mer på funktionalitet och mindre på innehåll. Progressiv förbättring handlar däremot om att se till att innehållet finns där först.

Varför är progressiv förbättring viktigt för en global publik?

Tänk på dessa faktorer som belyser vikten av progressiv förbättring för en global publik:

• Varierande webbläsarstöd: Olika regioner har varierande nivåer av anammande av de senaste webbläsarna. Vissa användare kan använda äldre webbläsare på grund av hårdvarubegränsningar, nätverksbegränsningar eller helt enkelt personliga preferenser.
• Mångfald av enheter: Användare når webben på ett brett spektrum av enheter, från avancerade smartphones till enklare funktionstelefoner. Progressiv förbättring säkerställer att din webbplats fungerar bra på alla dessa.
• Nätverksförhållanden: Nätverkshastigheter och tillförlitlighet varierar stort över hela världen. Progressiv förbättring gör att din webbplats kan laddas snabbt och fungera även på långsamma eller instabila anslutningar.
• JavaScript-tillgänglighet: Vissa användare kan inaktivera JavaScript av säkerhetsskäl eller på grund av prestandaproblem. En webbplats med progressiv förbättring bör fortfarande vara användbar utan JavaScript.
• Tillgänglighet: Progressiv förbättring hjälper till att säkerställa att din webbplats är tillgänglig för användare med funktionsnedsättningar som kan förlita sig på hjälpmedelsteknik.

Funktionsdetektering i JavaScript

Funktionsdetektering i JavaScript är processen att avgöra om en specifik webbläsare stöder en viss JavaScript-funktion eller API. Detta gör att du villkorligt kan köra kod baserat på webbläsarens kapabiliteter.

Undvik webbläsardetektering (Browser Sniffing): Det är avgörande att undvika webbläsardetektering, som förlitar sig på att identifiera webbläsaren baserat på dess user agent-sträng. User agent-strängar kan enkelt förfalskas och de återspeglar inte webbläsarens kapabiliteter korrekt. Funktionsdetektering är en mycket mer tillförlitlig metod.

Hur man implementerar funktionsdetektering

Här är några vanliga tekniker för funktionsdetektering i JavaScript:

• `typeof`-operatorn: Använd `typeof`-operatorn för att kontrollera om ett globalt objekt eller en egenskap existerar.

            if (typeof window.localStorage !== 'undefined') {
  // localStorage stöds
  localStorage.setItem('myKey', 'myValue');
} else {
  // localStorage stöds inte
  console.log('localStorage är inte tillgängligt i denna webbläsare.');
}

            

              
                Copy
              
            
          

• Kontrollera objektegenskaper: Kontrollera om ett objekt har en specifik egenskap eller metod.

            if ('geolocation' in navigator) {
  // Geolocation API stöds
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log('Latitude: ' + position.coords.latitude);
    console.log('Longitude: ' + position.coords.longitude);
  }, function(error) {
    console.error('Fel vid hämtning av geolokalisering:', error);
  });
} else {
  // Geolocation API stöds inte
  console.log('Geolokalisering är inte tillgängligt i denna webbläsare.');
}

            

              
                Copy
              
            
          

• Använda Modernizr: Modernizr är ett populärt JavaScript-bibliotek som förenklar funktionsdetektering. Det erbjuder en omfattande uppsättning tester för olika webbläsarfunktioner och lägger till klasser i `<html>`-elementet som indikerar vilka funktioner som stöds.

            <!DOCTYPE html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <title>Modernizr Exempel</title>
  <script src="modernizr.js"></script>
</head>
<body>

  <p>Detta exempel använder Modernizr för att upptäcka om webbläsaren stöder WebGL.</p>

  <script>
    if (Modernizr.webgl) {
      console.log('WebGL stöds!');
      // Initiera WebGL här
    } else {
      console.log('WebGL stöds inte.');
      // Tillhandahåll en fallback
    }
  </script>

</body>
</html>

            

              
                Copy
              
            
          

Tillhandahålla fallbacks

När du har upptäckt att en webbläsare не stöder en viss funktion är det viktigt att tillhandahålla en fallback. En fallback är en alternativ implementering som ger liknande funktionalitet med hjälp av andra tekniker.

Typer av fallbacks

• Polyfills: En polyfill är en JavaScript-kod som tillhandahåller funktionaliteten hos en nyare funktion i äldre webbläsare. Du kan till exempel använda en polyfill för att ge stöd för `fetch`-API:et i äldre webbläsare som inte stöder det från början.

            // Exempel med en fetch-polyfill
if (!('fetch' in window)) {
  // Inkludera fetch-polyfillen
  var script = document.createElement('script');
  script.src = 'fetch.js';
  document.head.appendChild(script);

  script.onload = function() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => console.log(data));
  };
} else {
  // Använd det inbyggda fetch-API:et
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));
}

            

              
                Copy
              
            
          

• Alternativt innehåll: Om en webbläsare inte stöder ett visst medieformat (t.ex. WebP-bilder), kan du erbjuda ett alternativt format (t.ex. JPEG eller PNG).

            <picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Min bild">
</picture>

            

              
                Copy
              
            
          

• Förenklad funktionalitet: Om en funktion inte stöds kan du erbjuda en förenklad version av funktionaliteten. Om en webbläsare till exempel inte stöder avancerade CSS-animationer kan du använda grundläggande JavaScript-animationer istället.

• Server-side rendering: Om JavaScript är inaktiverat eller misslyckas med att ladda kan server-side rendering säkerställa att kärninnehållet fortfarande är tillgängligt. Detta innebär att HTML-koden genereras på servern och skickas till webbläsaren.

Exempel: Formulärvalidering

Tänk dig ett formulär med klientsidesvalidering med hjälp av JavaScript. Om JavaScript är inaktiverat bör valideringen ändå ske på serversidan.

            <form action="/submit" method="post" id="myForm">
  <label for="email">E-post:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Skicka</button>
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', function(event) {
    const emailInput = document.getElementById('email');
    if (!emailInput.checkValidity()) {
      event.preventDefault(); // Förhindra att formuläret skickas
      alert('Vänligen ange en giltig e-postadress.');
    }
  });
</script>

            

              
                Copy
              
            
          

I det här exemplet validerar JavaScript-koden på klientsidan e-postadressen innan formuläret skickas. Men om JavaScript är inaktiverat kommer `checkValidity()`-metoden inte att köras. Därför måste du även implementera validering på serversidan för att säkerställa att e-postadressen är giltig innan formulärdatan behandlas.

Exempel: Interaktiv karta

Låt oss säga att du vill bädda in en interaktiv karta med ett JavaScript-kartbibliotek som Leaflet eller Google Maps. Om JavaScript är inaktiverat kan du erbjuda en statisk bild av kartan som en fallback.

            <div id="map">
  <noscript>
    <img src="map-static.png" alt="Karta över platsen">
  </noscript>
</div>

<script>
  // Initiera kartan om JavaScript är aktiverat
  if (document.getElementById('map')) {
    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([51.5, -0.09]).addTo(map)
      .bindPopup('En snygg CSS3-popup.<br> Enkelt anpassningsbar.')
      .openPopup();
  }
</script>

            

              
                Copy
              
            
          

I detta exempel innehåller `<noscript>`-taggen en statisk bild av kartan, som visas om JavaScript är inaktiverat. Om JavaScript är aktiverat kommer skriptet att initiera den interaktiva kartan med Leaflet.

Bästa praxis för progressiv förbättring

• Börja med kärninnehållet: Fokusera på att tillhandahålla det väsentliga innehållet och funktionaliteten först. Se till att det är tillgängligt utan JavaScript.
• Använd semantisk HTML: Använd semantiska HTML-element för att strukturera ditt innehåll. Detta gör din webbplats mer tillgänglig och lättare att underhålla.
• Diskret JavaScript: Håll din JavaScript-kod separat från din HTML-struktur. Detta gör din webbplats mer underhållbar och lättare att uppdatera.
• Testa på olika webbläsare och enheter: Testa din webbplats noggrant på en mängd olika webbläsare, enheter och nätverksförhållanden för att säkerställa att den fungerar som förväntat. Verktyg som BrowserStack eller Sauce Labs kan hjälpa till med testning över olika webbläsare.
• Prioritera tillgänglighet: Följ riktlinjer för tillgänglighet (t.ex. WCAG) för att säkerställa att din webbplats är tillgänglig för användare med funktionsnedsättningar.
• Övervaka och iterera: Övervaka kontinuerligt din webbplats prestanda och användarupplevelse. Använd analysverktyg för att identifiera förbättringsområden och iterera på din design och implementering.
• Innehåll först: Strukturera innehållet så att det är läsbart när CSS och JavaScript не har laddats.
• Utnyttja CSS för förbättringar: Använd CSS för att progressivt förbättra det visuella utseendet på din webbplats. Du kan till exempel använda CSS3-funktioner som övertoningar, skuggor och övergångar för att lägga till visuell flärd i din design. Men se alltid till att den grundläggande layouten och innehållet är tillgängligt utan dessa förbättringar.

Hänsyn till internationalisering (i18n) och lokalisering (l10n)

När man bygger webbplatser för en global publik är det avgörande att ta hänsyn till internationalisering (i18n) och lokalisering (l10n). Internationalisering är processen att designa och utveckla din webbplats på ett sätt som gör den enkel att anpassa till olika språk och regioner. Lokalisering är processen att anpassa din webbplats till ett specifikt språk och en specifik region.

• Språkval: Ge användarna ett sätt att välja sitt föredragna språk. Detta kan göras via en språkväljare i navigeringsmenyn eller genom att automatiskt upptäcka användarens språk baserat på deras webbläsarinställningar.
• Textriktning: Stöd både vänster-till-höger (LTR) och höger-till-vänster (RTL) textriktningar. Vissa språk, som arabiska och hebreiska, skrivs från höger till vänster.
• Datum- och tidsformatering: Formatera datum och tider enligt användarens lokala inställningar. Olika regioner har olika konventioner för formatering av datum och tid.
• Valutaformatering: Formatera valutor enligt användarens lokala inställningar. Olika regioner har olika valutasymboler och formateringskonventioner.
• Nummerformatering: Formatera nummer enligt användarens lokala inställningar. Olika regioner har olika konventioner för att formatera nummer, såsom användning av kommatecken och punkter.
• Översättning: Översätt allt textinnehåll till målspråken. Använd professionella översättare för att säkerställa att översättningarna är korrekta och kulturellt lämpliga.
• Teckenkodning: Använd UTF-8-teckenkodning för att stödja ett brett utbud av tecken från olika språk.

Exempel på progressiv förbättring i praktiken

• Responsiva bilder: Använd `<picture>`-elementet och `srcset`-attributet för att tillhandahålla olika bildstorlekar för olika skärmstorlekar. Webbläsare som inte stöder dessa funktioner kommer att falla tillbaka på `<img>`-elementet.
• CSS Grid Layout: Använd CSS Grid Layout för att skapa komplexa layouter. Webbläsare som inte stöder CSS Grid Layout kommer att falla tillbaka på äldre layouttekniker som floats eller flexbox.
• Web Animations API: Använd Web Animations API för att skapa prestanda-effektiva animationer. Webbläsare som inte stöder Web Animations API kan använda CSS-övergångar eller JavaScript-animationer som en fallback.

Slutsats

Progressiv förbättring är en värdefull strategi för att skapa inkluderande och tillgängliga webbupplevelser för en global publik. Genom att prioritera kärninnehåll och funktionalitet, använda funktionsdetektering i JavaScript och tillhandahålla lämpliga fallbacks kan du säkerställa att din webbplats fungerar bra för alla, oavsett deras plats, enhet, webbläsare eller tekniska förmåga. Att anamma progressiv förbättring ökar inte bara tillgängligheten utan bidrar också till en mer robust och motståndskraftig webb för alla.

Kom ihåg att testa din webbplats noggrant på olika webbläsare och enheter, och övervaka kontinuerligt dess prestanda och användarupplevelse. Genom att följa dessa bästa metoder kan du skapa en webbplats som är verkligt tillgänglig och njutbar för användare över hela världen.