M

MLOG

Latviešu

Uzziniet, kā izveidot robustas un pieejamas tīmekļa lietojumprogrammas, izmantojot progresīvu uzlabošanu un funkciju noteikšanu. Šis ceļvedis sniedz globālu perspektīvu, praktiskus piemērus un paraugpraksi iekļaujošas un nākotnei drošas tīmekļa pieredzes radīšanai.

Progresīva uzlabošana: funkciju noteikšana — izturīgu tīmekļa pieredžu veidošana globālai auditorijai

Nepārtraukti mainīgajā interneta vidē ir ļoti svarīgi nodrošināt, lai jūsu tīmekļa lietojumprogrammas būtu pieejamas, efektīvas un nākotnei drošas. Viena no efektīvākajām stratēģijām, lai to panāktu, ir progresīva uzlabošana — dizaina filozofija, kas uzsver pamata funkcionalitātes veidošanu, kas darbojas plašā ierīču un pārlūkprogrammu klāstā, vienlaikus pievienojot uzlabojumus, pamatojoties uz lietotāja vides iespējām. Būtisks progresīvas uzlabošanas komponents ir funkciju noteikšana, kas ļauj izstrādātājiem noteikt, vai pārlūkprogramma atbalsta konkrētu funkciju, pirms to ievieš. Šī pieeja garantē konsekventu lietotāja pieredzi, īpaši daudzveidīgajā tehnoloģiskajā vidē pasaulē.

Kas ir progresīva uzlabošana?

Progresīva uzlabošana ir tīmekļa izstrādes stratēģija, kas sākas ar stabilu, pieejamu pamatu un pēc tam slāņo uzlabotas funkcijas, kā to ļauj pārlūkprogramma vai ierīce. Šī pieeja prioritāti piešķir saturam un galvenajai funkcionalitātei visiem lietotājiem neatkarīgi no viņu ierīces, pārlūkprogrammas vai interneta savienojuma. Tajā ir ietverta ideja, ka tīmeklis jālieto un jāinformē visiem un visur.

Progresīvas uzlabošanas pamatprincipi ietver:

Kāpēc funkciju noteikšana ir būtiska

Funkciju noteikšana ir progresīvas uzlabošanas stūrakmens. Tā vietā, lai paļautos uz pārlūkprogrammas saņemšanu (lietotāja pārlūkprogrammas identificēšanu, pamatojoties uz tās lietotāja aģenta virkni), funkciju noteikšana koncentrējas uz to, ko pārlūkprogramma *var* darīt. Šī ir daudz uzticamāka pieeja, jo:

Funkciju noteikšanas metodes

Ir vairākas metodes pārlūkprogrammas funkciju noteikšanai, un katrai no tām ir savas stiprās un vājās puses. Visizplatītākā metode izmanto JavaScript, lai pārbaudītu konkrētas funkcijas vai API esamību.

1. JavaScript izmantošana funkciju pārbaudei

Šī metode ir visizplatītākā un elastīgākā. Jūs pārbaudāt konkrētas pārlūkprogrammas funkcijas pieejamību, izmantojot JavaScript kodu.

Piemērs: `fetch` API pārbaude (JavaScript datu iegūšanai no tīkla)


if ('fetch' in window) {
  // Tiek atbalstīts 'fetch' API. Izmantojiet to, lai ielādētu datus.
  fetch('data.json')
    .then(response => response.json())
    .then(data => {
      // Apstrādāt datus
    })
    .catch(error => {
      // Apstrādāt kļūdas
    });
} else {
  // 'fetch' API netiek atbalstīts. Izmantojiet rezerves variantu, piemēram, XMLHttpRequest.
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json');
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // Apstrādāt datus
    } else {
      // Apstrādāt kļūdas
    }
  };
  xhr.onerror = function() {
    // Apstrādāt kļūdas
  };
  xhr.send();
}

Šajā piemērā kods pārbauda, vai `fetch` rekvizīts pastāv objektā `window`. Ja tas ir, pārlūkprogramma atbalsta `fetch` API, un kods to var izmantot. Pretējā gadījumā tiek ieviests rezerves mehānisms (izmantojot `XMLHttpRequest`).

Piemērs: `classList` API atbalsta pārbaude


if ('classList' in document.body) {
  // Pārlūkprogramma atbalsta classList.  Izmantojiet classList metodes (piem., add, remove)
  document.body.classList.add('has-js');
} else {
  // Pārlūkprogramma neatbalsta classList. Izmantojiet alternatīvas metodes.
  // piemēram, izmantojot virknes manipulāciju, lai pievienotu un noņemtu CSS klases
  document.body.className += ' has-js';
}

2. CSS funkciju vaicājumu izmantošana (`@supports`)

