Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Progresivní vylepšování je technika, která pomáhá zajistit, aby byl váš software robustní a dostupný. Jeho dodržováním zajistíte, že váš web nebo aplikaci bude moci používat co nejvíce lidí.

Začněte s minimálně životaschopnou verzí vašeho webového designu a zajistěte, aby fungovala podle potřeby. Poté navrstvěte další funkce a styly, aby z toho mohly těžit schopnější prohlížeče.

Jak funguje progresivní vylepšování?

Kvůli své extrémně distribuované povaze web vždy potřeboval podporovat širokou škálu zařízení. Od základních počítačů ze 70. let po schopné moderní stolní počítače, tablety a televize ušly webové stránky dlouhou cestu.

Základem všeho je HTML. Jelikož se jedná o „odpouštějící“ jazyk, prohlížeče zobrazí HTML tak dobře, jak mu rozumí. Obvykle budou ignorovat vše, co nepodporují.

To může být užitečné z pohledu vývojáře, ale může to způsobit problémy čtenářům. Pokud váš web zobrazuje prázdnou stránku, když nelze spustit JavaScript, uživatelé nemají jinou možnost, než to opustit. Progresivní vylepšování vás vybízí k tomu, abyste základní obsah poskytovali každému, kdo k němu má přístup, a poté tento obsah vylepšujte pomocí vhodných technologií, jako jsou CSS a JavaScript.

instagram viewer

Progresivní přístup ke stylingu

CSS je jazyk šablony stylů webu které můžete použít k přizpůsobení barev, písem, rozloženía mnoho dalších vizuálních aspektů vašich stránek. Můžete jej použít k vylepšení výchozího vzhledu svého obsahu, ale to neznamená, že byste svůj obsah neměli nejprve správně strukturovat.

Vezměte si například panel nabídek; můžete to strukturovat takto:

<nav>
<a href="/register">Registrovat</A>
<a href="/login">přihlásit se</A>
<a href="/about">o nás</A>
<a href="/contact">Kontakt</A>
</nav>

Chcete-li zobrazit vodorovnou nabídku, kde každý odkaz vypadá trochu jako tlačítko, můžete jej upravit pomocí tohoto CSS:

nav a {
text-dekorace: žádná;
displej: inline-block;
vycpávka: 00,5 em 1em;
ohraničení: 1px plný;
border-radius: 8px;
pravý okraj: 1 em;
}

Když to prohlížeč plně vykreslí, mělo by to vypadat takto:

Pokud však CSS není k dispozici, nabídka se zobrazí takto:

Všimněte si, že to nevypadá jako menu a není příliš snadné ho používat, protože se odkazy spojují do jednoho.

Chcete-li, aby byl návrh robustnější, můžete použít alternativní strukturu:

<nav>
<ul>
<li><a href="/register">Registrovat</A></li>
<li><a href="/login">přihlásit se</A></li>
<li><a href="/about">o nás</A></li>
<li><a href="/contact">Kontakt</A></li>
</ul>
</nav>

Vzhledem k tomu, že toto označení používá prvek neuspořádaného seznamu, je mnohem použitelnější při absenci CSS:

Všimněte si, jak mnohem snazší je rychle naskenovat a pochopit tyto odkazy, a to i s výchozím stylem prohlížeče. Tento přístup bude vyžadovat, abyste přidali trochu více CSS, abyste přepsali výchozí styly seznamu:

navli { Zobrazit: v souladu; }

I když je konečná struktura a styling složitější a většina uživatelů bude mít povoleno CSS, je tento přístup robustnější. Bude přátelštější k uživatelům programů pro čtení z obrazovky a prohlížeče založené na terminálu.

Postupné zavádění funkcí

Progresivní vylepšování je nejdůležitější, pokud jde o fungování webu nebo aplikace. Princip říká, že bez ohledu na to by vaše webové stránky měly fungovat co nejlépe.

V praxi to obvykle platí pro JavaScript. Pokud zavedete chování na straně klienta, mělo by navrstvit funkčnost na web nebo aplikaci, která již funguje bez něj.

Velmi častým případem je zpracování událostí. Představte si stránku, která načte další obsah na vyžádání. Může to být ruční nekonečné posouvání, vložení komentáře nebo podobně.

<tělo>
<!--... -->
<tlačítko onclick="načíst další();">
Zatížení Více
</button>
<!--... -->
</body>

Tlačítko při kliknutí atribut obsahuje JavaScript kód, který se spustí, když někdo klikne na tlačítko. Pokud však JavaScript není k dispozici, toto tlačítko neudělá nic. Uživatel zůstane kliknutím na toto tlačítko bez zpětné vazby a bez ponětí o tom, co se děje. Mnohem lepší přístup využívá progresivní vylepšení:

<tělo>
<!--... -->
<id="p2" href="/page/2">strana 2</A>

<skript>
funkcenačíst další() { řídicí panel.log("!"); }

/* Nahradit odkaz tlačítkem */
var odkaz = dokument.getElementById("p2");
var tlačítko = dokument.createElement("tlačítko");
button.innerText = "Načíst další";
button.addEventListener("klikněte", načíst další);
dokument.tělo.insertBefore(knoflík, odkaz);
odkaz.parentNode.removeChild(odkaz);
</script>
</body>

Tento kód transformuje základní odkaz na tlačítko s obslužnou rutinou události. Zavedením závislosti na JavaScriptu pomocí samotného JavaScriptu si můžete být jisti, že bude fungovat. A existuje funkční výchozí chování, které funguje, ve formě standardního odkazu na /page/2.

Je progresivní vylepšování opravdu nutné?

Každý používá prohlížeče s CSS a JavaScript, tak proč se starat o situaci, která nenastane? Existuje několik důvodů, proč byste měli přijmout osvědčené postupy progresivního vylepšování.

  1. Za prvé, ne každý, kdo navštíví váš web, používá prohlížeč. Někteří návštěvníci budou roboti, jako je indexer vyhledávače, a tito nemusí vůbec rozumět CSS nebo JavaScriptu.
  2. Za druhé, ne každý, kdo navštíví váš web, bude používat prohlížeč s CSS a JavaScriptem. Někteří návštěvníci mohou používat prohlížeč založený na terminálu, který zobrazuje prostý text s minimálním formátováním. Ostatní mohou používat čtečku obrazovky.
  3. Za třetí, i když prohlížeč podporuje CSS a JavaScript, věci se pokazí. Nefunkční odkaz nebo špatné síťové připojení může způsobit chybějící soubor .css nebo .js. Chyba v JavaScriptu může způsobit, že se jiný kód vůbec nespustí.
  4. Konečně se někteří návštěvníci mohou aktivně rozhodnout zakázat CSS nebo JavaScript. Mohou tak učinit z obav o soukromí nebo proto, že mají pomalé připojení nebo připojení za použití.

Progresivní způsob myšlení dělá zázraky

Progresivní vylepšování vás především povzbuzuje k tomu, abyste přijali přístup založený na obsahu. Obsah je král, takže váš text a obrázky by měly být vždy dostupné pro každého, bez ohledu na to, kdo na váš web přistupuje.

Tím, že všem čtenářům poskytnete tu nejlepší možnou zkušenost a poté ji ještě vylepšíte pro ty, kteří z toho mohou mít prospěch, můžete mít to nejlepší ze všech světů. Postupné vylepšování je pouze jednou z klíčových součástí dobré přístupnosti a použitelnosti.