പുരോഗമന വിപുലീകരണം

വെബ്സൈറ്റുകൾ ഉള്ളിടത്തോളം കാലം വെബ് ബ്രൌസറുകൾക്ക് ചുറ്റുമുണ്ടായിരുന്നു. ശരിക്കും, ബ്രൗസറുകൾ നിങ്ങളുടെ സൈറ്റിൽ കാണുന്ന അല്ലെങ്കിൽ നിങ്ങളുടെ സൈറ്റ് കാണുന്ന ആളുകൾക്ക് അവശ്യ ഘടകമാണ് - എന്നാൽ എല്ലാ ബ്രൗസറുകളും തുല്യമായി സൃഷ്ടിച്ചിട്ടില്ല. ബ്രൌസറുകളിൽ നിങ്ങളുടെ വെബ് പേജുകൾ കസ്റ്റമർമാരായി കാണാനും, കൂടുതൽ ആധുനിക ബ്രൌസറുകളിൽ കണ്ടെത്തുന്ന സവിശേഷതകൾ നഷ്ടപ്പെടുത്താനും കസ്റ്റമർമാർക്ക് സാധിക്കുന്നത് പൂർണ്ണമായും (തീർച്ചയായും യഥാർത്ഥത്തിൽ) സാധ്യമാണ്. വെബ്സൈറ്റ് രൂപകൽപ്പനയിലും വികാസത്തിലും ഏറ്റവും പുതിയ മുന്നേറ്റങ്ങൾ പ്രയോജനപ്പെടുത്തുന്ന വെബ്സൈറ്റുകൾ വികസിപ്പിക്കുന്നതിന് നിങ്ങൾ പരിശ്രമിക്കുന്നതിനാൽ ഇതിന് പ്രധാനപ്പെട്ട പ്രശ്നങ്ങൾ ഉണ്ടാകാം. ആ ആൻറിവിച്ച് ബ്രൗസറുകളിലൊരാൾ ഒരാൾ ഉപയോഗിച്ച് ആരെങ്കിലും നിങ്ങളുടെ സൈറ്റിലേക്ക് വന്നാൽ, നിങ്ങളുടെ ഏറ്റവും പുതിയ പുത്തൻ സാങ്കേതികവിദ്യകൾ പ്രവർത്തിക്കില്ല, മൊത്തത്തിലുള്ള ഒരു അനുഭവം നിങ്ങൾക്ക് കൈവശം വയ്ക്കാം. വിവിധ ബ്രൗസറുകൾക്കായി വെബ് പേജ് ഡിസൈൻ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ഒരു തന്ത്രമാണ് പുരോഗമന വിപുലീകരണം, ആധുനിക പിന്തുണയിൽ കുറവുള്ള പഴയ ബ്രൗസറുകൾ.

വെബ് പേജുകൾ രൂപകൽപ്പന ചെയ്യുന്ന ഒരു രീതിയാണ് പുരോഗമന വിപുലീകരണം, അതിനാൽ ഒരു ഉപയോക്തൃ ഏജന്റ് പിന്തുണ നൽകുന്ന കൂടുതൽ സവിശേഷതകൾ, വെബ് പേജിന്റെ കൂടുതൽ സവിശേഷതകൾ. ലളിതമായ തരംതാഴ്ത്തൽ എന്നറിയപ്പെടുന്ന ഡിസൈൻ സ്ട്രാറ്റജിക്ക് വിപരീതമാണ് ഇത്. ആ തന്ത്രം ആദ്യകാലത്തെ ഏറ്റവും ആധുനിക ബ്രൌസറുകളിൽ പേജുകൾ നിർമ്മിക്കുന്നു, തുടർന്ന് അവ പ്രവർത്തനക്ഷമതയുള്ള ബ്രൌസറുകളുമായി താരതമ്യേന നന്നായി പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പുവരുത്തുകയും - അനുഭവം "സൌജന്യമായി തകർക്കുകയും ചെയ്യുന്നു." പുരോഗമന വിപുലീകരണം തുടക്കത്തിൽ കുറഞ്ഞ ശേഷിയുള്ള ബ്രൗസറുകളിൽ നിന്നാണ് ആരംഭിക്കുന്നത്, അവിടെ നിന്ന് ഒരു അനുഭവം സൃഷ്ടിക്കുന്നു.

പുരോഗമന വിഹാരം എങ്ങനെ ഉപയോഗിക്കാം