CSS funkciju vaicājumi, ko apzīmē `@supports` at-rule, ļauj lietot CSS noteikumus, pamatojoties uz to, vai pārlūkprogramma atbalsta konkrētas CSS funkcijas vai rekvizītu vērtības.

Piemērs: `@supports` izmantošana izkārtojuma veidošanai, izmantojot Grid Layout


.container {
  display: flex; /* Rezerves variants pārlūkprogrammām bez režģa */
}

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

Šajā piemērā `.container` sākotnēji izmanto `flex` izkārtojumu (plaši atbalstīta funkcija). `@supports` noteikums pārbauda, vai pārlūkprogramma atbalsta `display: grid`. Ja tas ir, tiek lietoti noteikumu iekšienē esošie stili, pārrakstot sākotnējo flex izkārtojumu ar režģa izkārtojumu.

3. Bibliotēkas un ietvari

Vairākas bibliotēkas un ietvari nodrošina iebūvētas funkciju noteikšanas iespējas vai utilītas, kas vienkāršo procesu. Tie var abstrakcijas veidā atņemt konkrētu funkciju pārbaudes sarežģītību. Bieži sastopami piemēri ir:

Piemērs: Modernizr izmantošana


<html class="no-js" >
<head>
  <!-- Citi meta tagi utt. -->
  <script src="modernizr.min.js"></script>
</head>
<body>
  <div class="my-element"></div>
  <script>
    if (Modernizr.borderradius) {
      // Lietot border-radius stilus
      document.querySelector('.my-element').style.borderRadius = '10px';
    }
  </script>
</body>
</html>

Šajā scenārijā Modernizr `HTML` elementam pievieno klasi `borderradius`, ja pārlūkprogramma atbalsta `border-radius`. Pēc tam JavaScript kods pārbauda šo klasi un lieto atbilstošo stilu.

Praktiski piemēri un globālie apsvērumi

Izpētīsim dažus praktiskus funkciju noteikšanas piemērus un to, kā tos ieviest, ņemot vērā globālos apsvērumus, piemēram, pieejamību, internacionalizāciju (i18n) un veiktspēju.

1. Atsaucīgi attēli

Atsaucīgi attēli ir būtiski, lai nodrošinātu optimālus attēlu izmērus, pamatojoties uz lietotāja ierīci un ekrāna izmēru. Funkciju noteikšana var spēlēt izšķirošu lomu to efektīvā īstenošanā.

Piemērs: `srcset` un `sizes` atbalsta pārbaude

`srcset` un `sizes` ir HTML atribūti, kas pārlūkprogrammai sniedz informāciju par attēla avota opcijām, ļaujot tai atlasīt vispiemērotāko attēlu attiecīgajam kontekstam.


<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="Attēla apraksts"
>

Atribūts `srcset` norāda attēlu avotu sarakstu ar to platumiem. Atribūts `sizes` sniedz informāciju par attēla paredzēto displeja izmēru, pamatojoties uz multivides vaicājumiem.

Ja pārlūkprogramma neatbalsta `srcset` un `sizes`, varat izmantot JavaScript un funkciju noteikšanu, lai panāktu līdzīgu rezultātu. Bibliotēkas, piemēram, `picturefill`, nodrošina polyfill vecākām pārlūkprogrammām.


if (!('srcset' in document.createElement('img')) || !('sizes' in document.createElement('img'))) {
  // Izmantot polyfill, piemēram, picturefill.js
  // Saite uz picturefill: https://scottjehl.github.io/picturefill/
  console.log('Izmanto picturefill polyfill');
}

Šī pieeja nodrošina, ka visi lietotāji saņem optimizētus attēlus neatkarīgi no pārlūkprogrammas.

2. Tīmekļa animācijas

CSS animācijas un pārejas var ievērojami uzlabot lietotāja pieredzi, taču tās var arī novērst uzmanību vai radīt problēmas dažiem lietotājiem. Funkciju noteikšana ļauj nodrošināt šīs animācijas tikai tad, kad tas ir piemēroti.

Piemērs: CSS pāreju un animāciju atbalsta noteikšana


if (Modernizr.cssanimations && Modernizr.csstransitions) {
  // Lietot animācijas klases
  document.body.classList.add('animations-enabled');
} else {
  // Izmantot statisku UI vai vienkāršāku pieredzi bez animācijām
  document.body.classList.add('animations-disabled');
}

Atspējot animācijas lietotājiem ar vecākām pārlūkprogrammām vai kad lietotājs ir izteicis vēlmi samazināt kustību (izmantojot multivides vaicājumu `prefers-reduced-motion`), varat nodrošināt vienmērīgāku un iekļaujošāku pieredzi.

Globālie apsvērumi animācijām: Ņemiet vērā, ka dažiem lietotājiem var būt vestibulāri traucējumi vai citi stāvokļi, ko var izraisīt animācijas. Vienmēr nodrošiniet iespēju atspējot animācijas. Ievērojiet lietotāja iestatījumu `prefers-reduced-motion`.

