Spletni brskalniki so bili približno toliko časa, kolikor imajo spletna mesta. Pravzaprav so brskalniki bistvena sestavina izkušenj ali ljudi, ki si ogledujejo vašo spletno stran, vendar se vsi brskalniki ne ustvarijo enako. Popolnoma je mogoče (in pravzaprav precej verjetno), da stranke pregledujejo vaše spletne strani v preveč starih brskalnikih in manjkajo funkcije, ki jih najdemo v sodobnejših brskalnikih. To lahko predstavlja velik problem, ko si prizadevate razviti spletne strani, ki izkoriščajo najnovejše dosežke pri zasnovi in razvoju spletnih strani . Če nekdo prihaja na vašo spletno stran z enim od teh starinskih brskalnikov in vaše najnovejše napredne tehnike ne delujejo zanje, lahko v celoti doživite slabo izkušnjo. Napredna izboljšava je strategija za načrtovanje oblikovanja spletnih strani za različne brskalnike, in sicer stare stare brskalnike, ki nimajo sodobne podpore.
Napredna izboljšava je način oblikovanja spletnih strani, tako da več funkcij, ki jih podpira uporabniški agent, več funkcij, ki jih ima spletna stran. Nasprotno je strategija oblikovanja, znana kot graciozna degradacija . Ta strategija najprej gradi strani za najsodobnejše brskalnike, nato pa zagotavlja, da delujejo tudi razumno z manj funkcionalnimi brskalniki - da izkušnja "lepo degradira". Napredna izboljšava se začne z manj zmogljivimi brskalniki in gradi izkušnjo od tam.
Kako uporabljati progresivno izboljšavo
Ko ustvarite spletno oblikovanje z naprednim izboljšanjem, bo prva stvar, ki jo boste ustvarili, ustvariti dizajn, ki deluje za najmanjši skupni imenovalec spletnih brskalnikov. Napredna izboljšava pravi, da mora biti vaša vsebina na voljo vsem spletnim brskalnikom, ne samo podomrežnim. Zato začnete s podpiranjem teh starih, zastarelih in manj sposobnih brskalnikov. Če ustvarite spletno mesto, ki dobro deluje za njih veste, da ste ustvarili izhodiščno točko, ki bi morala vsem uporabnikom omogočiti vsaj uporabno izkušnjo.
Ko začnete najprej z najmanj zmogljivimi brskalniki, boste želeli zagotoviti, da bo vaš celoten HTML veljaven in semantično pravilen. S tem boste zagotovili, da lahko najširša različica uporabniških agencij ogleda stran in jo pravilno prikaže.
Ne pozabite, da so slogi vizualnega oblikovanja in celotna postavitev strani dodani z zunanjimi listi slogov . To je res, kjer se zgodi progresivna izboljšava. Element slogov uporabite za oblikovanje spletnega mesta, ki deluje za vse obiskovalce. Nato lahko dodate dodatne sloge za izboljšanje strani, saj uporabniški agenti pridobijo funkcionalnost. Vsakdo dobi slogove izhodišč, vendar za vse novičarske brskalnike, ki lahko podpirajo naprednejše in bolj sodobne sloge, dobijo nekaj dodatnega. Stranko "progresivno izboljšate" za brskalnike, ki lahko podpirajo te sloge.
Obstaja nekaj načinov, kako lahko uporabite progresivno izboljšavo. Najprej bi morali razmisliti o tem, kaj počne brskalnik, če ne razume linije CSS - ne upošteva ga! To dejansko deluje v vašo korist. Če ustvarite osnovni nabor slogov, ki jih vsi brskalniki razumejo, lahko dodate nove sloge za nove brskalnike. Če podpirajo sloge, jih bodo uporabili. Če ne, jih bodo ignorirali in uporabili le tiste izhodiščne sloge. V tem CSS lahko vidite preprost primer progresivne izboljšave:
.main-content {
ozadje: # 999;
ozadje: rgba (153,153,153, .75);
}
Ta slog prvič postavlja ozadje v sivkasto barvo. Drugo pravilo uporablja RGBA barvne vrednosti za nastavitev ravni preglednosti. Če brskalnik podpira RGBA, bo preimenoval prvi slog z drugim. Če ne, bo uporabljen le prvi. Postavili ste osnovno barvo in dodali dodatne sloge za bolj sodobne brskalnike.
Uporaba funkcijskih poizvedb
Drug način, s katerim lahko uporabite progresivno izboljšavo, je uporaba tistih, ki so znane kot "poizvedbe po funkciji". Te so podobne medijskim poizvedbam , ki so bistveni del odzivnih spletnih modelov . Medtem ko mediji zahtevajo besedilo za določene velikosti zaslona, bodo poizvedbe po funkcijah preverile, ali je določena funkcija podprta ali ne. Sintaksa, ki bi jo uporabljali, je:
@supports (prikaz: flex) {}Vsi slogi, ki ste jih dodali v to pravilo, bi delovali le, če je ta brskalnik podpiral "flex", kar je slog za Flexbox. Nastavite lahko en niz pravil za vsakogar in nato uporabite poizvedbe po meri, da dodate samo dodatne izbrane brskalnike.
Izvorni članek Jennifer Krynin. Uredil Jeremy Girard dne 13.12.16.