Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Progresívne vylepšenie je technika, ktorá pomáha zaistiť, aby bol váš softvér robustný a dostupný. Jeho dodržiavaním môžete zabezpečiť, aby vašu webovú stránku alebo aplikáciu mohlo používať čo najviac ľudí.

Začnite s minimálne životaschopnou verziou vášho webového dizajnu a zabezpečte, aby fungovala podľa potreby. Potom navrstvite ďalšie funkcie a štýl, aby z toho mohli profitovať schopnejšie prehliadače.

Ako funguje progresívne vylepšovanie?

Kvôli svojej extrémne distribuovanej povahe web vždy potreboval podporovať obrovské množstvo zariadení. Od základných počítačov zo 70. rokov po schopné moderné stolné počítače, tablety a televízory prešli webové stránky dlhú cestu.

Základom všetkého je HTML. Keďže ide o „odpúšťajúci“ jazyk, prehliadače zobrazia HTML tak dobre, ako mu rozumejú. Zvyčajne budú ignorovať všetko, čo nepodporujú.

To môže byť užitočné z pohľadu vývojára, ale môže to spôsobiť problémy čitateľom. Ak vaša lokalita zobrazuje prázdnu stránku, keď nie je možné spustiť JavaScript, používatelia nemajú inú možnosť, ako ju opustiť. Postupné vylepšovanie vás povzbudzuje, aby ste doručili základný obsah každému, kto k nemu má prístup, a potom tento obsah vylepšite pomocou vhodných technológií, ako sú CSS a JavaScript.

instagram viewer

Progresívny prístup k stylingu

CSS je jazyk šablóny so štýlmi webu ktoré môžete použiť na prispôsobenie farieb, písma, rozloženiaa mnoho ďalších vizuálnych aspektov vašich stránok. Môžete ho použiť na vylepšenie predvoleného vzhľadu svojho obsahu, ale to neznamená, že by ste svoj obsah nemali v prvom rade správne štruktúrovať.

Vezmite napríklad panel s ponukami; môžete to štruktúrovať takto:

<nav>
<a href="/register">Registrovať</a>
<a href="/login">Prihlásiť sa</a>
<a href="/about">o nás</a>
<a href="/contact">kontakt</a>
</nav>

Ak chcete zobraziť vodorovnú ponuku, pričom každý odkaz vyzerá trochu ako tlačidlo, môžete ho upraviť pomocou tohto CSS:

nav a {
text-dekorácia: žiadna;
displej: inline-block;
vypchávka: 00,5 em 1em;
orámovanie: 1px plný;
border-radius: 8px;
pravý okraj: 1 em;
}

Keď to prehliadač úplne vykreslí, malo by to vyzerať takto:

Ak však CSS nie je k dispozícii, ponuka sa zobrazí takto:

Všimnite si, že to nevyzerá ako menu a nie je ľahké ho používať, pretože odkazy sa spájajú do jedného.

Môžete použiť alternatívnu štruktúru, aby bol dizajn robustnejší:

<nav>
<ul>
<li><a href="/register">Registrovať</a></li>
<li><a href="/login">Prihlásiť sa</a></li>
<li><a href="/about">o nás</a></li>
<li><a href="/contact">kontakt</a></li>
</ul>
</nav>

Keďže toto označenie používa prvok neusporiadaného zoznamu, je oveľa použiteľnejšie, ak chýba CSS:

Všimnite si, o koľko jednoduchšie je rýchlo naskenovať a pochopiť tieto odkazy, dokonca aj s predvoleným štýlom prehliadača. Tento prístup bude vyžadovať, aby ste pridali trochu viac CSS, aby ste prepísali predvolené štýly zoznamu:

navli { displej: v rade; }

Aj keď je konečná štruktúra a štýl komplikovanejšie a väčšina používateľov bude mať povolený CSS, tento prístup je robustnejší. Bude priateľskejší k používateľom čítačiek obrazovky a prehliadače založené na termináloch.

Postupné zavádzanie funkcií