നിങ്ങൾ പുരോഗമന സങ്കലനത്തിലൂടെ ഒരു വെബ് ഡിസൈൻ സൃഷ്ടിക്കുമ്പോൾ നിങ്ങൾ ആദ്യം ചെയ്യുന്നതാണ് വെബ് ബ്രൌസറുകളുടെ ഏറ്റവും കുറഞ്ഞ പൊതു ഛായാഗ്രാഹകനായി പ്രവർത്തിക്കുന്ന ഒരു ഡിസൈൻ സൃഷ്ടിക്കുന്നതാണ്. ഒരു സബ്സെറ്റ് മാത്രം അല്ല, നിങ്ങളുടെ ഉള്ളടക്കം എല്ലാ വെബ് ബ്രൌസറുകളിലും ലഭ്യമാകുമെന്ന് അതിന്റെ പുരോഗതിയിൽ പുരോഗമന വിപുലീകരണം പറയുന്നു. അതുകൊണ്ടാണ് ഈ പഴയ, കാലഹരണപ്പെട്ട, കുറഞ്ഞ ശേഷിയുള്ള ബ്രൌസറുകളെ പിന്തുണയ്ക്കുന്നതിലൂടെ ആരംഭിക്കുന്നത്.നിങ്ങൾ നന്നായി പ്രവർത്തിക്കുന്ന ഒരു സൈറ്റ് നിങ്ങൾ സൃഷ്ടിച്ചാൽ അവർ എല്ലാ സന്ദർശകർക്കും ഒരു ഉപയോഗശൂന്യമായ അനുഭവം എങ്കിലും നൽകേണ്ട അടിസ്ഥാന വിവരങ്ങൾ നിങ്ങൾക്കറിയാമെന്ന് അവർക്കറിയാം.

ഏറ്റവും കുറഞ്ഞത് പ്രവർത്തനക്ഷമമായ ബ്രൗസറുകളിൽ ആദ്യം ആരംഭിക്കുമ്പോൾ, നിങ്ങളുടെ എല്ലാ HTML സാധുവായും സെമാന്റിക് ആയിരിക്കുമെന്നും ഉറപ്പാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കും. വിശാലമായ നിരവധി ഏജന്റുമാർക്ക് പേജ് കാണാൻ കഴിയുകയും കൃത്യമായി അത് പ്രദർശിപ്പിക്കുകയും ചെയ്യാൻ ഇത് സഹായിക്കും.

ബാഹ്യ ശൈലി ഷീറ്റുകൾ ഉപയോഗിച്ച് വിഷ്വൽ ഡിസൈൻ ശൈലികളും മൊത്തത്തിലുള്ള പേജ് ലേഔട്ടും ചേർത്ത് ഓർമിക്കുക. പുരോഗമന വിപുലീകരണം എവിടെയാണ് നടന്നത്? എല്ലാ സന്ദർശകർക്കുമായി പ്രവർത്തിക്കുന്ന ഒരു സൈറ്റ് ഡിസൈൻ സൃഷ്ടിക്കുന്നതിനായി നിങ്ങൾ ശൈലി ഷീറ്റ് ഉപയോഗിക്കുന്നു. തുടർന്ന് ഉപയോക്തൃ ഏജന്റുമാർക്ക് പ്രവർത്തനക്ഷമത വർദ്ധിപ്പിക്കുന്നതിനായി നിങ്ങൾക്ക് പേജ് മെച്ചപ്പെടുത്തുന്നതിന് കൂടുതൽ സ്റ്റൈലുകൾ ചേർക്കാൻ കഴിയും. എല്ലാവർക്കും അടിസ്ഥാന ശൈലികൾ ലഭിക്കുന്നു, എന്നാൽ കൂടുതൽ നൂതനവും ആധുനിക ശൈലികളും പിന്തുണയ്ക്കുന്ന ഏത് വാർത്ത ബ്രൌസറുകളിലേക്കും അവർക്ക് അധികമായി ലഭിക്കും. നിങ്ങൾ ആ ശൈലികളെ പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകൾക്കായുള്ള പേജ് "പുരോഗമിച്ചുകൊണ്ടിരിക്കുന്നു".

