സ്റ്റൈൽ ഷീറ്റുകളുടെ കാസ്കേഡിംഗ് എന്താണ്?
വെബ്സൈറ്റുകളും ചിത്രങ്ങളും ടെക്സ്റ്റും വിവിധ രേഖകളും ഉൾപ്പെടുന്ന നിരവധി വ്യക്തികൾ. ഈ പ്രമാണങ്ങൾ PDF പേജുകൾ പോലെയുള്ള വിവിധ പേജുകളിൽ നിന്ന് ലിങ്കുചെയ്തിരിക്കുന്നവ മാത്രമല്ല, ഒരു പേജ് ഘടനയും CSS (നിർഝരിത സ്റ്റൈൽ ഷീറ്റ്) പ്രമാണങ്ങളും നിർണ്ണയിക്കാൻ HTML പ്രമാണങ്ങൾ പോലെയുള്ള പേജുകൾ സ്വയം നിർമ്മിക്കാൻ ഉപയോഗിക്കുന്ന പ്രമാണങ്ങളും ഉൾക്കൊള്ളുന്നു ഒരു പേജിന്റെ രൂപം വ്യക്തമാക്കുന്നതിന്. ഈ ലേഖനം, CSS എന്താണെന്നും അത് എവിടെയാണെന്നും എവിടെയാണ് ഇന്ന് വെബ്സൈറ്റുകളിൽ ഉപയോഗിച്ചിരിക്കുന്നത് എന്നും പരിശോധിക്കുകയും ചെയ്യും.
ഒരു CSS ചരിത്രം പാഠം
വെബ് ഡവലപ്പർമാരെ സൃഷ്ടിക്കുന്ന വെബ് പേജുകളുടെ ദൃശ്യപരതയെ നിർവചിക്കുന്നതിന് 1997-ൽ വെബ് ഡെവലപ്പർമാർക്ക് സി.എസ്.എസ് വികസിപ്പിച്ചെടുത്തു. വെബ് പ്രൊഫഷണലുകൾ വിഷ്വൽ ഡിസൈനിൽ നിന്ന് ഒരു വെബ്സൈറ്റിന്റെ കോഡിന്റെ ഉള്ളടക്കവും ഘടനയും വേർതിരിക്കാൻ അനുവദിക്കുകയായിരുന്നു, ഈ സമയത്തിന് മുമ്പ് സാധ്യമല്ലാത്ത ഒരു കാര്യം.
ഘടനയും ശൈലിയും വേർതിരിക്കുന്നത്, അതിന്റേതായ സവിശേഷതയെ കുറിച്ച് HTML- ന്റെ ഫലകമാക്കൽ - ഉള്ളടക്കം മാര്ക്കപ്പ്, പേജിൻറെ തന്നെ രൂപകൽപ്പനയും വിതാനത്തെക്കുറിച്ചും വിഷമിക്കേണ്ടതില്ല, സാധാരണയായി "കാഴ്ചയും അനുഭവവും" പേജിൽ.
വെബ് ബ്രൌസറുകൾ ഈ മാർക്ക്അപ്പ് ഭാഷയിലെ അടിസ്ഥാന ഫോണ്ടും വർണ്ണ വശങ്ങളുമല്ലാതെ കൂടുതൽ ഉപയോഗിക്കുമ്പോൾ, 2000 വരെ സി.എസ്.എസ് ജനപ്രീതി നേടിയില്ല. ഇന്ന്, എല്ലാ ആധുനിക ബ്രൗസറുകളും CSS ലെവൽ 1, CSS ലെവൽ 2 ന്റെ മിക്കതും, CSS ലെവൽ 3 ലെ മിക്ക ഘടകങ്ങളും എല്ലാം പിന്തുണയ്ക്കുന്നു. സി.എസ്.എസ് വികസിപ്പിച്ചെടുക്കുകയും പുതിയ ശൈലികൾ അവതരിപ്പിക്കുകയും ചെയ്യുന്നതിനാൽ, വെബ് ബ്രൗസറുകൾ ആ ബ്രൌസറുകളിലേക്ക് പുതിയ CSS പിന്തുണ കൊണ്ടുവരുന്നതും പുതിയ വെബ് സ്റ്റൈലറുകൾ ശക്തമായ പുതിയ സ്റ്റൈലിംഗ് ടൂളുകൾ നൽകുന്നതുമായ ഘടകങ്ങൾ നടപ്പിലാക്കാൻ തുടങ്ങിയിരിക്കുന്നു.
വെബ് സൈറ്റുകളുടെ രൂപകൽപ്പനയ്ക്കും വികാസത്തിനും ഉള്ള CSS ഉപയോഗിക്കാൻ വിസമ്മതിക്കുന്ന തിരഞ്ഞെടുത്ത വെബ് ഡിസൈനർമാർ, കഴിഞ്ഞ കുറേ വർഷങ്ങളായി, ആ വ്യവസായം ഇന്ന് വ്യവസായത്തിൽ നിന്നും മാറിയിരിക്കുകയാണ്. ഇപ്പോൾ വെബ് ഡിസൈനിലെ സിഎസ്എസ് വളരെ വ്യാപകമായി ഉപയോഗിക്കപ്പെടുന്നുണ്ട്. ഈ ഭാഷയെ കുറിച്ചു അടിസ്ഥാനപരമായ അറിവ് ഇല്ലാത്ത വ്യവസായത്തിൽ ജോലി ചെയ്യുന്നവരെ കണ്ടെത്താൻ നിങ്ങൾ ബുദ്ധിമുട്ടായിരിക്കും.
ഒരു ചെറിയ സംഗ്രഹമാണ് CSS
ഇതിനകം പറഞ്ഞിരിക്കുന്നതുപോലെ, "Cascading Style Sheet" എന്നതിനെയാണ് CSS എന്നു വിളിക്കുന്നത്. ഈ രേഖകളെക്കുറിച്ച് കൂടുതൽ വിശദമായി വിശദമാക്കുന്നതിന് ഈ വാക്യം കുറച്ചുകൂടി കുറയ്ക്കുക.
"ശൈലി ഷീറ്റ്" എന്ന പദം ആ പ്രമാണത്തെ സൂചിപ്പിക്കുന്നു (വൈവിധ്യമാർന്ന പ്രോഗ്രാമുകളിൽ മാറ്റം വരുത്താൻ കഴിയുന്ന എച്ച്.റ്റി.എം.എൽ, സി.എസ്.എസ്. ഫയലുകൾ വെറും ടെക്സ്റ്റ് പ്രമാണങ്ങളാണ്). ശൈലി ഷീറ്റുകൾ വർഷങ്ങളായി പ്രമാണ രൂപകൽപ്പനയ്ക്ക് ഉപയോഗിച്ചു. അച്ചടിച്ചോ അല്ലെങ്കിൽ ഓൺലൈനിലാണെന്നോ ലേഔട്ടിനായുള്ള സാങ്കേതിക സ്പെസിഫിക്കേഷനുകളാണ് അവ. പ്രിന്റ് ഡിസൈനർമാർക്ക് ശൈലി ഷീറ്റുകൾ ദീർഘകാലം ഉപയോഗിച്ചു. ഒരു വെബ് പേജിനുള്ള ഒരു ശൈലി ഷീറ്റ് സമാന ഉദ്ദേശത്തോടെ പ്രവർത്തിക്കുന്നു, പക്ഷെ ഡോക്യുമെന്റ് കാണിക്കുന്ന റെൻഡർ എങ്ങനെ വെബ് ബ്രൌസറിനോട് പറയുന്നതിലുള്ള കൂട്ടിച്ചേർക്കലാണ്. ഇന്ന്, വിവിധ സ്റ്റൈലുകൾക്കും സ്ക്രീൻ വലുപ്പങ്ങൾക്കും ഒരു പേജ് നോക്കുന്ന രീതി മാറ്റാൻ CSS സ്റ്റൈൽ ഷീറ്റുകളും മീഡിയ ചോദ്യങ്ങൾ ഉപയോഗിക്കാം. ഒരു എച്ച്.റ്റി.എം.എൽ പ്രമാണം ആക്സസ് ചെയ്യാൻ ഉപയോഗിച്ചിരിക്കുന്നതിന് അനുസരിച്ച് വ്യത്യസ്തമായി റെൻഡർ ചെയ്യപ്പെടുന്നതിന് അനുവദിക്കുന്നതിനാൽ ഇത് അവിശ്വസനീയമാണ്.
"കാസ്കേഡിംഗ് ശൈലി ഷീറ്റ്" എന്നതിന്റെ യഥാർത്ഥ ഭാഗമാണ് കാസ്കേഡ് . ഒരു ഷീറ്റിലെ ഒരു പരമ്പരയിലൂടെ ഒരു വെള്ളച്ചാട്ടത്തെ പോലെ ഒരു നദി പോലെ ഒരു വെബ് ശൈലി ഷീറ്റ് ഉണ്ടാകും . നദിയിലെ വെള്ളം പാറക്കെട്ടിലെ എല്ലാ പാറക്കല്ലുകളുമെല്ലാം വെള്ളത്തിൽ വീഴുന്നു, പക്ഷേ വെള്ളം താഴേക്ക് ഒഴുകുന്നതുവരെ മാത്രമേ ചുവടെയുള്ളൂ. വെബ്സൈറ്റ് സ്റ്റൈൽ ഷീറ്റിലെ കാസ്കേഡിനെ സംബന്ധിച്ചും ഇത് സത്യമാണ്.
വെബ് ഡിസൈനർ ഏതെങ്കിലും ശൈലികൾ പ്രയോഗിച്ചില്ലെങ്കിലും ഓരോ വെബ് പേജും കുറഞ്ഞത് ഒരു സ്റ്റൈൽ ഷീറ്റിനാൽ ബാധകമാണ്. ഈ ശൈലി ഷീറ്റ് ഉപയോക്തൃ ഏജന്റ് ശൈലി ഷീറ്റ് ആണ് - മറ്റ് നിർദ്ദേശങ്ങളൊന്നും നൽകിയില്ലെങ്കിൽ ഒരു പേജ് പ്രദർശിപ്പിക്കുന്നതിന് വെബ് ബ്രൗസർ ഉപയോഗിക്കുന്ന സ്ഥിരസ്ഥിതി ശൈലികളായും അറിയപ്പെടുന്നു. ഉദാഹരണത്തിനു്, സ്വതവേയുള്ള ഹൈപ്പർലിങ്കുകൾ നീലനിറത്തിലാണ്, അവ അടിവരയിടുന്നതാണു്. വെബ് ശൈലികളുടെ സ്ഥിര സ്റ്റൈൽ ഷീറ്റിൽ നിന്നാണ് ഈ ശൈലികൾ വരുന്നത്. വെബ് ഡിസൈനർ മറ്റ് നിർദേശങ്ങൾ നൽകിയിട്ടുണ്ടെങ്കിൽ, നിർദ്ദേശങ്ങൾക്കാണ് മുൻഗണന എന്ന് ബ്രൗസറിന് അറിയേണ്ടിവരും. എല്ലാ ബ്രൗസറുകൾക്കും അവരുടെ സ്വന്തം സ്ഥിരസ്ഥിതി ശൈലികളാണുള്ളത്, എന്നാൽ സ്ഥിരസ്ഥിതികളിൽ പലതും (നീല അടിവരയിട്ട വാചക ലിങ്കുകൾ പോലുള്ളവ) എല്ലാം അല്ലെങ്കിൽ മിക്ക പ്രമുഖ ബ്രൗസറുകളിലും പതിപ്പുകളിലും പങ്കിടുന്നതാണ്.
ബ്രൌസര് സ്ഥിരമായി മറ്റൊരു ബ്രൌസറിനായി, എന്റെ വെബ് ബ്രൌസറില്, സ്ഥിരസ്ഥിതി ഫോണ്ട് " ടൈംസ് ന്യൂ റോമന് " 16 ആണ്. കാരണം, ഡിസൈനർമാർ സജ്ജമാക്കിയ രണ്ടാമത്തെ ശൈലി ഷീറ്റുകൾ, ഫോണ്ട് സൈസും കുടുംബവും പുനർനാമകമാക്കുന്നതിന് എന്റെ വെബ് ബ്രൌസറിൻറെ സ്ഥിരസ്ഥിതികളെ അസാധുവാക്കുന്നു എന്ന് കാസ്കേഡ് നിർവ്വചിക്കുന്നു. ഒരു വെബ് പേജിനായി നിങ്ങൾ സൃഷ്ടിക്കുന്ന ഏത് ശൈലി ഷീറ്റുകളും ഒരു ബ്രൌസറിൻറെ സ്ഥിര സ്റ്റൈലുകളെക്കാളും കൂടുതൽ വ്യക്തമാക്കും, അതിനാൽ നിങ്ങളുടെ ശൈലി ഷീറ്റ് അവ മറികടക്കുന്നില്ലെങ്കിൽ മാത്രം ഈ സ്ഥിരസ്ഥിതികൾ ബാധകമാകും. നിങ്ങൾ കണ്ണുകൾ നീലയും അടിവരയിട്ടുമാണെങ്കിൽ, അത് സ്ഥിരസ്ഥിതി ആയതിനാൽ ഒന്നും ചെയ്യേണ്ടതില്ല, എന്നാൽ നിങ്ങളുടെ സൈറ്റിന്റെ CSS ഫയൽ ലിങ്കുകൾ പച്ചയായിരിക്കണമെങ്കിൽ, ആ നിറം സ്ഥിരസ്ഥിതി നീലത്തെ അസാധുവാക്കും. ഈ ഉദാഹരണത്തിൽ അടിവരയിട്ടു തുടരും, കാരണം നിങ്ങൾ മറ്റൊരുതരത്തിൽ വ്യക്തമാക്കിയിട്ടില്ല.
എവിടെയാണ് CSS ഉപയോഗിച്ചിരിക്കുന്നത്?
ഒരു വെബ് ബ്രൌസറിനേക്കാൾ മറ്റ് മീഡിയകളിൽ കാണുമ്പോൾ വെബ് പേജുകൾ എങ്ങിനെയാണ് കാണേണ്ടത് എന്ന് നിർവ്വചിക്കാൻ CSS ഉപയോഗപ്പെടുത്താം. ഉദാഹരണത്തിന്, വെബ് പേജ് അച്ചടിക്കുന്നതെങ്ങനെ എന്ന് നിർവചിക്കുന്ന പ്രിന്റ് ശൈലി ഷീറ്റ് നിങ്ങൾക്ക് സൃഷ്ടിക്കാൻ കഴിയും. കാരണം നാവിഗേഷൻ ബട്ടണുകൾ അല്ലെങ്കിൽ വെബ് ഫോമുകൾ പോലുള്ള വെബ് പേജ് ഇനങ്ങൾ പ്രിന്റ് ചെയ്ത പേജിൽ ഒരു ലക്ഷ്യമില്ലാതെ ആകും, ഒരു പേജ് പ്രിന്റ് ചെയ്തപ്പോൾ ആ ഭാഗങ്ങൾ "ഓഫ്" ചെയ്യുന്നതിന് അച്ചടി സ്റ്റൈൽ ഷീറ്റ് ഉപയോഗിക്കാവുന്നതാണ്. പ്രിന്റ് സ്റ്റൈൽ ഷീറ്റുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ഓപ്ഷൻ വളരെ ശക്തവും ആകർഷകവുമാണ് (എന്റെ അനുഭവത്തിൽ മിക്ക വെബ് വിദഗ്ധരും ഇത് ചെയ്യുന്നില്ല, കാരണം ബജറ്റിന്റെ ഒരു സൈറ്റിന്റെ പരിധി ഈ അധിക പ്രവൃത്തി പൂർത്തിയാക്കാൻ വേണ്ടിയല്ല ).
എന്തുകൊണ്ടാണ് CSS പ്രധാനപ്പെട്ടത്?
ഒരു വെബ് ഡിസൈനർക്ക് പഠിക്കാനാകുന്ന ഏറ്റവും കരുത്താർന്ന ഉപകരണങ്ങളിൽ ഒന്നാണ് സിഎസ്എസ്. കാരണം അതിനോടൊപ്പം നിങ്ങൾക്ക് ഒരു വെബ്സൈറ്റിലെ മുഴുവൻ ദൃശ്യ രൂപഭാവത്തെയും ബാധിക്കാം. നന്നായി എഴുതപ്പെട്ട ശൈലി ഷീറ്റുകൾ വേഗത്തിൽ അപ്ഡേറ്റ് ചെയ്യാൻ കഴിയും, സ്ക്രീനിൽ ദൃശ്യപരമായി മുൻഗണനയുള്ളവയെ മാറ്റാൻ സൈറ്റുകൾ അനുവദിക്കും, അത് ആഴ്സണൽ എച്ച്ഡി മാർക്ക്അപ്പിനുള്ള മാറ്റങ്ങളൊന്നുമില്ലാതെ സന്ദർശകർക്ക് മൂല്യവും ഫോക്കസും നൽകുന്നു.
സിഎഎസ്സിന്റെ പ്രധാന വെല്ലുവിളി എന്താണെന്നറിയുന്നത്, ഓരോ ദിവസവും മാറുന്ന ബ്രൗസറുകളിലൂടെ, ഇന്ന് നന്നായി പ്രവർത്തിക്കുന്നത് പുതിയ സ്റ്റൈൽസ് പിന്തുണയ്ക്കാറുള്ളതിനാൽ മറ്റുള്ളവർക്ക് ഒരു കാരണമോ അല്ലെങ്കിൽ മറ്റെന്തെങ്കിലുമോ .
CSS ന് പരസ്പരം ബന്ധിപ്പിക്കുകയും സംയോജിപ്പിക്കുകയും ചെയ്യുന്നു, വ്യത്യസ്ത ബ്രോക്കർമാർ വ്യത്യസ്ത രീതികളെ വ്യാഖ്യാനിച്ച് നടപ്പിലാക്കാൻ കഴിയുന്നതെങ്ങനെയെന്ന് പരിഗണിക്കുന്നതിനാൽ, മാസ്റ്ററിൽ ലളിതമായ HTML- നെക്കാൾ CSS വളരെ ബുദ്ധിമുട്ടായിരിക്കും. HTML ശരിക്കും ഇല്ലെങ്കിൽ ബ്രൗസറിലും CSS മാറുന്നു. നിങ്ങൾ CSS ഉപയോഗിച്ചുതുടങ്ങുമ്പോൾ ഒരിക്കൽ, ശൈലികളുടെ ശൃംഖലയുടെ ശക്തിയേ, നിങ്ങൾ ലേഔട്ട് വെബ് പേജുകളിൽ നിങ്ങൾ അവിശ്വസനീയമായ വഴക്കം പ്രകടിപ്പിക്കുകയും അവരുടെ കാഴ്ചയും അനുഭവവും നിർവചിക്കുകയും ചെയ്യും. കൂടാതെ, നിങ്ങൾക്കാവശ്യമായ ശൈലികളും സമീപനങ്ങളും ഒരു "ബാഗും ബാഗ്" ആകും, ഭാവിയിൽ നിങ്ങൾ പുതിയ വെബ്പേജുകൾ പുതുക്കുമ്പോൾ തന്നെ നിങ്ങൾ വീണ്ടും തിരിച്ച് പോകാൻ കഴിയും.
ജെന്നിഫർ ക്രിയിൻ എഴുതിയ ലേഖനം എഡിറ്റു ചെയ്തത് ജെറമി ഗിർാർഡ് 7/5/17,