3. Formas validācija

HTML5 ieviesa jaudīgas formas validācijas funkcijas, piemēram, obligātos laukus, ievades tipa validāciju (piemēram, e-pasts, numurs) un pielāgotus kļūdu ziņojumus. Funkciju noteikšana ļauj izmantot šīs funkcijas, vienlaikus nodrošinot graciozus rezerves variantus.

Piemērs: HTML5 formas validācijas atbalsta pārbaude


if ('checkValidity' in document.createElement('input')) {
  // Izmantot HTML5 formas validāciju.
  // Tas ir iebūvēts un neprasa JavaScript
} else {
  // Ieviest JavaScript balstītu formas validāciju.
  // Bibliotēka, piemēram, Parsley.js, var būt noderīga:
  // https://parsleyjs.org/
}

Tas nodrošina, ka lietotāji ar vecākām pārlūkprogrammām joprojām saņem formas validāciju, pat ja tā tiek ieviesta, izmantojot JavaScript. Apsveriet iespēju nodrošināt servera puses validāciju kā pēdējo drošības un robustuma slāni.

Globālie apsvērumi formas validācijai: Nodrošiniet, lai jūsu kļūdu ziņojumi būtu lokalizēti un pieejami. Sniedziet skaidrus, kodolīgus kļūdu ziņojumus lietotāja valodā. Apsveriet, kā visā pasaulē tiek izmantoti dažādi datumu un numuru formāti.

4. Papildu izkārtojuma tehnikas (piem., CSS režģis)

CSS režģa izkārtojums nodrošina jaudīgu veidu, kā izveidot sarežģītus, atsaucīgus izkārtojumus. Tomēr ir svarīgi nodrošināt, lai vecākas pārlūkprogrammas tiktu apstrādātas graciozi.

Piemērs: CSS režģa izmantošana ar rezerves variantu


.container {
  display: flex;  /* Rezerves variants vecākām pārlūkprogrammām */
  flex-wrap: wrap;
}

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

Šis kods izmanto `flexbox` kā rezerves variantu pārlūkprogrammām, kas neatbalsta `grid`. Ja pārlūkprogramma atbalsta `grid`, izkārtojums tiks atveidots, izmantojot režģi. Šī pieeja rada atsaucīgu izkārtojumu, kas graciozi degradē vecākās pārlūkprogrammās.

Globālie apsvērumi izkārtojumam: Izstrādājiet dažādiem ekrāna izmēriem, malu attiecībām un ievades metodēm (piemēram, skārienekrāniem, tastatūras navigācijai). Pārbaudiet savus izkārtojumus dažādās ierīcēs un pārlūkprogrammās, ko izmanto visā pasaulē. Apsveriet atbalstu no labās uz kreiso (RTL) valodām, ja jūsu mērķauditorijā ir lietotāji, kuri lasa RTL skriptus (piemēram, arābu, ebreju).

Funkciju noteikšanas paraugprakse

Lai maksimāli palielinātu funkciju noteikšanas efektivitāti, ievērojiet šīs paraugprakses:

Pieejamības risināšana (a11y) funkciju noteikšanā

Pieejamība ir būtisks progresīvas uzlabošanas komponents. Funkciju noteikšana var palīdzēt nodrošināt, ka jūsu vietne ir pieejama lietotājiem ar invaliditāti.

Internationalizācija (i18n) un funkciju noteikšana

Veidojot globālu vietni, apsveriet i18n. Funkciju noteikšana var veicināt jūsu i18n centienus, atvieglojot valodai specifisku saturu un uzvedību.

Secinājums: nākotnes veidošana

Progresīva uzlabošana un funkciju noteikšana nav tikai tehniskas prakses; tie ir būtiski tīmekļa izstrādes principi, kas ļauj izveidot iekļaujošas, efektīvas un izturīgas tīmekļa pieredzes globālai auditorijai. Pieņemot šīs stratēģijas, jūs varat izveidot vietnes, kas pielāgojas nepārtraukti mainīgajam tehnoloģiskajam ainavai, nodrošinot, ka jūsu saturs ir pieejams un saistošs visiem lietotājiem neatkarīgi no viņu ierīces, pārlūkprogrammas vai atrašanās vietas. Koncentrējoties uz pamata funkcionalitāti, ieviešot funkciju noteikšanu un prioritāti piešķirot pieejamībai, jūs izveidojat robustāku un lietotājam draudzīgāku tīmekļa pieredzi ikvienam.

Tā kā tīmeklis turpina attīstīties, progresīvas uzlabošanas nozīme tikai palielināsies. Pieņemot šo praksi jau šodien, jūs ieguldāt savu tīmekļa lietojumprogrammu nākotnē un nodrošināt to panākumus globālajā digitālajā ekosistēmā.

Izmantojamie ieskati: