Webové prohlížeče jsou tak dlouho, jak mají webové stránky. Ve skutečnosti jsou prohlížeče základním prvkem zkušenosti nebo lidmi, kteří prohlížejí vaše stránky, ale ne všechny prohlížeče jsou vytvářeny stejně. Je zcela možné (a opravdu docela pravděpodobné) mít zákazníky prohlížení webových stránek v prohlížečích, které jsou velmi staré a chybí funkce, které se nacházejí v modernějších prohlížečích. To může představovat značné problémy, když se snažíte vyvíjet webové stránky, které využívají nejnovější poznatky v oblasti návrhu a vývoje webových stránek . Pokud někdo přijde na vaše stránky pomocí jednoho z těchto starožitných prohlížečů a vaše nejnovější pokročilé techniky pro ně nefungují, můžete mít celkově špatné zkušenosti. Progresivní vylepšení je strategie zpracování návrhu webových stránek pro různé prohlížeče, a to staré prohlížeče, které postrádají moderní podporu.
Progresivní vylepšení je způsob, jak vytvářet webové stránky, takže čím více funkcí podporuje uživatelský agent, tím více funkcí bude mít webová stránka. Je to opak strategie designu známého jako půvabná degradace . Tato strategie nejprve vytváří stránky pro nejmodernější prohlížeče a poté zajišťuje, že pracují i s méně funkčními prohlížeči - že zkušenost "laděná laskavě". Progresivní vylepšení začíná nejprve s méně schopnými prohlížeči a vytváří zážitek odtud.
Jak používat progresivní vylepšení
Když vytvoříte webový design pomocí progresivního vylepšení, první věcí, kterou uděláte, je vytvořit návrh, který pracuje pro nejnižší společný jmenovatel webových prohlížečů. Ve svém jádru znamená postupné vylepšení, že váš obsah by měl být dostupný všem webovým prohlížečům, a nikoliv pouze dílčím souborům.To je důvod, proč začnete podporovat tyto staré, zastaralé a méně schopné prohlížeče.Pokud vytvoříte web, který funguje dobře pro ně víte, že jste vytvořili základnu, která by měla přinášet alespoň užitečný zážitek všem návštěvníkům.
Pokud nejprve začínáte s nejméně výkonnými prohlížeči, budete se chtít ujistit, že veškerý váš HTML kód by měl být platný a sémanticky správný. To pomůže zajistit, aby nejširší paleta agentů uživatelů zobrazovala stránku a zobrazovala ji přesně.
Nezapomeňte, že styly vizuálního návrhu a celkové rozložení stránky se přidávají pomocí externích stylových listů . To je opravdu místo, kde dochází k postupnému vylepšení. Pomocí štítku vytvoříte návrh webu, který pracuje pro všechny návštěvníky. Potom můžete přidat další styly, které vylepšují stránku, protože funkce agentů získávají funkčnost. Každý získá styly základních linek, ale pro všechny prohlížeče zpráv, které mohou podporovat pokročilejší a modernější styly, získají něco extra. Můžete postupně vylepšit stránku pro prohlížeče, které mohou tyto styly podporovat.
Existuje několik způsobů, jak můžete uplatnit progresivní vylepšení. Nejdříve byste měli zvážit, co prohlížeč dělá, pokud nerozumí řádku CSS - ignoruje to! To ve skutečnosti funguje ve vaší prospěch. Pokud vytvoříte základní sadu stylů, které všechny prohlížeče pochopí, můžete přidat nové styly pro nové prohlížeče. Pokud tyto styly podporují, použijí je. Pokud tomu tak není, ignorují je a použijí pouze ty výchozí styly. V tomto CSS je vidět jednoduchý příklad progresivního vylepšení:
.hlavní obsah {
pozadí: # 999;
pozadí: rgba (153,153,153, .75);
}}
Tento styl nejprve nastaví pozadí na šedou barvu. Druhé pravidlo používá hodnoty barev RGBA pro nastavení úrovně průhlednosti. Pokud prohlížeč podporuje RGBA, přepíše první styl druhým. Pokud tomu tak není, použije se pouze první. Nastavili jste výchozí barvu a přidali další styly pro moderní prohlížeče.
Použití dotazy funkce
Jiný způsob, jak můžete uplatnit progresivní vylepšení, je používat to, co je známé jako "dotazy na funkce". Jsou to podobné dotazy týkající se médií , které jsou základním dílem citlivých webových stránek . Zatímco média dotazují text na určité velikosti obrazovky, funkční dotazy zkontrolují, zda je určitá funkce podporována nebo nikoliv. Syntaxe, kterou byste použili, je:
@supports (zobrazení: flex) {}Všechny styly, které jste přidali do tohoto pravidla, by fungovaly pouze v případě, že tento prohlížeč podporuje "flex", což jsou styly pro Flexbox. Můžete nastavit jednu sadu pravidel pro všechny a potom použít funkční dotazy k přidání extra pro vybrané prohlížeče pouze.
Původní článek Jennifer Krynin. Upravil Jeremy Girard na 13/13/16.