Progressiivinen parantaminen: JavaScript-ominaisuuksien tunnistus ja vararatkaisut globaalille webille

Internet on globaali alusta, ja web-kehittäjinä meidän vastuullamme on luoda kokemuksia, jotka ovat saavutettavia ja toimivia kaikille, riippumatta heidän sijainnistaan, laitteestaan, selaimestaan tai teknisistä valmiuksistaan. Progressiivinen parantaminen yhdistettynä JavaScript-ominaisuuksien tunnistukseen ja asianmukaisiin vararatkaisuihin on voimakas strategia tämän tavoitteen saavuttamiseksi.

Mitä on progressiivinen parantaminen?

Progressiivinen parantaminen on web-suunnittelustrategia, joka asettaa etusijalle ydinsisällön ja -toiminnallisuuden, varmistaen, että se on kaikkien käyttäjien saatavilla millä tahansa selaimella. Tämän jälkeen se lisää asteittain parannuskerroksia käyttäjän selaimen ominaisuuksien perusteella. Ajattele sitä kuin vankan perustan rakentamista ensin ja koristeiden lisäämistä myöhemmin.

Ydinperiaate on, että kaikkien tulisi pystyä käyttämään verkkosivuston olennaista sisältöä ja toiminnallisuutta. Jos käyttäjällä on vanhempi selain tai hän on poistanut JavaScriptin käytöstä, hänen tulisi silti pystyä navigoimaan sivustolla, lukemaan tekstiä ja suorittamaan perustehtäviä.

Progressiivinen parantaminen ei korvaa sulavaa heikentämistä (graceful degradation). Sulava heikentäminen on strategia, jossa rakennetaan ensin kaikkein monipuolisin kokemus ja tarjotaan sitten vararatkaisuja vanhemmille selaimille, jotka eivät tue uusimpia ominaisuuksia. Sulavan heikentämisen painopiste on enemmän toiminnallisuudessa ja vähemmän sisällössä. Sen sijaan progressiivisessa parantamisessa varmistetaan, että sisältö on ensin olemassa.

Miksi progressiivinen parantaminen on tärkeää globaalille yleisölle?

Harkitse näitä tekijöitä, jotka korostavat progressiivisen parantamisen tärkeyttä globaalille yleisölle:

• Vaihteleva selaintuki: Eri alueilla on vaihteleva uusimpien selainten käyttöönottoaste. Jotkut käyttäjät saattavat käyttää vanhempia selaimia laitteistorajoitusten, verkkorajoitusten tai yksinkertaisesti henkilökohtaisten mieltymysten vuoksi.
• Monipuoliset laitteet: Käyttäjät käyttävät verkkoa laajalla valikoimalla laitteita, huippuluokan älypuhelimista peruspuhelimiin. Progressiivinen parantaminen varmistaa, että verkkosivustosi toimii hyvin kaikilla niistä.
• Verkko-olosuhteet: Verkon nopeudet ja luotettavuus vaihtelevat suuresti eri puolilla maailmaa. Progressiivinen parantaminen mahdollistaa verkkosivustosi nopean latautumisen ja toiminnan jopa hitailla tai katkeilevilla yhteyksillä.
• JavaScriptin saatavuus: Jotkut käyttäjät saattavat poistaa JavaScriptin käytöstä turvallisuussyistä tai suorituskykyyn liittyvien huolien vuoksi. Progressiivisesti parannetun verkkosivuston tulisi olla käytettävissä myös ilman JavaScriptiä.
• Saavutettavuus: Progressiivinen parantaminen auttaa varmistamaan, että verkkosivustosi on saavutettavissa vammaisille käyttäjille, jotka saattavat turvautua avustaviin teknologioihin.

JavaScript-ominaisuuksien tunnistus

JavaScript-ominaisuuksien tunnistus on prosessi, jossa selvitetään, tukeeko tietty selain tiettyä JavaScript-ominaisuutta tai API:a. Tämä mahdollistaa koodin ehdollisen suorittamisen selaimen ominaisuuksien perusteella.

