Web preglednici su okolo sve dok su web stranice. Zapravo, preglednici su bitni sastojak u iskustvu ili korisnicima koji pregledavaju vašu web-lokaciju - ali ne i svi preglednici su stvoreni jednako. Posve je moguće (i zapravo prilično vjerojatno) da korisnici koji pregledavaju vaše web stranice u preglednicima koji su iznimno stari i nedostaju značajke koje se nalaze u modernim preglednicima. To može predstavljati značajne probleme dok pokušavate razviti web stranice koje iskoriste prednosti najnovijih dostignuća u dizajnu i razvoju web stranica . Ako netko dođe na vašu web-lokaciju pomoću jednog od tih starih preglednika, a vaše najnovije napredne tehnike ne rade za njih, mogli biste imati sveukupno loše iskustvo. Napredno poboljšanje je strategija upravljanja dizajnom web stranice za različite preglednike, odnosno stare preglednike koji nedostaju u modernoj podršci.
Napredno poboljšanje je način oblikovanja web stranica tako da više mogućnosti podržava korisničko sredstvo, što više mogućnosti web stranica ima. Suprotno je strategiji dizajna poznatoj kao graciozna degradacija . Ta strategija najprije gradi stranice za najsuvremenije preglednike, a zatim osigurava da rade i razumno s manje funkcionalnim preglednicima - da se iskustvo "degradira graciozno". Napredno poboljšanje počinje s manje sposobnim preglednicima i gradi iskustvo od tamo.
Kako koristiti progresivni napredak
Kada izradite web-dizajn pomoću naprednog poboljšanja, prva stvar koju ćete učiniti jest stvoriti dizajn koji radi za najniži zajednički nazivnik web-preglednika. U svojoj jezgri, progresivno poboljšanje kaže da vaš sadržaj treba biti dostupan svim web preglednicima, a ne samo podskupu. Zbog toga počnete podržavati te stare, zastarjele i manje sposobne preglednike. Ako izradite web mjesto koje dobro funkcionira za njih, znate da ste stvorili osnovnu liniju koja bi svim posjetiteljima trebala pružiti barem korisno iskustvo.
Kada najprije počnete s najsposobnijim preglednicima, željet ćete osigurati da sav HTML bude valjan i semantski ispravan. To će omogućiti da najširi izbor korisničkih agenata može pogledati stranicu i prikazati ga točno.
Imajte na umu da su stilovi vizualnog dizajna i ukupni izgled stranice dodani pomoću vanjskih stilskih listova . Ovo je stvarno tamo gdje se progresivno poboljšanje događa. Koristite stilski list za izradu dizajna web mjesta koja funkcionira za sve posjetitelje. Zatim možete dodati dodatne stilove kako biste poboljšali stranicu dok korisnici steknu funkcionalnost. Svatko dobiva stilove osnovnih linija, ali za sve novinske preglednike koji mogu podržati naprednije i suvremenije stilove, dobivaju dodatnu vrijednost. Vi "progresivno poboljšate" stranicu za preglednike koji mogu podržavati te stilove.
Postoji nekoliko načina na koje možete primijeniti napredno poboljšanje. Prije svega, trebali biste razmotriti što preglednik radi ako ne razumije liniju CSS-a - to zanemaruje! Ovo zapravo radi u vašoj naklonosti. Ako izradite osnovni skup stilova koji razumiju svi preglednici, možete dodati dodatne stilove za nove preglednike. Ako podržavaju stilove, primjenjivat će ih. Ako ne, oni će ih ignorirati i samo koristiti one osnovne stilove. Jednostavan primjer progresivnog poboljšanja može se vidjeti u ovom CSS-u:
.glavni sadržaj {
pozadina: # 999;
pozadina: rgba (153, 153, 153, 75);
}
Ovaj stil prvo postavlja pozadinu sivkastoj boji. Drugo pravilo koristi vrijednosti boje RGBA za postavljanje razine transparentnosti. Ako preglednik podržava RGBA, on će poništiti prvi stil s drugom. Ako nije, primijenit će se samo prvi. Postavili ste osnovnu boju i dodali dodatni stil za više modernih preglednika.
Upotreba značajki upita
Drugi način na koji možete primijeniti progresivno poboljšanje jest korištenje onih koji su poznati kao "upiti o značajkama". To su slični medijskim uputama , koji su bitan dio responzivnih dizajna web mjesta . Dok mediji upućuju tekst za određene veličine zaslona, upiti za značajke provjerit će je li određena značajka podržana ili ne. Sintaksa koju biste koristili je:
@supports (display: flex) {}Svi stilovi koje ste dodali u ovom pravilu funkcioniraju samo ako taj preglednik podržava "flex", što je stil Flexboxa. Možete postaviti jedan skup pravila za sve, a zatim upotrijebiti upite za značajke kako biste dodali dodatnu vrijednost samo za odabrane preglednike.
Izvorni članak Jennifer Krynin. Uredio Jeremy Girard na 13.12.16.