M

MLOG

Eesti

Õppige, kuidas luua tugevaid ja ligipääsetavaid veebirakendusi progressiivse täiustamise ja funktsioonide tuvastamise abil. See juhend pakub globaalset vaatenurka, praktilisi näiteid ja parimaid praktikaid kaasava ja tulevikukindla veebikogemuse loomiseks.

Progressiivne täiustamine: funktsioonide tuvastamine – vastupidavate veebikogemuste loomine ülemaailmsele vaatajaskonnale

Pidevalt arenevas internetimaastikus on ülimalt oluline tagada, et teie veebirakendused oleksid juurdepääsetavad, toimivad ja tulevikukindlad. Üks tõhusamaid strateegiaid selle saavutamiseks on progressiivne täiustamine, disainifilosoofia, mis rõhutab põhifunktsionaalsuse loomist, mis töötab paljudes seadmetes ja brauserites, lisades samal ajal täiustusi, mis põhinevad kasutaja keskkonna võimalustel. Progressiivse täiustamise oluline komponent on funktsioonide tuvastamine, mis võimaldab arendajatel kindlaks teha, kas brauser toetab konkreetset funktsiooni enne selle rakendamist. See lähenemisviis tagab järjepideva kasutajakogemuse, eriti maailma mitmekesises tehnoloogilises maastikus.

Mis on progressiivne täiustamine?

Progressiivne täiustamine on veebiarendusstrateegia, mis algab tugeva ja ligipääsetava vundamendiga ning seejärel lisab täiustatud funktsioone vastavalt brauseri või seadme võimalustele. See lähenemisviis seab esikohale sisu ja põhifunktsionaalsuse kõigi kasutajate jaoks, olenemata nende seadmest, brauserist või internetiühendusest. See hõlmab ideed, et veeb peaks olema kasutatav ja informatiivne kõigile, kõikjal.

Progressiivse täiustamise põhiprintsiibid on järgmised:

Miks on funktsioonide tuvastamine oluline

Funktsioonide tuvastamine on progressiivse täiustamise nurgakivi. Selle asemel, et tugineda brauseri nuusutamisele (kasutaja brauseri tuvastamine selle kasutajaagendi stringi alusel), keskendub funktsioonide tuvastamine sellele, mida brauser *saab* teha. See on palju usaldusväärsem lähenemisviis, sest:

Funktsioonide tuvastamise meetodid

Brauseri funktsioonide tuvastamiseks on mitu meetodit, millest igaühel on oma tugevad ja nõrgad küljed. Kõige tavalisem meetod kasutab JavaScripti, et kontrollida konkreetse funktsiooni või API olemasolu.

1. JavaScripti kasutamine funktsioonide kontrollimiseks

See meetod on kõige levinum ja paindlikum. Saate kontrollida konkreetse brauseri funktsiooni kättesaadavust JavaScripti koodi abil.

Näide: API `fetch` kontrollimine (JavaScript andmete võtmiseks võrgust)


if ('fetch' in window) {
  // API 'fetch' on toetatud. Kasutage seda andmete laadimiseks.
  fetch('data.json')
    .then(response => response.json())
    .then(data => {
      // Töötle andmeid
    })
    .catch(error => {
      // Käsitse vigu
    });
} else {
  // API 'fetch' ei ole toetatud. Kasutage varumehhanismi nagu XMLHttpRequest.
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json');
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // Töötle andmeid
    } else {
      // Käsitse vigu
    }
  };
  xhr.onerror = function() {
    // Käsitse vigu
  };
  xhr.send();
}

Selles näites kontrollib kood, kas atribuut `fetch` on objekti `window` olemas. Kui on, toetab brauser API-t `fetch` ja kood saab seda kasutada. Vastasel juhul rakendatakse varumehhanismi (kasutades `XMLHttpRequest`).

Näide: `classList` API toe kontrollimine


if ('classList' in document.body) {
  // Brauser toetab classList. Kasutage classList meetodeid (nt add, remove)
  document.body.classList.add('has-js');
} else {
  // Brauser ei toeta classList. Kasutage alternatiivseid meetodeid.
  // nt stringidega manipuleerimine CSS klasside lisamiseks ja eemaldamiseks
  document.body.className += ' has-js';
}

2. CSS-i funktsioonipäringute (`@supports`) kasutamine

CSS-i funktsioonipäringud, mida tähistab `@supports` at-reegel, võimaldavad teil rakendada CSS-i reegleid sõltuvalt sellest, kas brauser toetab konkreetseid CSS-i funktsioone või atribuutide väärtusi.