Vältä selaimen nuuskimista (Browser Sniffing): On tärkeää välttää selaimen nuuskimista, joka perustuu selaimen tunnistamiseen sen user agent -merkkijonon perusteella. User agent -merkkijonoja voidaan helposti väärentää, eivätkä ne heijasta tarkasti selaimen ominaisuuksia. Ominaisuuksien tunnistus on paljon luotettavampi lähestymistapa.

Kuinka toteuttaa ominaisuuksien tunnistus

Tässä on joitakin yleisiä tekniikoita JavaScript-ominaisuuksien tunnistamiseen:

• `typeof`-operaattori: Käytä `typeof`-operaattoria tarkistaaksesi, onko globaali objekti tai ominaisuus olemassa.

            if (typeof window.localStorage !== 'undefined') {
  // localStorage is supported
  localStorage.setItem('myKey', 'myValue');
} else {
  // localStorage is not supported
  console.log('localStorage is not available in this browser.');
}

            

              
                Copy
              
            
          

• Objektin ominaisuuksien tarkistaminen: Tarkista, onko objektilla tiettyä ominaisuutta tai metodia.

            if ('geolocation' in navigator) {
  // Geolocation API is supported
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log('Latitude: ' + position.coords.latitude);
    console.log('Longitude: ' + position.coords.longitude);
  }, function(error) {
    console.error('Error getting geolocation:', error);
  });
} else {
  // Geolocation API is not supported
  console.log('Geolocation is not available in this browser.');
}

            

              
                Copy
              
            
          

• Modernizrin käyttäminen: Modernizr on suosittu JavaScript-kirjasto, joka yksinkertaistaa ominaisuuksien tunnistusta. Se tarjoaa kattavan joukon testejä eri selainominaisuuksille ja lisää luokkia `<html>`-elementtiin, jotka ilmaisevat, mitkä ominaisuudet ovat tuettuja.

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

  <p>This example uses Modernizr to detect if the browser supports WebGL.</p>

  <script>
    if (Modernizr.webgl) {
      console.log('WebGL is supported!');
      // Initialize WebGL here
    } else {
      console.log('WebGL is not supported.');
      // Provide a fallback
    }
  </script>

</body>
</html>

            

              
                Copy
              
            
          

Vararatkaisujen tarjoaminen

Kun olet havainnut, että selain ei tue tiettyä ominaisuutta, on olennaista tarjota vararatkaisu. Vararatkaisu on vaihtoehtoinen toteutus, joka tarjoaa samanlaista toiminnallisuutta eri tekniikoilla.

Vararatkaisujen tyypit

• Polyfillit: Polyfill on JavaScript-koodi, joka tarjoaa uudemman ominaisuuden toiminnallisuuden vanhemmissa selaimissa. Voit esimerkiksi käyttää polyfilliä tarjotaksesi tuen `fetch`-API:lle vanhemmissa selaimissa, jotka eivät tue sitä natiivisti.

            // Example using a fetch polyfill
if (!('fetch' in window)) {
  // Include the fetch polyfill
  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 {
  // Use the native fetch API
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));
}

            

              
                Copy
              
            
          

• Vaihtoehtoinen sisältö: Jos selain ei tue tiettyä mediamuotoa (esim. WebP-kuvia), voit tarjota vaihtoehtoisen muodon (esim. JPEG tai PNG).

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

            

              
                Copy
              
            
          

• Yksinkertaistettu toiminnallisuus: Jos ominaisuutta ei tueta, voit tarjota yksinkertaistetun version toiminnallisuudesta. Esimerkiksi, jos selain ei tue edistyneitä CSS-animaatioita, voit käyttää perus-JavaScript-animaatioita sen sijaan.

• Palvelinpuolen renderöinti: Jos JavaScript on poistettu käytöstä tai ei lataudu, palvelinpuolen renderöinti voi varmistaa, että ydinsisältö on silti saatavilla. Tämä tarkoittaa HTML:n generointia palvelimella ja sen lähettämistä selaimeen.

