Interneto naršyklės buvo maždaug tiek laiko, kiek yra svetainėse. Iš tikrųjų naršyklės yra esminė patirties ar svetainę peržiūrinčių žmonių sudedamoji dalis, tačiau ne visos naršyklės yra sukurtos vienodai. Visiškai įmanoma (ir tikriausiai tikriausiai tikėtina), kad vartotojai, kurie peržiūri jūsų tinklalapius naršyklėse, yra labai seni ir trūksta funkcijų, kurios yra šiuolaikiškesnėse naršyklėse. Tai gali kelti didelių problemų, nes stengiasi kurti svetaines, kurios naudoja naujausius svetainės dizaino ir kūrimo pažangą . Jei kas nors atvyksta į jūsų svetainę, naudodamas vieną iš šių senovinių naršyklių, o jūsų naujausi pažangiausi metodai jiems neveikia, jums apskritai gali būti prasta patirtis. Progresyvus patobulinimas yra skirtingų naršyklių tinklalapių kūrimo strategija, būtent senų naršyklių, kurioms trūksta šiuolaikinio palaikymo.
Progresyvus patobulinimas yra tinklalapių kūrimo būdas, kad kuo daugiau funkcijų palaikytų naudotojo agentas, tuo daugiau funkcijų turės tinklalapis. Tai yra priešinga dizaino strategijai, žinomai kaip gracinga degradacija . Ši strategija iš pradžių sukuria puslapius pačioms moderniausioms naršyklėms, o tada užtikrina, kad jie taip pat gerai veiktų su mažiau funkcinėmis naršyklėmis, - kad patirtis "graziai pablogėtų". Progresyvus patobulinimas prasideda nuo mažai veikiančių naršyklių ir sukuria patirtį iš ten.
Kaip naudotis pažangiu patobulinimu
Sukūrę žiniatinklio dizainą, naudojant pažangią plėtrą, pirmas dalykas, kurį atliksite, yra sukurti dizainą, kuris veikia mažiausio bendrojo vardiklio interneto naršyklių. Procesorinis patobulinimas teigia, kad jūsų turinys turėtų būti prieinamas visoms žiniatinklio naršyklėms, o ne tik sub-rinkmenai. Štai kodėl pradedate remti šias senas, pasenusias ir mažiau galimas naršykles. Jei sukursite tinkamą svetainę jiems žinoma, kad sukūrėte bazinę liniją, kuri turėtų suteikti bent jau naudingą patirtį visiems lankytojams.
Pirmiausia pradedant mažiausiai tinkamomis naršyklėmis, turėsite užtikrinti, kad visas jūsų HTML turinys būtų teisingas ir semantinis. Tai padės užtikrinti, kad daugiausia vartotojų agentų galės peržiūrėti puslapį ir rodyti jį tiksliai.
Atminkite, kad vizualinio dizaino stiliai ir bendras puslapio išdėstymas pridedami naudojant išorinius stiliaus lapus . Tai iš tikrųjų ten, kur vyksta progresyvus tobulinimas. Jūs naudojate stiliaus lapą, kad sukurtumėte svetainės dizainą, kuris veikia visiems lankytojams. Tada galite pridėti papildomų stilių, kad pagerintumėte puslapį, kai naudotojo agentai gauna funkcijų. Kiekvienas gauna bazinių stilių, bet bet kokioms naujienų naršyklėms, kurios gali palaikyti pažangesnius ir modernesnius stilius, jie gauna papildomų. Jūs "palaipsniui sustiprinsite" puslapį naršyklėms, galinčioms palaikyti šiuos stilius.
Yra keletas būdų, kuriais galite taikyti laipsnišką patobulinimų. Pirmiausia turėtumėte apsvarstyti, kokia yra naršyklė, jei ji nesupranta CSS eilutės - ji ignoruoja tai! Tai iš tikrųjų veikia jūsų naudai. Jei sukursite pradinių stilių rinkinį, kurį supranta visos naršyklės, tada galite pridėti papildomų stilių naujoms naršyklėms. Jei jie palaiko stilius, jie juos taiko. Jei ne, jie ignoruos juos ir naudos tik tuos bazinius stilius. Šis paprastas CSS pavyzdys gali būti paprastas laipsniško patobulinimo pavyzdys:
.Pagrindinis turinys {
fonas: # 999;
fonas: rgba (153,153,153, 0,75);
}
Šis stilius pirmiausia nustato fono pilkšvai spalvą. Antroji taisyklė naudoja RGBA spalvų vertes, kad nustatytų skaidrumo lygį. Jei naršyklė palaiko RGBA, ji pakeis pirmąjį stilių antrą. Jei taip nėra, bus taikomas tik pirmasis. Nustatėte pradinę spalvą ir pridėjote papildomų stilių šiuolaikinėms naršyklėms.
Funkcijų užklausų naudojimas
Kitas būdas, kuriuo galite taikyti laipsnišką patobulinimą, yra tai, kas vadinama funkcijų užklausomis. Tai yra panašios į žiniasklaidos užklausas , kurios yra esminis jautrus svetainių dizainas . Nors žiniasklaidos užklausos tam tikrų ekrano dydžių tekstą, funkcijos užklausose tikrins, ar tam tikra funkcija yra palaikoma, ar ne. Jūsų sintaksė bus tokia:
@supports (display: flex) ()Bet kokie stiliai, kuriuos pridėjote šios taisyklės viduje, veiktų tik tada, jei naršyklė palaiko "flex", tai yra "Flexbox" stiliai. Galite nustatyti vieną taisyklių rinkinį visiems ir tada naudoti funkcijų užklausas, kad pridėtumėte tik tam tikras naršykles.
Originalus straipsnis Jennifer Krynin. Redagavo Jeremy Girard 16/13/16.