ഏതു തരത്തിലുള്ള ക്രോസ്-ബ്രൗസർ സ്ഥിരതാനാഗ്രഹിക്കുന്നതും മനസ്സിനെ അലട്ടുന്നതുമായ ഭ്രമണ ദിനങ്ങളിൽ നിന്നുള്ള ഇന്നത്തെ വെബ് ബ്രൌസർ ഒരുപാട് ദൂരം മാറിയിരിക്കുന്നു. ഇന്നത്തെ വെബ് ബ്രൗസറുകളാണ് എല്ലാ സ്റ്റാൻഡേർഡുകളും. അവർ പരസ്പരം ആകർഷണീയവും വ്യത്യസ്ത ബ്രൌസറുകളിലുടനീളം തികച്ചും സ്ഥിരവുമായ പേജ് പ്രദര്ശനം അവതരിപ്പിക്കുന്നു. ഗൂഗിൾ ക്രോം, മൈക്രോസോഫ്റ്റ് എഡ്ജ്, മോസില്ല ഫയർഫോക്സ്, ഒപെറാ, സഫാരി, വിവിധ മൊബൈൽ ബ്രൌസറുകൾ തുടങ്ങിയവയുടെ ഏറ്റവും പുതിയ പതിപ്പുകൾ ഈ വെബ്സൈറ്റിൽ ലഭ്യമാണ്.
വെബ് ബ്രൌസറുകളിലും വെബ് പേജുകളിലും അവർ എങ്ങനെയാണ് സിഗ്നൽ കാണിക്കുന്നതെന്നതുപോലും പുരോഗതിയിലാണെങ്കിലും, വിവിധ സോഫ്റ്റ്വെയർ ഓപ്ഷനുകൾ തമ്മിൽ ഇന്നും വൈരുദ്ധ്യമുണ്ട്. സാധാരണ ബ്രാൻഡറുകൾ മാർജിനുകൾ, പാഡിംഗ്, ബോർഡറുകളെ ഡീഫോൾട്ടായി കണക്കാക്കുന്നതെങ്ങനെയെന്ന് പൊതുവായ അസ്ഥിരതയാണ്.
കാരണം ബോക്സ് മോഡലിന്റെ എല്ലാ ഘടകങ്ങളും എല്ലാ HTML ഘടകങ്ങളെയും സ്വാധീനിക്കുന്നു, അവ പേജ് ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നതിൽ അത്യാവശ്യമായതിനാൽ ഒരു അസ്ഥിരമായ പ്രദർശനം ഒരു പേജിൽ ഒരു ബ്രൌസറിൽ മഹത്തരമാകാം, പക്ഷേ മറ്റൊന്നിൽ അൽപ്പം നോക്കൂ. ഈ പ്രശ്നം നേരിടാൻ, നിരവധി വെബ് ഡിസൈനർമാർക്ക് ബോക്സ് മോഡലിന്റെ ഈ വശങ്ങളെ ലളിതവൽക്കരിക്കുന്നു. ഈ മാർഗം മാർജിനുകൾ, പാഡിംഗ്, ബോർഡറേഷനുകൾക്കുള്ള മൂല്യങ്ങൾ "പൂജ്യം" എന്നും അറിയപ്പെടുന്നു.
ബ്രൗസർ സ്ഥിരസ്ഥിതികളിൽ ഒരു കുറിപ്പ്
ഒരു വെബ് പേജിലെ ചില ഡിസ്പ്ലേക്ക് വരുന്ന സവിശേഷതകൾക്കായി വെബ് ബ്രൌസറുകൾക്ക് എല്ലാ സ്ഥിരസ്ഥിതി ക്രമീകരണങ്ങൾ ഉണ്ട്. ഉദാഹരണത്തിന് ഹൈപ്പർലിങ്കുകൾ നീല നിറത്തിലും സ്ഥിരസ്ഥിതിയായി അടിവരയിരിക്കും. വിവിധ ബ്രൌസറുകളിൽ ഉടനീളം ഇത് സ്ഥിരതയാർന്നതാണ്, മിക്ക ഡിസൈനർമാരും അവരുടെ നിർദ്ദിഷ്ട പ്രോജക്റ്റിന്റെ ഡിസൈൻ ആവശ്യങ്ങൾക്ക് അനുയോജ്യമാവുന്ന എന്തെങ്കിലും ആണെങ്കിലും, അവ ഒരേ സ്ഥിരമായി ആരംഭിക്കുന്ന വസ്തുത ഈ മാറ്റങ്ങൾ വരുത്തുന്നത് എളുപ്പമാക്കും. ഖേദകരമെന്നു പറയട്ടെ, മാർജിനുകൾ, പാഡിംഗ്, ബോർഡറുകൾ എന്നിവയുടെ സ്ഥിര മൂല്യം ക്രോസ്-ബ്രൌസർ സ്ഥിരതയുടെ അതേ നിലവാരം ആസ്വദിക്കുന്നില്ല.
മാർജിനുകളുടെയും പാഡിംഗിൻറെയും സാധാരണ രീതികൾ
HTML ഘടകങ്ങളുടെ എല്ലാ മാർജിനുകളും പാഡിംഗ് മൂല്യങ്ങളും പൂജ്യത്തിലേക്ക് ക്രമീകരിക്കുക എന്നതാണ് പൊരുത്തമില്ലാത്ത അസ്ഥിരമായ ബോക്സ് മാതൃകയുടെ പ്രശ്നം പരിഹരിക്കുന്നതിനുള്ള മികച്ച മാർഗം. നിങ്ങളുടെ CSS സ്റ്റൈൽഷീറ്റിൽ ഈ സിഎസ്എസ് റൂൾ ചേർക്കുന്നതിനാണ് ഇത് ചെയ്യാൻ കഴിയുന്ന ചില വഴികൾ.
* {margin: 0; പാഡിംഗ്: 0; }ഈ സിഎസ്സി ഭരണം * അല്ലെങ്കിൽ വൈൽഡ്കാർഡ് പ്രതീകം ഉപയോഗിക്കുന്നു. ആ കഥാപാത്രം "എല്ലാ ഘടകങ്ങളും" എന്നതും എല്ലാ അടിസ്ഥാന ഘടകങ്ങളും മാർജിനുകളും പാഡിങ്ങും തിരഞ്ഞെടുക്കുക. മൂല്യങ്ങൾ ചെയ്യുക. നിങ്ങൾ സ്വപ്രേരിതമായി തിരുത്തിയെഴുതുന്നതിനാലാണ് ഈ ശൈലി നടപ്പിലാക്കുന്നത്, നിങ്ങൾ നിർവ്വചിക്കുന്നതെന്താണ്.
ഈ ഓപ്ഷനുകളെ HTML, body ഘടകങ്ങളിലേക്ക് പ്രയോഗിക്കുക എന്നതാണ് മറ്റൊരു ഉപാധി. കാരണം നിങ്ങളുടെ പേജിലെ മറ്റെല്ലാ മൂലകങ്ങളും ഈ രണ്ടു ഘടകങ്ങളുടെ കുട്ടികളായിരിക്കും, ഈ എല്ലാ ഘടകങ്ങൾക്കും എല്ലാം തന്നെ CSS കാസ്കേഡ് ഈ മൂല്യങ്ങൾ ഉപയോഗിക്കേണ്ടതാണ്.
html, body {margin: 0; പാഡിംഗ്: 0; }ഇത് എല്ലാ ബ്രൌസറുകളിലും ഒരേ ഡിസൈനിൽ നിങ്ങളുടെ ഡിസൈൻ തുടങ്ങും, എന്നാൽ ഓർമ്മിക്കാൻ ഒരു കാര്യം എന്നതാണ് നിങ്ങൾ ഒരിക്കൽ എല്ലാ മാര്ജുകളും പാഡിംഗും ഓഫ് ചെയ്തുകഴിഞ്ഞാൽ, നിങ്ങളുടെ വെബ് പേജിന്റെ നിർദ്ദിഷ്ട ഭാഗങ്ങൾ നോക്കാനായി നിങ്ങൾ അവരെ തിരിച്ച് ഓൺ ചെയ്യുക. നിങ്ങളുടെ ഡിസൈൻ ആവശ്യപ്പെട്ടതായി തോന്നുന്നു.
ബോർഡറുകൾ
നിങ്ങൾ ചിന്തിക്കുന്നുണ്ടാകാം "പക്ഷേ ബ്രൗസറുകൾക്ക് സ്ഥിരമായി ശരീരം മൂലകത്തിന് ചുറ്റും ഒരു ബോർഡർ ഉണ്ട്". ഇത് കർശനമായി സത്യമല്ല. Internet Explorer ന്റെ പഴയ പതിപ്പുകൾ സുതാര്യമാകുന്നതോ അദൃശ്യമായതോ ആയ ബോർഡറുകൾക്ക് ചുറ്റും ഉണ്ട്. നിങ്ങൾ ബോർഡർ 0 ആയി സജ്ജമാക്കിയില്ലെങ്കിൽ, ആ ബോർഡർ നിങ്ങളുടെ പേജ് ലേഔട്ടുകളെ തടസ്സപ്പെടുത്താൻ കഴിയും. ഐഇയുടെ ഈ പഴയകാല പതിപ്പുകളെ പിന്തുണയ്ക്കുന്നതായി നിങ്ങൾ തീരുമാനിക്കുകയാണെങ്കിൽ, നിങ്ങളുടെ ബോഡിയിലേയും HTML ശൈലികളിലേയും ചുവടെ ചേർത്താൽ നിങ്ങൾ ഇത് പരിഹരിക്കേണ്ടതാണ്:
HTML, body {
മാർജിൻ: 0px;
പാഡിംഗ്: 0px;
അതിർത്തി: 0px;
}
നിങ്ങൾ മാർജിനുകളും പാഡിംഗും ഓഫാക്കിയതെങ്ങനെ എന്നതുപോലെ സമാനമായ രീതിയിൽ ഈ പുതിയ ശൈലി സ്ഥിരസ്ഥിതി ബോർഡറുകൾ ഓഫ് ചെയ്യും. ലേഖനത്തിൽ മുമ്പ് കാണിച്ചിട്ടുള്ള വൈൽഡ്കാർഡ് സെലക്ടർ ഉപയോഗിച്ചും ഇതേ കാര്യം നിങ്ങൾക്ക് ചെയ്യാം.
ജെന്നിഫർ ക്രിയിൻ എഴുതിയ ലേഖനം എഡിറ്റു ചെയ്തത് ജെറമി ഗിർാർഡ് 9/27/16 ന്.