Browserele Web au fost în jur de cât au site-uri web. De fapt, browserele sunt un element esențial în experiența sau oamenii care văd site-ul dvs. - dar nu toate browserele sunt create în mod egal. Este foarte posibil (și de fapt, destul de probabil) ca clienții să vizualizeze paginile dvs. web în browsere care sunt extrem de vechi și care lipsesc funcțiile care se găsesc în mai multe browsere moderne. Acest lucru poate crea probleme semnificative pe măsură ce vă depuneți eforturi pentru a dezvolta site-uri Web care să profite de cele mai recente progrese în designul și dezvoltarea site-urilor web . Dacă cineva vine pe site-ul dvs. utilizând unul dintre acele browsere antichitate și cele mai recente tehnici avansate nu funcționează pentru ele, ați putea oferi o experiență precară în general. Îmbunătățirea progresivă este o strategie de manipulare a paginii web pentru diferite browsere, și anume acele browsere vechi care nu au suport modern.
Îmbunătățirea progresivă este o modalitate de proiectare a paginilor web, astfel încât cu cât mai multe funcții suportate de un agent de utilizator, cu atât mai multe caracteristici vor avea pagina web. Este opusul strategiei de design cunoscut sub numele de degradare grațioasă . Această strategie construiește mai întâi paginile pentru cele mai moderne browsere și apoi asigură că funcționează destul de bine cu browserele mai puțin funcționale - că experiența "se degradează grațios". Îmbunătățirile progresive încep mai întâi cu browserele mai puțin capabile și construiesc o experiență de acolo.
Cum se utilizează Îmbunătățirea progresivă
Când creați un design web folosind un upgrade progresiv, primul lucru pe care îl veți face este să creați un design care să funcționeze pentru cel mai mic numitor comun al browserelor web. În centrul său, îmbunătățirea progresivă spune că conținutul dvs. ar trebui să fie disponibil pentru toate browserele web, nu doar pentru un sub-set. De aceea începeți să susțineți aceste browsere vechi, depășite și mai puțin capabile.Dacă creați un site care funcționează bine pentru ei, știți că ați creat o linie de bază care ar trebui să ofere cel puțin o experiență utilă tuturor vizitatorilor.
Când porniți mai întâi cu cele mai puțin capabile browsere, veți dori să vă asigurați că toate codurile dvs. HTML ar trebui să fie valide și semantic corecte. Acest lucru vă va ajuta să vă asigurați că cea mai mare varietate de agenți utilizator poate vizualiza pagina și afișa cu precizie.
Rețineți că stilurile de design vizual și aspectul general al paginii sunt adăugate utilizând foi de stil externe . Acesta este într-adevăr locul unde se produce îmbunătățirea progresivă. Utilizați foaia de stil pentru a crea un design de site care funcționează pentru toți vizitatorii. Apoi puteți adăuga stiluri suplimentare pentru a îmbunătăți pagina deoarece funcțiile agenți utilizator câștigă. Toată lumea primește stilurile de bază, dar pentru orice browsere de știri care pot să susțină stilurile mai avansate și mai moderne, ele primesc și altele. Vă "îmbunătățiți progresiv" pagina pentru browserele care pot sprijini aceste stiluri.
Există câteva moduri în care puteți aplica îmbunătățiri progresive. În primul rând, ar trebui să luați în considerare ce face un browser dacă nu înțelege o linie de CSS - o ignoră! Acest lucru funcționează de fapt în favoarea ta. Dacă creați un set de stiluri de bază pe care toate browserele înțeleg, puteți adăuga apoi stiluri suplimentare pentru browserele noi. Dacă susțin stilurile, ei le vor aplica. Dacă nu, ei îi vor ignora și vor folosi doar acele stiluri de bază. Un exemplu simplu de îmbunătățire progresivă poate fi văzut în acest CSS:
.conținut principal {
fundal: # 999;
fundal: rgba (153,153,153, .75);
}
Acest stil stabilește mai întâi fundalul unei culori gri. A doua regulă utilizează valorile culorilor RGBA pentru a seta un nivel de transparență. Dacă un browser acceptă RGBA, acesta va suprascrie primul stil cu al doilea. Dacă nu, va fi aplicată numai prima. Ați setat o culoare de bază și apoi ați adăugat stiluri suplimentare pentru mai multe browsere moderne.
Utilizând interogările de caracteristică
Un alt mod în care puteți aplica o îmbunătățire progresivă este să utilizați ceea ce se numește "interogări de caracter". Acestea sunt similare cu interogările mass-media , care reprezintă o piesă esențială a desenelor de site receptive . În timp ce mass-media interoghează text pentru anumite dimensiuni ale ecranului, interogările cu funcții vor verifica dacă o anumită caracteristică este acceptată sau nu. Sintaxa pe care o utilizați este:
@supports (afișare: flex) {}Toate stilurile pe care le-ați adăugat în această regulă ar funcționa numai dacă acel browser acceptă "flex", care este stilul pentru Flexbox. S-ar putea să setați un set de reguli pentru toată lumea și apoi să utilizați interogări de funcții pentru a adăuga suplimentar numai pentru browserele selectate.
Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 12/13/16.