પ્રગતિશીલ ઉન્નતીકરણ

જ્યાં સુધી વેબસાઇટ્સ પાસે વેબસાઇટ્સ હોય ત્યાં સુધી વેબ બ્રાઉઝર્સની આસપાસ હોય છે. વાસ્તવમાં, બ્રાઉઝર્સ એ અનુભવમાં આવશ્યક ઘટક છે અથવા લોકો તમારી સાઇટને જુએ છે - પરંતુ તમામ બ્રાઉઝર્સ સમાન રીતે બનાવવામાં આવે છે. તે અત્યંત શક્ય છે (અને વાસ્તવમાં એકદમ કદાચ) એવા બ્રાઉઝર્સમાં તમારા વેબ પૃષ્ઠો જોવા માટે ગ્રાહકો છે કે જે અત્યંત જૂની છે અને તે લક્ષણોને ગુમ કર્યા છે જે વધુ આધુનિક બ્રાઉઝર્સમાં જોવા મળે છે. આ નોંધપાત્ર સમસ્યાઓ ઊભી કરી શકે છે કારણ કે તમે વેબસાઇટ્સ વિકસાવવા માટે પ્રયત્ન કરો છો જે વેબસાઇટ ડિઝાઇન અને વિકાસમાં નવીનતમ એડવાન્સિસનો લાભ લે છે. જો કોઈ એક તે પ્રાચીન બ્રાઉઝર્સમાંના એકનો ઉપયોગ કરીને તમારી સાઇટ પર આવે છે, અને તમારી નવીનતમ અદ્યતન તકનીકીઓ તેમના માટે કાર્ય કરતી નથી, તો તમે એકંદરે ગરીબ અનુભવને વિતરિત કરી શકો છો. પ્રગતિશીલ વૃદ્ધિ વિવિધ બ્રાઉઝર્સ માટે વેબપેજ ડિઝાઇન સંભાળવાની એક વ્યૂહરચના છે, એટલે કે આધુનિક બ્રાઉઝર્સમાં આધુનિક સપોર્ટમાં અભાવ છે.

પ્રોગ્રેસિવ એન્હાન્સમેન્ટ એ વેબ પૃષ્ઠોને ડિઝાઇન કરવાની એક રીત છે, જેથી યુઝર એજન્ટ વધુ સુવિધાઓ આપે છે, વેબ પેજની વધુ સુવિધાઓ હશે. તે છબીલું અધઃપતન તરીકે ઓળખાતી ડિઝાઇન વ્યૂહરચનાની વિરુદ્ધ છે. તે વ્યૂહરચના સૌથી આધુનિક બ્રાઉઝર્સમાં પ્રથમ પૃષ્ઠો બનાવે છે અને પછી તે ખાતરી કરે છે કે તેઓ ઓછા વિધેયાત્મક બ્રાઉઝર્સ સાથે પણ સારી રીતે કામ કરે છે - તે અનુભવ "ચિત્તાકર્ષકપણે થાય છે." પ્રગતિશીલ વૃદ્ધિ પહેલાં ઓછા સક્ષમ બ્રાઉઝર્સથી પ્રારંભ થાય છે અને ત્યાંથી એક અનુભવને નિર્માણ કરે છે.

પ્રોગ્રેસિવ એન્હેન્સમેન્ટનો ઉપયોગ કેવી રીતે કરવો

જ્યારે તમે પ્રોગ્રેસિવ એન્હાન્સમેન્ટનો ઉપયોગ કરીને એક વેબ ડિઝાઇન બનાવો છો, ત્યારે તમે જે વસ્તુ બનાવશો તે એક ડિઝાઇન બનાવવી એ છે જે વેબ બ્રાઉઝરોની સૌથી નીચો સામાન્ય ડિનોમિનેટ માટે કામ કરે છે. તેના કોર પર, પ્રગતિશીલ વૃદ્ધિ જણાવે છે કે તમારી સામગ્રી તમામ વેબ બ્રાઉઝર્સ માટે ઉપલબ્ધ હોવી જોઈએ, ફક્ત પેટા-સેટ નહીં. તેથી આ જૂના, જૂના અને ઓછા સક્ષમ બ્રાઉઝર્સને સપોર્ટ કરીને તમે શરૂ કરો. જો તમે એવી સાઇટ બનાવો છો જે સારી રીતે કાર્ય કરે છે તેમના માટે, તમે જાણો છો કે તમે એક પાયાની લાઇન બનાવી છે કે જે તમામ મુલાકાતીઓને ઓછામાં ઓછા એક ઉપયોગી અનુભવ આપવી જોઈએ.

જ્યારે ઓછામાં ઓછા સક્ષમ બ્રાઉઝર્સથી પ્રારંભ થતું હોય ત્યારે, તમે ખાતરી કરો કે તમારી બધી HTML માન્ય અને અર્થપૂર્ણ રૂપે સાચું હોવું જોઈએ. આ તેની ખાતરી કરવામાં મદદ કરશે કે બહોળી વિવિધ વપરાશકર્તા એજન્ટો પૃષ્ઠને જોઈ શકે છે અને તે ચોક્કસપણે પ્રદર્શિત કરી શકે છે.