Näide: `@supports` kasutamine paigutuse kujundamiseks Grid Layouti abil


.container {
  display: flex; /* Varundamine brauseritele, millel puudub ruudustik */
}

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

Selles näites kasutab `.container` algselt `flex` paigutust (laialdaselt toetatud funktsioon). Reegel `@supports` kontrollib, kas brauser toetab `display: grid`. Kui see nii on, rakendatakse reegli sees olevaid stiile, tühistades esialgse flex-paigutuse ruudupaigutusega.

3. Raamatukogud ja raamistikud

Mitmed raamatukogud ja raamistikud pakuvad sisseehitatud funktsioonide tuvastamise võimalusi või utiliite, mis lihtsustavad protsessi. Need võivad eemaldada konkreetsete funktsioonide kontrollimise keerukuse. Levinud näited on:

Näide: Modernizri kasutamine


<html class="no-js" >
<head>
  <!-- Muud meta-sildid jne. -->
  <script src="modernizr.min.js"></script>
</head>
<body>
  <div class="my-element"></div>
  <script>
    if (Modernizr.borderradius) {
      // Rakenda border-radius stiile
      document.querySelector('.my-element').style.borderRadius = '10px';
    }
  </script>
</body>
</html>

Selles stsenaariumis lisab Modernizr klassi `borderradius` elemendile ``, kui brauser toetab `border-radius`. Seejärel kontrollib JavaScripti kood seda klassi ja rakendab vastava stiili.

Praktilised näited ja globaalsed kaalutlused

Uurime mõningaid praktilisi näiteid funktsioonide tuvastamisest ja selle rakendamisest, võttes arvesse globaalseid kaalutlusi, nagu juurdepääsetavus, rahvusvahelistumine (i18n) ja jõudlus.

1. Responsiivsed pildid

Responsiivsed pildid on olulised optimaalse pildi suuruse edastamiseks, mis põhineb kasutaja seadmel ja ekraani suurusel. Funktsioonide tuvastamine võib mängida olulist rolli nende tõhusas rakendamises.

Näide: `srcset` ja `sizes` toe kontrollimine

`srcset` ja `sizes` on HTML-i atribuudid, mis pakuvad teavet pildi allika valikute kohta brauserile, võimaldades sellel valida praeguse konteksti jaoks kõige sobivama pildi.


<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="Pildi kirjeldus"
>

Atribuut `srcset` määrab pildi allikate loendi koos nende laiustega. Atribuut `sizes` pakub teavet pildi kavandatud kuvamissuuruse kohta, mis põhineb meediapäringutel.

Kui brauser ei toeta `srcset` ja `sizes`, saate kasutada JavaScripti ja funktsioonide tuvastamist, et saavutada sarnane tulemus. Raamatukogud nagu `picturefill` pakuvad vanematele brauseritele polütäidet.


if (!('srcset' in document.createElement('img')) || !('sizes' in document.createElement('img'))) {
  // Kasutage polütäidet nagu picturefill.js
  // Link picturefillile: https://scottjehl.github.io/picturefill/
  console.log('Kasutan picturefill polütäidet');
}

See lähenemisviis tagab, et kõik kasutajad saavad optimeeritud pilte, olenemata nende brauserist.

2. Veebianimatsioonid

CSS-animatsioonid ja üleminekud võivad oluliselt parandada kasutajakogemust, kuid need võivad olla mõnele kasutajale ka häirivad või problemaatilised. Funktsioonide tuvastamine võimaldab teil neid animatsioone pakkuda ainult vajaduse korral.

Näide: CSS-i üleminekute ja animatsioonide toe tuvastamine


if (Modernizr.cssanimations && Modernizr.csstransitions) {
  // Rakenda animatsiooniklasse
  document.body.classList.add('animations-enabled');
} else {
  // Kasutage staatilist UI-d või lihtsamat kogemust ilma animatsioonideta
  document.body.classList.add('animations-disabled');
}

Animatsioonide keelamisega vanemate brauseritega kasutajatele või kui kasutaja on avaldanud eelistuse vähendatud liikumise vastu (meediapäringu `prefers-reduced-motion` kaudu), saate pakkuda sujuvamat ja kaasavamat kogemust.

Globaalsed kaalutlused animatsioonide puhul: Arvestage, et mõnel kasutajal võivad olla vestibulaarsed häired või muud seisundid, mida animatsioonid võivad vallandada. Pakkuge alati võimalust animatsioonid keelata. Austage kasutaja seadistust `prefers-reduced-motion`.

3. Vormi valideerimine

HTML5 tutvustas võimsaid vormi valideerimise funktsioone, nagu nõutavad väljad, sisestustüübi valideerimine (nt e-post, number) ja kohandatud veateated. Funktsioonide tuvastamine võimaldab teil neid funktsioone ära kasutada, pakkudes samal ajal elegantseid varundusi.

Näide: HTML5 vormi valideerimise toe kontrollimine


if ('checkValidity' in document.createElement('input')) {
  // Kasutage HTML5 vormi valideerimist.
  // See on sisseehitatud ja ei vaja JavaScripti
} else {
  // Rakendage JavaScripti-põhist vormi valideerimist.
  // Raamatukogu nagu Parsley.js võib olla kasulik:
  // https://parsleyjs.org/
}

See tagab, et vanemate brauseritega kasutajad saavad endiselt vormi valideerimist, isegi kui see on rakendatud JavaScripti abil. Kaaluge serveripoolse valideerimise pakkumist lõpliku turva- ja töökindluse kihina.

Globaalsed kaalutlused vormi valideerimise puhul: Veenduge, et teie veateated on lokaliseeritud ja juurdepääsetavad. Esitage selged ja lühikesed veateated kasutaja keeles. Arvestage, kuidas erinevaid kuupäeva- ja numbrivorminguid globaalselt kasutatakse.

4. Täiustatud paigutustehnikad (nt CSS Grid)

CSS Grid Layout pakub võimsa võimaluse luua keerulisi ja responsiivseid paigutusi. Siiski on oluline tagada, et vanemate brauseritega käsitletakse graatsiliselt.

Näide: CSS Grid'i kasutamine koos varundusega


.container {
  display: flex;  /* Varundamine vanematele brauseritele */
  flex-wrap: wrap;
}

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

See kood kasutab `flexbox` varundusena brauseritele, mis ei toeta `grid`. Kui brauser toetab `grid`, renderdatakse paigutus ruudustiku abil. See lähenemisviis loob responsiivse paigutuse, mis vanemates brauserites graatsiliselt laguneb.

Globaalsed kaalutlused paigutuse puhul: Disainige erinevate ekraani suuruste, kuvasuhete ja sisestusmeetodite jaoks (nt puutetundlikud ekraanid, klaviatuuriga navigeerimine). Testige oma paigutusi erinevates globaalselt kasutatavates seadmetes ja brauserites. Kaaluge paremalt vasakule (RTL) keeletuge, kui teie sihtrühm hõlmab kasutajaid, kes loevad RTL-skripte (nt araabia, heebrea).

Funktsioonide tuvastamise parimad tavad

Funktsioonide tuvastamise tõhususe maksimeerimiseks järgige neid parimaid tavasid:

Juurdepääsetavuse (a11y) käsitlemine funktsioonide tuvastamisel

Juurdepääsetavus on progressiivse täiustamise oluline komponent. Funktsioonide tuvastamine aitab tagada, et teie veebisait on puuetega kasutajatele juurdepääsetav.

Rahvusvahelistumine (i18n) ja funktsioonide tuvastamine

Ülemaailmse veebisaidi loomisel kaaluge i18n-i. Funktsioonide tuvastamine võib aidata teie i18n-i jõupingutusi, hõlbustades keelespetsiifilist sisu ja käitumist.

Kokkuvõte: tuleviku ehitamine

Progressiivne täiustamine ja funktsioonide tuvastamine ei ole lihtsalt tehnilised tavad; need on veebiarenduse põhiprintsiibid, mis võimaldavad teil luua kaasavaid, jõudlusega ja vastupidavaid veebikogemusi ülemaailmsele vaatajaskonnale. Neid strateegiaid omaks võttes saate luua veebisaite, mis kohanduvad pidevalt muutuva tehnoloogilise maastikuga, tagades, et teie sisu on juurdepääsetav ja kaasav kõigile kasutajatele, olenemata nende seadmest, brauserist või asukohast. Keskendudes põhifunktsionaalsusele, omaks võttes funktsioonide tuvastamise ja seades esikohale juurdepääsetavuse, loote kõigile tugevama ja kasutajasõbralikuma veebikogemuse.

Kuna veeb areneb edasi, suureneb progressiivse täiustamise tähtsus ainult. Neid praktikaid täna kasutusele võttes investeerite oma veebirakenduste tulevikku ja tagate nende edu ülemaailmses digitaalses ökosüsteemis.

Rakendatavad arusaamad: