M

MLOG

Lietuvių

Sužinokite, kaip kurti tvirtas ir prieinamas saityno programas naudojant progresyvųjį tobulinimą ir funkcijų aptikimą. Šis vadovas suteikia pasaulinę perspektyvą, praktinius pavyzdžius ir geriausias praktikas, kaip kurti įtraukiančias ir ateičiai pritaikytas saityno patirtis.

Progresyvusis tobulinimas: funkcijų aptikimas – atsparių interneto patirčių kūrimas pasaulinei auditorijai

Nuolat kintančiame interneto pasaulyje svarbiausia užtikrinti, kad jūsų saityno programos būtų prieinamos, našios ir pritaikytos ateičiai. Viena iš veiksmingiausių strategijų tai pasiekti yra progresyvusis tobulinimas – projektavimo filosofija, kuri pabrėžia pagrindinio funkcionalumo, veikiančio įvairiuose įrenginiuose ir naršyklėse, kūrimą, pridedant patobulinimų atsižvelgiant į vartotojo aplinkos galimybes. Esminė progresyviojo tobulinimo dalis yra funkcijų aptikimas, leidžiantis kūrėjams nustatyti, ar naršyklė palaiko tam tikrą funkciją, prieš ją įdiegiant. Šis metodas garantuoja nuoseklią vartotojo patirtį, ypač atsižvelgiant į pasaulio technologinę įvairovę.

Kas yra progresyvusis tobulinimas?

Progresyvusis tobulinimas – tai saityno kūrimo strategija, kuri prasideda nuo tvirto, prieinamo pagrindo, o po to sluoksniuoja pažangias funkcijas, kai tai leidžia naršyklė ar įrenginys. Šis metodas teikia pirmenybę turiniui ir pagrindiniam funkcionalumui visiems vartotojams, nepriklausomai nuo jų įrenginio, naršyklės ar interneto ryšio. Jis palaiko idėją, kad internetas turėtų būti naudingas ir informatyvus visiems ir visur.

Pagrindiniai progresyviojo tobulinimo principai apima:

Kodėl funkcijų aptikimas yra būtinas

Funkcijų aptikimas yra progresyviojo tobulinimo kertinis akmuo. Užuot pasikliavus naršyklės atpažinimu (identifikuojant vartotojo naršyklę pagal jos „user agent“ eilutę), funkcijų aptikimas sutelktas į tai, ką naršyklė *gali* padaryti. Tai yra daug patikimesnis metodas, nes:

Funkcijų aptikimo metodai

Yra keletas naršyklės funkcijų aptikimo metodų, kurių kiekvienas turi savo privalumų ir trūkumų. Dažniausiai naudojamas metodas – JavaScript, skirtas patikrinti, ar yra tam tikra funkcija ar API.

1. JavaScript naudojimas funkcijoms tikrinti

Šis metodas yra labiausiai paplitęs ir lankstus. Jūs tikrinate tam tikros naršyklės funkcijos prieinamumą naudodami JavaScript kodą.

Pavyzdys: `fetch` API tikrinimas (JavaScript duomenų gavimui iš tinklo)


if ('fetch' in window) {
  // 'fetch' API yra palaikoma. Naudokite ją duomenims įkelti.
  fetch('data.json')
    .then(response => response.json())
    .then(data => {
      // Apdorokite duomenis
    })
    .catch(error => {
      // Tvarkykite klaidas
    });
} else {
  // 'fetch' API nėra palaikoma. Naudokite alternatyvą, pvz., XMLHttpRequest.
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json');
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // Apdorokite duomenis
    } else {
      // Tvarkykite klaidas
    }
  };
  xhr.onerror = function() {
    // Tvarkykite klaidas
  };
  xhr.send();
}

Šiame pavyzdyje kodas tikrina, ar `window` objekte yra `fetch` savybė. Jei taip, naršyklė palaiko `fetch` API, ir kodas gali ją naudoti. Kitu atveju įgyvendinamas atsarginis mechanizmas (naudojant `XMLHttpRequest`).

Pavyzdys: `classList` API palaikymo tikrinimas


if ('classList' in document.body) {
  // Naršyklė palaiko classList. Naudokite classList metodus (pvz., add, remove)
  document.body.classList.add('has-js');
} else {
  // Naršyklė nepalaiko classList. Naudokite alternatyvius metodus.
  // pvz., naudojant eilutės manipuliacijas CSS klasėms pridėti ir pašalinti
  document.body.className += ' has-js';
}

2. CSS funkcijų užklausų (`@supports`) naudojimas

CSS funkcijų užklausos, žymimos `@supports` taisykle, leidžia taikyti CSS taisykles priklausomai nuo to, ar naršyklė palaiko konkrečias CSS funkcijas ar savybių vertes.

Pavyzdys: `@supports` naudojimas maketo stilizavimui su „Grid Layout“


.container {
  display: flex; /* Alternatyva naršyklėms be „grid“ */
}

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

Šiame pavyzdyje `.container` iš pradžių naudoja `flex` maketą (plačiai palaikoma funkcija). `@supports` taisyklė tikrina, ar naršyklė palaiko `display: grid`. Jei taip, taikomi taisyklės viduje esantys stiliai, pakeičiantys pradinį `flex` maketą į `grid` maketą.

3. Bibliotekos ir karkasai

Keletas bibliotekų ir karkasų siūlo integruotas funkcijų aptikimo galimybes ar priemones, kurios supaprastina procesą. Jos gali abstrahuoti konkrečių funkcijų tikrinimo sudėtingumą. Dažni pavyzdžiai:

Pavyzdys: Modernizr naudojimas


<html class="no-js" >
<head>
  <!-- Kitos meta žymės ir t. t. -->
  <script src="modernizr.min.js"></script>
</head>
<body>
  <div class="my-element"></div>
  <script>
    if (Modernizr.borderradius) {
      // Taikykite border-radius stilius
      document.querySelector('.my-element').style.borderRadius = '10px';
    }
  </script>
</body>
</html>

Šiuo atveju Modernizr prideda klasę `borderradius` prie `` elemento, jei naršyklė palaiko `border-radius`. Tada JavaScript kodas patikrina šią klasę ir taiko atitinkamą stilių.

Praktiniai pavyzdžiai ir globalūs aspektai

Panagrinėkime keletą praktinių funkcijų aptikimo pavyzdžių ir kaip juos įgyvendinti, atsižvelgiant į globalius aspektus, tokius kaip prieinamumas, internacionalizacija (i18n) ir našumas.

1. Adaptyvūs paveikslėliai

Adaptyvūs paveikslėliai yra būtini norint pateikti optimalaus dydžio paveikslėlius, atsižvelgiant į vartotojo įrenginį ir ekrano dydį. Funkcijų aptikimas gali atlikti lemiamą vaidmenį juos efektyviai įgyvendinant.

Pavyzdys: `srcset` ir `sizes` palaikymo tikrinimas

`srcset` ir `sizes` yra HTML atributai, kurie suteikia naršyklei informaciją apie paveikslėlio šaltinio parinktis, leidžiant jai pasirinkti tinkamiausią paveikslėlį dabartiniam kontekstui.


<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="Paveikslėlio aprašymas"
>

`srcset` atributas nurodo paveikslėlių šaltinių sąrašą su jų pločiais. `sizes` atributas suteikia informaciją apie numatomą paveikslėlio rodymo dydį, atsižvelgiant į medijos užklausas.

Jei naršyklė nepalaiko `srcset` ir `sizes`, galite pasiekti panašų rezultatą naudodami JavaScript ir funkcijų aptikimą. Bibliotekos, tokios kaip `picturefill`, suteikia polifilą senesnėms naršyklėms.


if (!('srcset' in document.createElement('img')) || !('sizes' in document.createElement('img'))) {
  // Naudokite polifilą, pvz., picturefill.js
  // Nuoroda į picturefill: https://scottjehl.github.io/picturefill/
  console.log('Naudojamas picturefill polifilas');
}

Šis metodas užtikrina, kad visi vartotojai gautų optimizuotus paveikslėlius, nepriklausomai nuo jų naršyklės.

2. Saityno animacijos

CSS animacijos ir perėjimai gali žymiai pagerinti vartotojo patirtį, tačiau kai kuriems vartotojams jie gali blaškyti ar kelti problemų. Funkcijų aptikimas leidžia jums pateikti šias animacijas tik tada, kai tai yra tinkama.

Pavyzdys: CSS perėjimų ir animacijų palaikymo aptikimas


if (Modernizr.cssanimations && Modernizr.csstransitions) {
  // Taikyti animacijos klases
  document.body.classList.add('animations-enabled');
} else {
  // Naudoti statinę vartotojo sąsają arba paprastesnę patirtį be animacijų
  document.body.classList.add('animations-disabled');
}

Išjungdami animacijas vartotojams su senesnėmis naršyklėmis arba kai vartotojas yra išreiškęs pageidavimą dėl sumažinto judesio (per `prefers-reduced-motion` medijos užklausą), galite suteikti sklandesnę ir labiau įtraukiančią patirtį.

Globalūs aspektai animacijoms: Atsižvelkite į tai, kad kai kurie vartotojai gali turėti vestibuliarinių sutrikimų ar kitų būklių, kurias gali sukelti animacijos. Visada suteikite galimybę išjungti animacijas. Gerbkite vartotojo `prefers-reduced-motion` nustatymą.

3. Formos patvirtinimas

HTML5 pristatė galingas formos patvirtinimo funkcijas, tokias kaip privalomi laukai, įvesties tipo patvirtinimas (pvz., el. paštas, skaičius) ir pasirinktiniai klaidų pranešimai. Funkcijų aptikimas leidžia jums pasinaudoti šiomis funkcijomis, kartu suteikiant grakščias alternatyvas.

Pavyzdys: HTML5 formos patvirtinimo palaikymo tikrinimas


if ('checkValidity' in document.createElement('input')) {
  // Naudoti HTML5 formos patvirtinimą.
  // Tai yra integruota ir nereikalauja JavaScript
} else {
  // Įdiegti JavaScript pagrįstą formos patvirtinimą.
  // Gali būti naudinga biblioteka, tokia kaip Parsley.js:
  // https://parsleyjs.org/
}

Tai užtikrina, kad vartotojai su senesnėmis naršyklėmis vis tiek gautų formos patvirtinimą, net jei jis įgyvendinamas naudojant JavaScript. Apsvarstykite galimybę pateikti patvirtinimą serverio pusėje kaip paskutinį saugumo ir patikimumo sluoksnį.

Globalūs aspektai formos patvirtinimui: Užtikrinkite, kad jūsų klaidų pranešimai būtų lokalizuoti ir prieinami. Pateikite aiškius, glaustus klaidų pranešimus vartotojo kalba. Apsvarstykite, kaip visame pasaulyje naudojami skirtingi datų ir skaičių formatai.

4. Pažangios maketavimo technikos (pvz., CSS Grid)

CSS Grid Layout suteikia galingą būdą kurti sudėtingus, adaptyvius maketus. Tačiau svarbu užtikrinti, kad senesnės naršyklės būtų tvarkomos grakščiai.

Pavyzdys: CSS Grid naudojimas su alternatyva


.container {
  display: flex;  /* Alternatyva senesnėms naršyklėms */
  flex-wrap: wrap;
}

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

Šis kodas naudoja `flexbox` kaip alternatyvą naršyklėms, kurios nepalaiko `grid`. Jei naršyklė palaiko `grid`, maketas bus atvaizduotas naudojant `grid`. Šis metodas sukuria adaptyvų maketą, kuris grakščiai degraduoja senesnėse naršyklėse.

Globalūs aspektai maketavimui: Projektuokite skirtingiems ekrano dydžiams, kraštinių santykiams ir įvesties metodams (pvz., jutikliniams ekranams, naršymui klaviatūra). Testuokite savo maketus įvairiuose įrenginiuose ir naršyklėse, naudojamose visame pasaulyje. Apsvarstykite dešinės į kairę (RTL) kalbų palaikymą, jei jūsų tikslinė auditorija apima vartotojus, kurie skaito RTL rašmenis (pvz., arabų, hebrajų).

Geriausios funkcijų aptikimo praktikos

Norėdami maksimaliai padidinti funkcijų aptikimo efektyvumą, laikykitės šių geriausių praktikų:

Prieinamumo (a11y) užtikrinimas naudojant funkcijų aptikimą

Prieinamumas yra kritinė progresyviojo tobulinimo dalis. Funkcijų aptikimas gali padėti užtikrinti, kad jūsų svetainė būtų prieinama vartotojams su negalia.

Internacionalizacija (i18n) ir funkcijų aptikimas

Kuriant pasaulinę svetainę, atsižvelkite į i18n. Funkcijų aptikimas gali prisidėti prie jūsų i18n pastangų, palengvindamas konkrečiai kalbai pritaikytą turinį ir elgseną.

Išvada: kūrimas ateičiai

Progresyvusis tobulinimas ir funkcijų aptikimas nėra tik techninės praktikos; tai yra pagrindiniai saityno kūrimo principai, leidžiantys kurti įtraukiančias, našias ir atsparias interneto patirtis pasaulinei auditorijai. Taikydami šias strategijas, galite kurti svetaines, kurios prisitaiko prie nuolat kintančio technologinio kraštovaizdžio, užtikrindami, kad jūsų turinys būtų prieinamas ir patrauklus visiems vartotojams, nepriklausomai nuo jų įrenginio, naršyklės ar vietos. Sutelkdami dėmesį į pagrindinį funkcionalumą, taikydami funkcijų aptikimą ir teikdami pirmenybę prieinamumui, jūs sukuriate patikimesnę ir patogesnę interneto patirtį visiems.

Interneto pasauliui toliau vystantis, progresyviojo tobulinimo svarba tik didės. Taikydami šias praktikas šiandien, jūs investuojate į savo saityno programų ateitį ir užtikrinate jų sėkmę pasaulinėje skaitmeninėje ekosistemoje.

Praktinės įžvalgos: