Ang mga browser sa web ay nasa paligid hangga't mayroon ang mga website. Sa katunayan, ang mga browser ay isang mahalagang sangkap sa karanasan o mga taong tinitingnan ang iyong site - ngunit hindi lahat ng mga browser ay pantay na nilikha. Ito ay posible (at talagang medyo marahil) na magkaroon ng mga customer na tinitingnan ang iyong mga web page sa mga browser na lubhang gulang at nawawalang mga tampok na matatagpuan sa mas maraming mga modernong browser. Maaari itong magdulot ng mga mahahalagang problema habang nagsusumikap kang bumuo ng mga website na nagsasamantala sa mga pinakabagong pagsulong sa disenyo at pag-unlad ng website . Kung ang isang tao ay nanggagaling sa iyong site gamit ang isa sa mga antiqued browser, at ang iyong pinakabagong mga advanced na diskarte ay hindi gumagana para sa kanila, maaari kang maghatid ng isang hindi pangkaraniwang karanasan pangkalahatang. Ang progresibong pagpapahusay ay isang diskarte sa paghawak ng disenyo ng pahina ng web para sa iba't ibang mga browser, lalo na ang mga lumang browser na kulang sa modernong suporta.
Ang progresibong pagpapahusay ay isang paraan ng pagdidisenyo ng mga web page upang ang mas maraming mga katangian ng isang sumusuporta sa user agent, mas maraming mga tampok ang web page ay magkakaroon. Ito ay kabaligtaran ng estratehiya sa disenyo na kilala bilang maringal na marawal na kalagayan . Ang diskarte na iyon ay nagbubuo ng mga pahina para sa pinaka-modernong mga browser muna at sinisiguro na gumagana rin ang mga ito nang makatuwirang maayos sa mas kaunting mga browser na pagganap - na ang karanasan ay "degrades maganda." Nagsisimula ang progresibong pagpapahusay sa mas kaunting mga browser na may kakayahan at nagtatayo ng isang karanasan mula doon.
Paano Gumamit ng Progressive Enhancement
Kapag lumikha ka ng isang disenyo ng web gamit ang progresibong pagpapahusay, ang unang bagay na gagawin mo ay ang lumikha ng isang disenyo na gumagana para sa pinakamababang pangkaraniwang denamineytor ng mga web browser. Sa core nito, ang progresibong pagpapahusay ay nagsasabi na ang iyong nilalaman ay dapat na magagamit sa lahat ng mga web browser, hindi lamang isang sub-set. Ito ang dahilan kung bakit ka nagsimula sa pamamagitan ng pagsuporta sa mga lumang, hindi napapanahong, at mas may kakayahang mga browser. Kung lumikha ka ng isang site na mahusay na gumagana para sa kanila, alam mo na lumikha ka ng isang baseline na dapat maghatid ng hindi bababa sa isang kapaki-pakinabang na karanasan sa lahat ng mga bisita.
Kapag nagsisimula sa hindi bababa sa mga browser na may kakayahang muna, gugustuhin mong matiyak na ang lahat ng iyong HTML ay dapat na wasto at tuwid na tama. Makatutulong ito upang matiyak na ang pinakamalawak na iba't ibang mga ahente ng gumagamit ay maaaring tingnan ang pahina at maipakita ito ng tumpak.
Tandaan na ang mga estilo ng visual na disenyo at pangkalahatang layout ng pahina ay idinagdag sa pamamagitan ng paggamit ng mga panlabas na style sheet . Ito ay talagang kung saan ang progresibong pagpapahusay ay nangyayari. Ginagamit mo ang style sheet upang lumikha ng isang disenyo ng site na gumagana para sa lahat ng mga bisita. Pagkatapos ay maaari kang magdagdag ng karagdagang mga estilo upang mapahusay ang pahina habang ang mga ahente ng gumagamit ay nagtatamo ng pag-andar. Ang bawat tao'y nakakakuha ng estilo ng baselines, ngunit para sa anumang mga browser ng balita na maaaring suportahan ang mas advanced at mas modernong mga estilo, nakakakuha sila ng ilang dagdag. Ang "progresibong mapapabuti" ang pahina para sa mga browser na maaaring suportahan ang mga estilo.
Mayroong ilang mga paraan na maaari mong ilapat ang progresibong pagpapahusay. Una, dapat mong isaalang-alang kung ano ang ginagawa ng isang browser kung hindi nito nauunawaan ang isang linya ng CSS - binabalewala ito! Ito ay talagang gumagana sa iyong pabor. Kung lumikha ka ng isang baseline na hanay ng mga estilo na naiintindihan ng lahat ng mga browser, maaari kang magdagdag ng karagdagang mga estilo para sa mga bagong browser. Kung sinusuportahan nila ang mga estilo, ilalapat nila ang mga ito. Kung hindi, babalewalain nila ang mga ito at gamitin lamang ang mga estilo ng baseline. Ang isang simpleng halimbawa ng progresibong pagpapahusay ay makikita sa CSS na ito:
.pangunahing nilalaman {
background: # 999;
background: rgba (153,153,153, .75);
}
Ang estilo na ito ay unang nagtatakda ng background sa isang greyish na kulay. Ang pangalawang panuntunan ay gumagamit ng mga halaga ng kulay ng RGBA upang magtakda ng antas ng transparency. Kung ang isang browser ay sumusuporta sa RGBA, ito ay sasapaw sa unang estilo sa pangalawang. Kung ito ay hindi, tanging ang unang isa ay ilalapat. Nagtakda ka ng baseline color at pagkatapos ay nagdagdag ng dagdag na mga estilo para sa higit pang mga modernong browser.
Paggamit ng Mga Feature Query
Ang isa pang paraan na maaari mong ilapat ang progresibong pagpapahusay ay ang paggamit ng mga kilalang "mga query sa tampok". Ang mga ito ay katulad ng mga query sa media , na kung saan ay isang mahalagang piraso ng tumutugon disenyo ng website . Habang ang teksto ng mga query sa media para sa ilang mga laki ng screen, ang mga query sa tampok ay mag-check upang makita kung ang isang partikular na tampok ay sinusuportahan o hindi. Ang syntax na gagamitin mo ay:
@supports (display: flex) {}Ang anumang mga estilo na iyong idinagdag sa panuntunang ito ay gagana lamang kung sinusuportahan ng browser na "flex", na kung saan ay ang mga estilo para sa Flexbox. Maaari kang magtakda ng isang hanay ng mga patakaran para sa lahat at pagkatapos ay gamitin ang mga query sa tampok upang magdagdag ng dagdag para sa mga piling mga browser lamang.
Orihinal na artikulo ni Jennifer Krynin. Ini-edit ni Jeremy Girard noong 12/13/16.