Postupné vylepšovanie je najdôležitejšie, pokiaľ ide o fungovanie webu alebo aplikácie. Princíp hovorí, že bez ohľadu na to by mal váš web fungovať čo najlepšie.

V praxi to zvyčajne platí pre JavaScript. Ak zavediete správanie na strane klienta, malo by navrstviť funkčnosť na web alebo aplikáciu, ktorá už funguje bez neho.

Veľmi častým prípadom je spracovanie udalostí. Predstavte si stránku, ktorá načítava ďalší obsah na požiadanie. Môže to byť manuálne nekonečné posúvanie, vloženie komentára alebo podobne.

<telo>
<!--... -->
<button onclick="načítať viac();">
Naložiť Viac
</button>
<!--... -->
</body>

Tlačidlo je po kliknutí atribút obsahuje kód JavaScript, ktorý sa spustí, keď niekto klikne na tlačidlo. Ak však JavaScript nie je dostupný, toto tlačidlo neurobí nič. Používateľ zostane kliknutím na toto tlačidlo bez spätnej väzby a bez predstavy o tom, čo sa deje. Oveľa lepší prístup využíva progresívne vylepšenie:

<telo>
<!--... -->
<id="p2" href="/page/2">Strana 2</a>

<skript>
funkciunačítať viac() { konzoly.log("!"); }

/* Nahradiť odkaz tlačidlom */
var odkaz = dokument.getElementById("p2");
var tlačidlo = dokument.createElement("tlačidlo");
button.innerText = "Načítať viac";
button.addEventListener("kliknite", načítať viac);
dokument.telo.insertBefore(tlačidlo, odkaz);
odkaz.parentNode.removeChild(odkaz);
</script>
</body>

Tento kód transformuje základný odkaz na tlačidlo s obsluhou udalosti. Zavedením závislosti od JavaScriptu pomocou samotného JavaScriptu si môžete byť istí, že bude fungovať. A funguje predvolené funkčné správanie vo forme štandardného odkazu na /page/2.

Je progresívne vylepšovanie skutočne nevyhnutné?

Každý používa prehliadače s CSS a JavaScript, tak prečo sa starať o situáciu, ktorá nenastane? Existuje niekoľko dôvodov, prečo by ste si mali osvojiť osvedčené postupy postupného zlepšovania.

  1. Po prvé, nie každý, kto navštívi váš web, používa prehliadač. Niektorí návštevníci budú roboti, ako napríklad indexátor vyhľadávacieho nástroja, ktorí nemusia vôbec rozumieť CSS alebo JavaScriptu.
  2. Po druhé, nie každý, kto navštívi vašu stránku, bude používať prehliadač s CSS a JavaScriptom. Niektorí návštevníci môžu používať prehliadač založený na termináli, ktorý zobrazuje obyčajný text s minimálnym formátovaním. Iní môžu používať čítačku obrazovky.
  3. Po tretie, aj keď prehliadač podporuje CSS a JavaScript, veci sa pokazia. Nefunkčné prepojenie alebo zlé sieťové pripojenie môže spôsobiť chýbajúci súbor .css alebo .js. Chyba v JavaScripte môže spôsobiť, že sa iný kód vôbec nespustí.
  4. Nakoniec sa niektorí návštevníci môžu aktívne rozhodnúť vypnúť CSS alebo JavaScript. Môžu tak urobiť z obáv o súkromie alebo preto, že majú pomalé pripojenie alebo pripojenie s plateným použitím.

Progresívne myslenie robí zázraky

Progresívne vylepšenie vás predovšetkým povzbudzuje, aby ste si osvojili prístup založený na obsahu. Obsah je kráľ, takže váš text a obrázky by mali byť vždy dostupné pre každého, bez ohľadu na to, ako pristupuje na vašu stránku.

Ak všetkým čitateľom poskytnete najlepšiu možnú skúsenosť a potom ju ešte vylepšíte pre tých, ktorí z toho môžu mať úžitok, môžete mať to najlepšie zo všetkých svetov. Postupné vylepšovanie je len jednou z kľúčových zložiek dobrej prístupnosti a použiteľnosti.