Veb pregledači su bili okrenuti sve dok web stranice imaju. Zapravo, pretraživači su suštinski sastojak iskustva ili ljudi koji pregledaju vašu web lokaciju - ali ne svi pretraživači kreirani jednako. Potpuno je moguće (i zapravo verovatno) da korisnici gledaju svoje web stranice u pregledače koji su izuzetno stari i nedostaju karakteristike koje se nalaze u modernijim pretraživačima. Ovo može predstavljati značajne probleme dok se trudite da razvijete web stranice koje iskorišćavaju najnovije napretke u dizajnu i razvoju web stranice . Ako neko dođe na vašu web lokaciju koristeći jedan od onih zastarelim pregledačima, a vaše najnovije napredne tehnike ne rade za njih, mogli biste donijeti loše iskustvo uopšte. Progresivno poboljšanje je strategija za rukovanje dizajnom web stranica za različite pregledače, odnosno stare stare pregledače koji nedostaju u savremenoj podršci.
Progresivno poboljšanje je način dizajniranja web stranica tako da više funkcija koje korisnik podržava, više funkcija koje će web stranica imati. To je suprotno od strategije dizajna poznate kao graciozna degradacija . Ta strategija najpre gradi stranice za najsavremenije pregledače i potom osigurava da i oni dobro rade sa manje funkcionalnim pretraživačima - da iskustvo "blago degradira". Progresivno poboljšanje počinje sa manje sposobnim pretraživačima i stiče iskustvo odatle.
Kako koristiti progresivno poboljšanje
Kada kreirate web dizajn koristeći progresivno poboljšanje, prva stvar koju ćete uraditi je da kreirate dizajn koji radi za najniži zajednički imenitelj web pregledača. U osnovi, progresivno poboljšanje kaže da bi vaš sadržaj trebao biti dostupan svim web pregledačima, a ne samo pod-set. Zbog toga počnete tako što ćete podržavati ove stare, zastarele i manje sposobne pretraživače. Ako kreirate sajt koji dobro radi za njih, znate da ste kreirali osnovnu liniju koja bi trebala pružiti barem korisno iskustvo svim posjetiteljima.
Kada započnete sa najmanje najsposobnijim pretraživačima, želeli biste da obezbedite da svi vaši HTML treba da budu važeći i semantički ispravni. Ovo će pomoći da se osigura da najšira raznolikost korisničkih agenata može prikazati stranicu i prikazati je tačno.
Zapamtite da su stilovi vizuelnog dizajna i ukupni izgled stranice dodat pomoću spoljašnjih stilova . Ovo je stvarno gde se progresivno poboljšanje dešava. Koristite stilski stil da biste kreirali dizajn sajta koji radi za sve posetioce. Tada možete dodati dodatne stilove kako biste poboljšali stranicu dok korisnička sredstva dobijaju funkcionalnost. Svi dobijaju stilove baznih linija, ali za sve novinske pregledače koji mogu da podrže naprednije i modernije stilove, dobijaju neke dodatne. Vi "progresivno poboljšate" stranicu za pregledače koji mogu podržati te stilove.
Postoji nekoliko načina na koje možete primijeniti progresivno poboljšanje. Prvo, trebalo bi da uzmete u obzir šta pretraživač radi ako ne razume liniju CSS-a - ignoriše ga! Ovo zapravo radi u vašu korist. Ako kreirate osnovni skup stilova koje svi pregledači razumiju, onda možete dodati dodatne stilove za nove pregledače. Ako podrže stilove, oni će ih primijeniti. Ako ne, oni će ih ignorisati i samo koristiti te osnovne stilove. Jednostavan primer naprednog poboljšanja možete videti u ovom CSS-u:
.main-content {
pozadina: # 999;
pozadina: rgba (153,153,153, .75);
}
Ovaj stil prvo postavlja pozadinu sivoj boji. Drugo pravilo koristi RGBA vrijednosti boje za postavljanje nivoa transparentnosti. Ako pretraživač podržava RGBA, on će prevazići prvi stil sa drugom. Ako ne, primjenjuje se samo prvi. Postavili ste osnovnu boju i dodali dodatne stilove za modernije pregledače.
Upotreba funkcionalnih upita
Drugi način na koji možete primijeniti progresivno poboljšanje je korištenje onoga što se zove "karakteristike upita". Ovo su slične medijskim upitima , koji su bitan deo odgovarajućih dizajna veb stranica . Dok mediji upita tekst za određene veličine ekrana, upiti za funkcijama će proveriti da li je određena funkcija podržana ili ne. Sintaksa koju biste koristili je:
@supports (prikaz: flex) {}Svi stilovi koje ste dodali unutar ovog pravila bi mogli raditi samo ako je taj pretraživač podržao "flex", što je stil za Flexbox. Možete postaviti jedan skup pravila za sve, a zatim koristiti funkcionalne upite za dodavanje dodatnih za odabrane pregledače.
Originalni članak Jennifer Krynin. Uredio Jeremy Girard na 13.12.16.