યાદ રાખો કે વિઝ્યુઅલ ડિઝાઇન શૈલીઓ અને સમગ્ર પૃષ્ઠ લેઆઉટ બાહ્ય સ્ટાઇલ શીટ્સનો ઉપયોગ કરીને ઉમેરવામાં આવે છે. આ ખરેખર છે જ્યાં પ્રગતિશીલ વૃદ્ધિ થાય છે. તમે મુલાકાતીઓ માટે એક સાઇટ ડિઝાઇન બનાવવા માટે શૈલી શીટનો ઉપયોગ કરો છો. વપરાશકર્તા એજન્ટને કાર્યક્ષમતા પ્રાપ્ત થાય તે પછી તમે પૃષ્ઠને વધારવા માટે વધારાની શૈલીઓ ઉમેરી શકો છો. દરેકને બેઝલાઇન્સ શૈલીઓ મળે છે, પરંતુ કોઈ પણ સમાચાર બ્રાઉઝર્સ માટે જે વધુ અદ્યતન અને વધુ આધુનિક શૈલીઓને સપોર્ટ કરી શકે છે, તેઓ કેટલીક વધારાની મેળવે છે બ્રાઉઝર્સ માટેનું પૃષ્ઠ "પ્રગતિશીલ વૃદ્ધિ" કરો જે તે શૈલીઓનું સમર્થન કરી શકે છે.

તમે પ્રગતિશીલ વૃદ્ધિ અરજી કરી શકો તે કેટલાક રીત છે. જો તે CSS ની રેખાને સમજી શકતું નથી તો પ્રથમ, તમારે શું કરવું તે ધ્યાનમાં લેવું જોઈએ - તે તેને અવગણે છે! આ વાસ્તવમાં તમારી તરફેણમાં કામ કરે છે જો તમે શૈલીઓનો બેઝલાઇન સેટ બનાવો છો જે તમામ બ્રાઉઝર્સ સમજી શકે છે, તો પછી તમે નવા બ્રાઉઝર્સ માટે વધારાની શૈલીઓ ઉમેરી શકો છો. જો તેઓ શૈલીઓને ટેકો આપે છે, તો તે તેમને લાગુ કરશે. જો નહીં, તો તેઓ તેમને અવગણશે અને માત્ર તે બેઝલાઇન શૈલીઓનો ઉપયોગ કરશે. પ્રગતિશીલ વૃદ્ધિનું સરળ ઉદાહરણ આ CSS માં જોઈ શકાય છે:

.મુખ્ય-સામગ્રી {
પૃષ્ઠભૂમિ: # 999;
બેકગ્રાઉન્ડ: આરજીબીએ (153,153,153, .75);
}

આ શૈલી પહેલા પૃષ્ઠભૂમિને સાધારણ રંગનો રંગ આપવા માટે સુયોજિત કરે છે. પારદર્શકતાના સ્તરને સેટ કરવા માટે બીજો નિયમ RGBA રંગ મૂલ્યોનો ઉપયોગ કરે છે. જો બ્રાઉઝર RGBA ને સપોર્ટ કરે છે, તો તે બીજી શૈલી સાથે પ્રથમ શૈલી પર ફરીથી લખશે. જો તે ન થાય તો, ફક્ત પ્રથમ જ લાગુ થશે. તમે એક આધારરેખા રંગ સેટ કર્યો છે અને પછી વધુ આધુનિક બ્રાઉઝર્સ માટે વધારાની શૈલીઓ ઉમેરી છે.

સુવિધા ક્વેરીઝનો ઉપયોગ કરવો

પ્રગતિશીલ ઉન્નતીકરણ લાગુ પાડવાનો બીજો રસ્તો "વિશેષતા પ્રશ્નો" તરીકે ઓળખાય છે તે વાપરવાનો છે. આ મીડિયા ક્વેરીઝ જેવી જ છે, જે જવાબદાર વેબસાઇટ ડિઝાઇન્સનો આવશ્યક ભાગ છે. ચોક્કસ સ્ક્રિન માપો માટે મીડિયા ક્વેરી ટેક્સ્ટ કરતી વખતે, ફીચર્સ ક્વેરીઓ એ તપાસવા તપાસ કરશે કે કોઈ ચોક્કસ સુવિધા સપોર્ટેડ છે કે નહીં. તમે જે સિન્ટેક્સનો ઉપયોગ કરશો તે છે:

@ સપોર્ટ (પ્રદર્શન: ફ્લેક્સ) {}

જો તમે આ નિયમની અંદર ઉમેરાયેલા કોઈપણ સ્ટાઇલ ફક્ત તે જ કાર્ય કરશે જો તે બ્રાઉઝર "ફ્લેક્સ" ને સપોર્ટેડ હોય, જે ફ્લેક્સબોક્સ માટે શૈલીઓ છે તમે દરેક માટે નિયમોનો એક સેટ સેટ કરી શકો છો અને પછી માત્ર પસંદગીના બ્રાઉઝર્સ માટે વધારાની ઉમેરવા માટે ફીચર ક્વેરીઝનો ઉપયોગ કરી શકો છો.

જેનિફર કિનાન દ્વારા મૂળ લેખ. 12/13/16 ના રોજ જેરેમી ગીરર્ડ દ્વારા સંપાદિત