Pwogresis Amelyorasyon

Navigatè entènèt yo te alantou osi lontan ke sit entènèt gen. An reyalite, navigatè yo se yon engredyan esansyèl nan eksperyans la oswa moun ki gade sit ou - men se pa tout navigatè yo kreye egalman. Li se antyèman posib (ak aktyèlman jistis pwobableman) yo gen kliyan gade paj wèb ou an nan navigatè ki trè fin vye granmoun ak manke karakteristik yo ke yo jwenn nan plis navigatè modèn. Sa a ka poze pwoblèm enpòtan jan ou fè efò yo devlope sou sit entènèt ki pran avantaj de dènye pwogrè yo nan konsepsyon sit entènèt ak devlopman . Si yon moun vini nan sit ou lè l sèvi avèk youn nan sa yo navigatè antiqued, ak dènye teknik ou avanse pa travay pou yo, ou ta ka fournir yon eksperyans pòv an jeneral. Pwogresyon amelyorasyon se yon estrateji pou manyen konsepsyon paj wèb pou navigatè diferan, sètadi navigatè fin vye granmoun ki manke nan sipò modèn.

Pwogresyon amelyorasyon se yon fason pou desine paj wèb pou ke karakteristik yo ki pi plis yon ajan itilizatè sipòte, karakteristik yo ki pi plis paj entènèt la pral genyen. Li se opoze a nan estrateji nan konsepsyon li te ye kòm degradasyon grasyeu . Sa estrateji bati paj pou navigatè yo ki pi modèn premye ak Lè sa a, asire ke yo menm tou yo travay rezonab byen ak navigatè mwens fonksyonèl - ki eksperyans nan "degrade grasyeu." Pwogrè amelyorasyon kòmanse ak navigatè yo mwens kapab premye epi bati yon eksperyans moute soti nan la.

Kijan Pou Sèvi ak amelyorasyon Pwogresif

Lè ou kreye yon konsepsyon sit entènèt lè l sèvi avèk pwogresis amelyorasyon, premye bagay ou pral fè se kreye yon konsepsyon ki travay pou denominatè ki pi ba komen nan navigatè entènèt. Nan nwayo li yo, amelyorasyon pwogresif di ke kontni ou yo ta dwe disponib nan tout navigatè entènèt, se pa sèlman yon sub-seri.Se poutèt sa ou kòmanse pa sipòte sa yo fin vye granmoun, demode, ak mwens navigatè.Si ou kreye yon sit ki travay byen pou yo, ou konnen ou te kreye yon debaz ki ta dwe delivre omwen yon eksperyans itil pou tout vizitè yo.

Lè w kòmanse ak navigatè yo pi piti kapab premye, ou pral vle asire ke tout HTML ou ta dwe valab epi semantically kòrèk. Sa a pral ede asire ke varyete nan larj nan ajan itilizatè ka wè paj la epi montre li avèk presizyon.

Sonje ke estil konsepsyon vizyèl ak layout paj an jeneral yo te ajoute lè l sèvi avèk dra ekstèn ekstèn . Sa a se reyèlman kote amelyorasyon nan pwogresis k ap pase. Ou itilize fèy la style yo kreye yon konsepsyon sit ki travay pou tout vizitè yo. Ou ka Lè sa a, ajoute estil adisyonèl amelyore paj la kòm ajan itilizatè yo jwenn fonctionnalités. Tout moun ap resevwa estil yo Baselines, men pou nenpòt ki navigatè nouvèl ki ka sipòte estil yo pi avanse ak plis modèn, yo jwenn kèk siplemantè. Ou "pwogresif amelyore" paj la pou navigatè ki ka sipòte estil sa yo.

Gen kèk fason ke ou ka aplike pwogresif amelyorasyon. Premye a, ou ta dwe konsidere ki sa yon navigatè fè si li pa konprann yon liy nan CSS - li inyore li! Sa a aktyèlman ap travay an favè ou. Si ou kreye yon seri debaz nan Styles ke tout navigatè konprann, ou ka Lè sa a, ajoute estil adisyonèl pou navigatè nouvo. Si yo sipòte estil yo, yo pral aplike yo. Si ou pa, yo pral inyore yo epi jis itilize sa yo Styles debaz yo. Yon egzanp senp nan amelyorasyon pwogresif ka wè nan CSS sa a:

.main-content {
background: # 999;
background: rgba (153,153,153, .75);
}}

Sa a style premye kouche background nan nan yon koulè gra. Règ dezyèm lan sèvi ak valè RGBA koulè pou mete yon nivo transparans. Si yon navigatè sipòte RGBA, li pral pase sou desizyon an premye ak dezyèm lan. Si li pa fè sa, se sèlman youn nan premye yo pral aplike. Ou te mete yon koulè debaz ak Lè sa a, te ajoute estil siplemantè pou navigatè plis modèn.

Sèvi ak Queries Feature

Yon lòt fason ou ka aplike amelyorasyon pwogresif se itilize sa yo rele kòm "karakteristik demann". Sa yo se menm jan ak queries medya , ki se yon moso esansyèl nan desen sit entènèt reponn . Pandan ke medya demann tèks pou gwosè ekran sèten, queries karakteristik pral tcheke yo wè si se yon karakteristik sèten sipòte oswa ou pa. Sentaks la ou ta itilize se:

@ sipò (ekspozisyon: flex) {}

Nenpòt estil ou te ajoute andedan règ sa a ta sèlman travay si ke navigatè sipòte "flex", ki se estil yo pou Flexbox. Ou ta ka mete yon seri règleman pou tout moun ak Lè sa a, sèvi ak karakteristik demann ajoute siplemantè pou navigatè chwazi sèlman.

Original atik pa Jennifer Krynin. Edited by Jeremy Girard sou 12/13/16.