Webové prehliadače sa nachádzajú tak dlho, ako majú webové stránky. V skutočnosti sú prehliadače základnou zložkou skúseností alebo ľudí, ktorí si pozerajú vaše stránky - ale nie všetky prehliadače sú vytvorené rovnako. Je úplne možné (a naozaj celkom pravdepodobné) zákazníkov prezerať vaše webové stránky v prehliadačoch, ktoré sú veľmi staré a chýbajú funkcie, ktoré sa nachádzajú v modernejších prehliadačoch. To môže predstavovať značné problémy, keď sa snažíte rozvíjať webové stránky, ktoré využívajú najnovšie zámery v oblasti návrhu a vývoja webových stránok . Ak niekto príde na vašu stránku pomocou jedného z týchto starožitných prehliadačov a vaše najnovšie pokročilé techniky pre nich nepracujú, mohli by ste celkovo priniesť zlé skúsenosti. Progresívne vylepšenie je stratégia spracovania dizajnu webových stránok pre rôzne prehliadače, a to tie staré prehliadače, ktoré chýbajú v modernej podpore.
Postupné vylepšenie je spôsob navrhovania webových stránok, takže čím viac funkcií podporuje používateľský agent, tým viac funkcií webovej stránky bude mať. Je to opačný dizajn stratégie známe ako elegantné degradácie . Táto stratégia najprv vytvára stránky pre najnovšie prehliadače a potom zabezpečuje, že aj s menej funkčnými prehliadačmi fungujú primerane dobre - že skúsenosť "elegantne degraduje". Progresívne vylepšenia začínajú najskôr so slabšími prehliadačmi a vytvárajú tam skúsenosti.
Ako používať progresívne vylepšenie
Keď vytvoríte dizajn webových stránok pomocou progresívneho vylepšenia, prvá vec, ktorú urobíte, je vytvoriť dizajn, ktorý pracuje pre najnižší spoločný menovateľ webových prehliadačov. V jeho jadre sa postupné zdokonaľovanie hovorí, že váš obsah by mal byť dostupný pre všetky webové prehliadače, nielen pre podsúbor.To je dôvod, prečo začnete podporovať tieto staré, zastarané a menej schopné prehliadače.Ak vytvoríte stránku, ktorá funguje dobre pre nich viete, že ste vytvorili základňu, ktorá by mala poskytnúť aspoň využiteľnú skúsenosť všetkým návštevníkom.
Keď začnete najskôr s najmenej schopnými prehliadačmi, budete chcieť zabezpečiť, aby všetky HTML boli platné a sémanticky správne. To pomôže zaistiť, aby si stránka zobrazila a zobrazila presne to najširšiu paletu používateľov.
Nezabudnite, že štýly vizuálneho dizajnu a celkový rozvrh stránky sú pridané pomocou externých štýlov . Toto je skutočne miesto, kde sa postupne rozširuje. Šablónu štýlov používate na vytvorenie dizajnu stránok, ktorý funguje pre všetkých návštevníkov. Potom môžete pridať ďalšie štýly na vylepšenie stránky, pretože agenti používateľov získajú funkčnosť. Každý dostane štýly základných línií, ale pre ľubovoľné spravodajské prehliadače, ktoré dokážu podporiť pokročilejšie a modernejšie štýly, získajú trochu viac. Ste "postupne vylepšovať" stránku pre prehliadače, ktoré môžu tieto štýly podporovať.
Existuje niekoľko spôsobov, ako môžete použiť progresívne vylepšenie. Po prvé, mali by ste zvážiť, čo robí prehliadač, ak nerozumie riadku CSS - ignoruje to! Toto skutočne funguje vo vašej prospech. Ak vytvoríte základnú sadu štýlov, ktoré pochopia všetky prehliadače, môžete pre nové prehliadače pridať ďalšie štýly. Ak tieto štýly podporujú, použijú ich. Ak nie, ignorujú ich a používajú len tie základné štýly. Jednoduchý príklad progresívneho vylepšenia možno vidieť v tomto CSS:
.hlavný obsah {
pozadie: # 999;
pozadie: rgba (153,153,153, .75);
}
Tento štýl najskôr nastaví pozadie na sivú farbu. Druhé pravidlo používa hodnoty farieb RGBA na nastavenie úrovne priehľadnosti. Ak prehliadač podporuje funkciu RGBA, prvý štýl bude prepísaný druhým. Ak sa tak nestane, použije sa iba prvá. Nastavili ste základnú farbu a potom ste pridali ďalšie štýly pre modernejšie prehliadače.
Používanie funkčných dopytov
Ďalším spôsobom, ako môžete použiť progresívne vylepšenie, je používať to, čo je známe ako "funkčné dopyty". Tieto sú podobné žiadostiam o médiá , ktoré sú základným dielom citlivých návrhov webových stránok . Hoci médiá dotazujú text pre určité veľkosti obrazovky, funkčné dotazy skontrolujú, či je daná funkcia podporovaná alebo nie. Syntax, ktorý by ste použili, je:
@supports (zobrazenie: flex) {}Všetky štýly, ktoré ste pridali do tohto pravidla, by fungovali iba v prípade, že tento prehliadač podporuje "flex", čo sú štýly pre Flexbox. Môžete nastaviť jednu sadu pravidiel pre všetkých a potom použiť funkčné dopyty na pridávanie ďalších informácií len pre vybrané prehliadače.
Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 13/13/16.