Esimerkki: Lomakkeen validointi

Harkitse lomaketta, jossa on asiakaspuolen validointi JavaScriptin avulla. Jos JavaScript on poistettu käytöstä, validoinnin tulisi silti tapahtua palvelinpuolella.

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

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', function(event) {
    const emailInput = document.getElementById('email');
    if (!emailInput.checkValidity()) {
      event.preventDefault(); // Prevent form submission
      alert('Please enter a valid email address.');
    }
  });
</script>

            

              
                Copy
              
            
          

Tässä esimerkissä asiakaspuolen JavaScript validoi sähköpostiosoitteen ennen lomakkeen lähettämistä. Kuitenkin, jos JavaScript on poistettu käytöstä, `checkValidity()`-metodia ei suoriteta. Siksi sinun on toteutettava myös palvelinpuolen validointi varmistaaksesi, että sähköpostiosoite on kelvollinen ennen lomaketietojen käsittelyä.

Esimerkki: Interaktiivinen kartta

Oletetaan, että haluat upottaa interaktiivisen kartan käyttämällä JavaScript-karttakirjastoa, kuten Leaflet tai Google Maps. Jos JavaScript on poistettu käytöstä, voit tarjota staattisen kuvan kartasta vararatkaisuna.

            <div id="map">
  <noscript>
    <img src="map-static.png" alt="Map of the location">
  </noscript>
</div>

<script>
  // Initialize the map if JavaScript is enabled
  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('A pretty CSS3 popup.<br> Easily customizable.')
      .openPopup();
  }
</script>

            

              
                Copy
              
            
          

Tässä esimerkissä `<noscript>`-tagi sisältää staattisen kuvan kartasta, joka näytetään, jos JavaScript on poistettu käytöstä. Jos JavaScript on käytössä, skripti alustaa interaktiivisen kartan Leafletin avulla.

Progressiivisen parantamisen parhaat käytännöt

• Aloita ydinsisällöstä: Keskity ensin tarjoamaan olennainen sisältö ja toiminnallisuus. Varmista, että se on saatavilla ilman JavaScriptiä.
• Käytä semanttista HTML:ää: Käytä semanttisia HTML-elementtejä sisältösi jäsentämiseen. Tämä tekee verkkosivustostasi saavutettavamman ja helpommin ylläpidettävän.
• Häiriötön JavaScript: Pidä JavaScript-koodisi erillään HTML-rakenteestasi. Tämä tekee verkkosivustostasi ylläpidettävämmän ja helpommin päivitettävän.
• Testaa eri selaimilla ja laitteilla: Testaa verkkosivustosi perusteellisesti useilla eri selaimilla, laitteilla ja verkko-olosuhteilla varmistaaksesi, että se toimii odotetusti. Työkalut, kuten BrowserStack tai Sauce Labs, voivat auttaa selainten välisessä testauksessa.
• Priorisoi saavutettavuus: Noudata saavutettavuusohjeita (esim. WCAG) varmistaaksesi, että verkkosivustosi on saavutettavissa vammaisille käyttäjille.
• Seuraa ja iteroi: Seuraa jatkuvasti verkkosivustosi suorituskykyä ja käyttäjäkokemusta. Käytä analytiikkaa parannuskohteiden tunnistamiseen ja iteroi suunnitteluasi ja toteutustasi.
• Sisältö edellä: Rakenna sisältö luettavaksi, kun CSS ja JavaScript eivät ole ladattuina.
• Hyödynnä CSS:ää parantamiseen: Käytä CSS:ää parantaaksesi asteittain verkkosivustosi visuaalista ilmettä. Voit esimerkiksi käyttää CSS3-ominaisuuksia, kuten liukuvärejä, varjoja ja siirtymiä, lisätäksesi visuaalista näyttävyyttä suunnitteluusi. Varmista kuitenkin aina, että ydinrakenne ja sisältö ovat saavutettavissa ilman näitä parannuksia.

Kansainvälistämisen (i18n) ja lokalisoinnin (l10n) huomioiminen