നിങ്ങൾ പുരോഗമന വിപുലീകരണം പ്രയോഗിക്കാൻ കഴിയുന്ന ചില വഴികളുണ്ട്. ഒന്നാമത്തേത്, ഒരു CSS ലൈൻ എന്താണെന്ന് മനസിലാകുന്നില്ലെങ്കിൽ ബ്രൌസർ ചെയ്യുന്നത് എന്താണെന്ന് നിങ്ങൾ ചിന്തിക്കണം - അത് അവഗണിക്കുന്നു! ഇത് യഥാർത്ഥത്തിൽ നിങ്ങളുടെ അനുകൂലത്തിൽ പ്രവർത്തിക്കുന്നു. എല്ലാ ബ്രൌസറുകളും മനസ്സിലാക്കുന്ന ശൈലികളുടെ ഒരു അടിവരയാണ് നിങ്ങൾ സൃഷ്ടിക്കുന്നതെങ്കിൽ, നിങ്ങൾക്ക് പുതിയ ബ്രൌസറുകൾക്കായി കൂടുതൽ ശൈലികൾ ചേർക്കാൻ കഴിയും. അവർ ശൈലികൾ പിന്തുണയ്ക്കുന്നുവെങ്കിൽ, അവ അവ ബാധിക്കും. ഇല്ലെങ്കിൽ, അവ അവഗണിക്കുകയും അടിസ്ഥാന ശൈലികൾ ഉപയോഗിക്കുകയും ചെയ്യും. പുരോഗമനപരമായ മെച്ചപ്പെടുത്തലിന്റെ ഒരു ലളിതമായ ഉദാഹരണം ഈ CSS- ൽ കാണാം:

.main-content {
പശ്ചാത്തലം: # 999;
പശ്ചാത്തലം: rgba (153,153,153, .75);
}

ഈ ശൈലി ആദ്യം ഗ്രേവിഷ് നിറത്തിലേക്ക് പശ്ചാത്തലം സജ്ജീകരിക്കുന്നു. സുതാര്യത വർദ്ധിപ്പിക്കുന്നതിന് രണ്ടാമത്തെ റൂം RGBA വർണ്ണ മൂല്യങ്ങൾ ഉപയോഗിക്കുന്നു. ഒരു ബ്രൗസർ RGBA- നെ പിന്തുണയ്ക്കുന്നുവെങ്കിൽ, രണ്ടാമത്തെ ശൈലി ഇത് അസാധുവാക്കും. ഇല്ലെങ്കിൽ, ആദ്യത്തേത് പ്രയോഗിക്കപ്പെടും. നിങ്ങൾ ഒരു അടിസ്ഥാന വർണ്ണം സജ്ജമാക്കിയതിനുശേഷം കൂടുതൽ ആധുനിക ബ്രൗസറുകൾക്കായി അധിക ശൈലികൾ ചേർത്തു.

സവിശേഷത ചോദ്യങ്ങൾ ഉപയോഗിക്കൽ

പുരോഗമന സങ്കലനം പ്രയോഗിക്കാവുന്ന മറ്റൊരു മാർഗം "ഫീച്ചർ ക്വിമറുകൾ" എന്ന് വിളിക്കലാണ്. പ്രതികരിക്കുന്ന വെബ് സൈറ്റുകളുടെ രൂപകൽപ്പനകൾ അവശ്യമായ ഒരു മെറ്റീരിയൽ ചോദ്യങ്ങളാണിവ . ചില സ്ക്രീൻ വലുപ്പങ്ങൾക്ക് മീഡിയ അന്വേഷണ വാചകം നൽകുമ്പോൾ, ഫീച്ചർ ചോദ്യങ്ങൾ ഒരു പ്രത്യേക സവിശേഷത പിന്തുണയ്ക്കുന്നുണ്ടോ ഇല്ലയോ എന്ന് പരിശോധിക്കും. നിങ്ങൾ ഉപയോഗിക്കുന്ന സിന്റാക്സ് ഇതാണ്:

@ പിന്തുണ (പ്രദർശനം: flex) {}

ബ്രൌസർ പിന്തുണയ്ക്കുന്നവയാണെങ്കിൽ "Flex" എന്ന് മാത്രമേ ഈ നിയമം ഉപയോഗിച്ചുള്ള ഏതെങ്കിലും ശൈലി പ്രവർത്തിക്കൂ, ഫ്ലെക്സ്ബോക്സിൻറെ ശൈലികൾ. നിങ്ങൾക്ക് എല്ലാവർക്കുമായി ഒരു കൂട്ടം നിയമങ്ങൾ സജ്ജമാക്കാനും തിരഞ്ഞെടുത്ത ബ്രൗസറുകൾക്ക് മാത്രം അധികമായി ചേർക്കുന്നതിന് ഫീച്ചർ ചോദ്യങ്ങൾ ഉപയോഗിക്കാനും കഴിയും.

ജെന്നിഫർ ക്രിയിൻ എഴുതിയ ലേഖനം എഡിറ്റു ചെയ്തത് ജെറമി ഗിർാർഡ് 12/13/16 ന്.