Kun rakennetaan verkkosivustoja globaalille yleisölle, on tärkeää ottaa huomioon kansainvälistäminen (i18n) ja lokalisointi (l10n). Kansainvälistäminen on prosessi, jossa verkkosivusto suunnitellaan ja kehitetään siten, että se on helppo mukauttaa eri kieliin ja alueisiin. Lokalisointi on prosessi, jossa verkkosivusto mukautetaan tiettyyn kieleen ja alueeseen.

• Kielen valinta: Tarjoa käyttäjille tapa valita haluamansa kieli. Tämä voidaan tehdä navigointivalikon kielivalitsimella tai tunnistamalla käyttäjän kieli automaattisesti hänen selainasetustensa perusteella.
• Tekstin suunta: Tue sekä vasemmalta oikealle (LTR) että oikealta vasemmalle (RTL) kirjoitussuuntia. Jotkut kielet, kuten arabia ja heprea, kirjoitetaan oikealta vasemmalle.
• Päivämäärän ja ajan muotoilu: Muotoile päivämäärät ja ajat käyttäjän lokaalin mukaan. Eri alueilla on erilaiset käytännöt päivämäärien ja aikojen muotoiluun.
• Valuutan muotoilu: Muotoile valuutat käyttäjän lokaalin mukaan. Eri alueilla on erilaiset valuuttasymbolit ja muotoilukäytännöt.
• Numeroiden muotoilu: Muotoile numerot käyttäjän lokaalin mukaan. Eri alueilla on erilaiset käytännöt numeroiden muotoiluun, kuten pilkkujen ja pisteiden käyttö.
• Kääntäminen: Käännä kaikki tekstisisältö kohdekielille. Käytä ammattikääntäjiä varmistaaksesi, että käännökset ovat tarkkoja ja kulttuurisesti sopivia.
• Merkistökoodaus: Käytä UTF-8-merkistökoodausta tukeaksesi laajaa valikoimaa merkkejä eri kielistä.

Esimerkkejä progressiivisesta parantamisesta käytännössä

• Responsiiviset kuvat: Käytä `<picture>`-elementtiä ja `srcset`-attribuuttia tarjotaksesi erikokoisia kuvia eri näyttökokoja varten. Selaimet, jotka eivät tue näitä ominaisuuksia, käyttävät vararatkaisuna `<img>`-elementtiä.
• CSS Grid Layout: Käytä CSS Grid Layoutia luodaksesi monimutkaisia asetteluita. Selaimet, jotka eivät tue CSS Grid Layoutia, käyttävät vararatkaisuna vanhempia asettelutekniikoita, kuten floatteja tai flexboxia.
• Web Animations API: Käytä Web Animations API:a luodaksesi suorituskykyisiä animaatioita. Selaimet, jotka eivät tue Web Animations API:a, voivat käyttää CSS-siirtymiä tai JavaScript-animaatioita vararatkaisuna.

Yhteenveto

Progressiivinen parantaminen on arvokas strategia osallistavien ja saavutettavien verkkokokemusten luomiseksi globaalille yleisölle. Asettamalla etusijalle ydinsisällön ja -toiminnallisuuden, käyttämällä JavaScript-ominaisuuksien tunnistusta ja tarjoamalla asianmukaisia vararatkaisuja voit varmistaa, että verkkosivustosi toimii hyvin kaikille, riippumatta heidän sijainnistaan, laitteestaan, selaimestaan tai teknisistä valmiuksistaan. Progressiivisen parantamisen omaksuminen ei ainoastaan paranna saavutettavuutta, vaan myös edistää kestävämpää ja joustavampaa webiä kaikille.

Muista testata verkkosivustosi perusteellisesti eri selaimilla ja laitteilla ja seurata jatkuvasti sen suorituskykyä ja käyttäjäkokemusta. Noudattamalla näitä parhaita käytäntöjä voit luoda verkkosivuston, joka on todella saavutettava ja nautittava käyttäjille ympäri maailmaa.