നിരവധി വർഷങ്ങളായി, CSS ഫ്ലോട്ടുകൾ ഫിനീക്കിയും, അത്യാവശ്യവുമാണ്, വെബ്സൈറ്റ് ലേഔട്ടുകളിൽ സൃഷ്ടിക്കുന്നതിനുള്ള ഘടകം. നിങ്ങളുടെ ഡിസൈൻ ഒന്നിലധികം നിരകൾ ആവശ്യപ്പെട്ടിട്ടുണ്ടെങ്കിൽ, നിങ്ങൾ ഫ്ലോട്ടുകളിലേക്ക് തിരിയുന്നു . സങ്കീർണ്ണമായ സൈറ്റ് ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നതിൽ വെബ് ഡിസൈനർമാർ / ഡവലപ്പർമാർ നൽകിയ വിചിത്രമായ വിവേചനാധികാരം ഉണ്ടായിട്ടുണ്ടെങ്കിലും, ഈ രീതിയിലാണ് CSS ഫ്ലോട്ടുകൾ യഥാർഥത്തിൽ ഒരിക്കലും ഉപയോഗിക്കപ്പെടാൻ പാടില്ല എന്നതാണ്.
ഫ്ലോട്ടുകൾ, സി.എസ്.എസ്. പൊസിഷനിംഗ് എന്നിവ പല വർഷങ്ങളായി വെബ് ഡിസൈനിൽ സ്ഥാനം പിടിച്ചിട്ടുണ്ടെങ്കിലും, CSS ഗ്രിഡ്, ഫ്ളെക്സ്ബോക്സ് എന്നിവ ഉൾപ്പെടുന്ന പുതിയ ലേഔട്ട് ടെക്നിക്കുകൾ വെബ് ഡിസൈനർമാർക്ക് അവരുടെ സൈറ്റ് ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള പുതിയ രീതികൾ നൽകുന്നു. ധാരാളം പുതിയ സാധ്യതകൾ കാണിക്കുന്ന മറ്റൊരു പുതിയ ലേഔട്ട് ടെക്നിക്കാണ് സിഎസ്എസ് മൾട്ടിപ്പിൾ നിരകൾ.
ഇപ്പോൾ കുറച്ചു വർഷങ്ങളായി CSS നിരകൾ മാറിയിട്ടുണ്ടു്, പക്ഷേ പഴയ ബ്രൗസറുകളിൽ (പ്രധാനമായും ഇന്റർനെറ്റ് എക്സ്പ്ലോററിന്റെ പഴയ വേർഷനുകൾ) പിന്തുണയില്ലായ്മ പല വെബ് പ്രൊഫഷണലുകളും അവരുടെ സ്റ്റാൻഡേർഡ് പ്രവർത്തനങ്ങൾ ഉപയോഗിച്ചു് ഇതു് ഉപയോഗിയ്ക്കുന്നു.
ഐഇയുടെ പഴയ പതിപ്പുകൾക്കുള്ള പിന്തുണയോടെ, ചില വെബ് ഡിസൈനർമാർ പുതിയ സിഎസ്എസ് ലേഔട്ട് ഓപ്ഷനുകളുമായി ഇപ്പോൾ പരീക്ഷിച്ചു വരുന്നു, CSS കോളങ്ങൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്, അവർ ഫ്ലോട്ടുകളിൽ പ്രവർത്തിച്ചതിനേക്കാൾ ഈ പുതിയ സമീപനങ്ങളുമായി കൂടുതൽ നിയന്ത്രണം ഉണ്ടെന്ന് കണ്ടെത്തുകയും ചെയ്യുന്നു.
CSS കോളങ്ങളുടെ അടിസ്ഥാനതത്വങ്ങൾ
ഇതിന്റെ പേര് സൂചിപ്പിക്കുന്നതുപോലെ, സിഎസ്എസ് മൾട്ടിപ്പിൾ നിരകൾ (CSS3 മൾട്ടി-നിര ലേഔട്ട് എന്നും അറിയപ്പെടുന്നു) ഒരു കൂട്ടം നിരകളുടെ രൂപത്തിൽ വിഭജിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. നിങ്ങൾ ഉപയോഗിക്കുന്ന ഏറ്റവും അടിസ്ഥാന CSS സവിശേഷതകൾ:
- നിര-എണ്ണം
- നിര-വിടവ്
നിര കൗണ്ടിനായി നിങ്ങൾക്ക് ആവശ്യമുള്ള നിരകളുടെ എണ്ണം വ്യക്തമാക്കുക. കോളത്തിന്റെ വിടവ് ആ നിരകൾക്കിടയിലെ ഗട്ടർറുകളോ സ്പേസുകളോ ആയിരിക്കും. ബ്രൌസർ ഈ മൂല്യങ്ങൾ എടുത്തു നിങ്ങൾ വ്യക്തമാക്കുന്ന നിരകളുടെ എണ്ണം സമമായി ചേർക്കുന്നു.
പ്രാഥമിക ഘട്ടത്തിലുള്ള CSS ഒന്നിലധികം നിരകളുടെ ഒരു സാധാരണ ഉദാഹരണം, ഒരു വാചകം ലേഖനത്തിലെ ഒരു വാചക ഉള്ളടക്കത്തെ ഒന്നിലധികം നിരകളായി വിഭജിക്കലായിരിക്കും. നിങ്ങൾക്ക് ചുവടെയുള്ള HTML മാർക്ക്അപ്പ് ഉണ്ടെന്ന് പറയുക (ഉദാഹരണത്തിന്, ഞാൻ ഒരു ഖണ്ഡികയുടെ ആരംഭം മാത്രമേ എടുക്കുകയുള്ളൂ, അതേ സമയം ഈ മാർക്കപ്പിൽ ഉള്ളടക്കത്തിൽ ഒന്നിലധികം ഖണ്ഡികകൾ ഉണ്ടായിരിക്കാം):
നിങ്ങളുടെ ലേഖനത്തിൻറെ തലക്കെട്ട്
ഇവിടെ ധാരാളം വാചകങ്ങൾ സങ്കൽപ്പിക്കുക ...
നിങ്ങൾ ഈ CSS സ്റ്റൈലുകൾ എഴുതിയിട്ടുണ്ടെങ്കിൽ:
.content {-moz-column-count: 3; -webkit-column-count: 3; നിര-എണ്ണം: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; നിര-വിടവ്: 30px; }ഈ സിഎസ്സി ഭരണം "ഉള്ളടക്ക" ഡിവിഷൻ, 30 പിക്സലുകൾ വിഭജിച്ച് 3 തുല്യ നിരകളായി വിഭജിക്കും. നിങ്ങൾ 3 നിരയ്ക്ക് പകരം രണ്ട് കോളംസ് ആവശ്യപ്പെട്ടാൽ, ആ മൂല്യത്തെ നിങ്ങൾ മാറ്റിയേ മതിയാവൂ. ബ്രൌസറിന്റെ പുതിയ വീതിയും അതേ അളവിൽ വിഭജിക്കാനായി കണക്കുകൂട്ടും. മുൻപറഞ്ഞ വെണ്ടർ പ്രീഫിക്സ് ചെയ്ത വസ്തുക്കൾ ആദ്യം ഉപയോഗിക്കുന്നത് ശ്രദ്ധിക്കുക, തുടർന്ന് പ്രിഫിക്സുചെയ്യാത്ത പ്രഖ്യാപനങ്ങൾ.
ഇതു പോലെ ലളിതമായി, ഈ വിധത്തിൽ ഇതിന്റെ ഉപയോഗം വെബ്സൈറ്റിന്റെ ഉപയോഗത്തിന് ഉപകരിക്കുന്നതാണ്. അതെ, നിങ്ങൾക്ക് ഒരു കൂട്ടം ഉള്ളടക്കത്തെ ഒന്നിലധികം നിരകളായി വിഭജിക്കാൻ കഴിയും, പക്ഷേ ഇത് വെബിനായുള്ള മികച്ച വായനാനുഭവമായിരിക്കില്ല, പ്രത്യേകിച്ച് ഈ നിരകളുടെ ഉയരം സ്ക്രീനിന്റെ "ഫോൾഡറിന് താഴെയാണെങ്കിൽ.
വായനക്കാർക്ക് മുഴുവൻ ഉള്ളടക്കവും വായിക്കാനായി മുകളിലേക്ക് താഴേക്ക് സ്ക്രോൾ ചെയ്യേണ്ടി വരും. എന്നിരുന്നാലും, ഇവിടെ നിങ്ങൾ കാണുന്നത് പോലെ CSS കോളങ്ങളുടെ പ്രിൻററാണ് അത്ര എളുപ്പമാകുന്നത്, ചില ഖണ്ഡികകളുടെ ഉള്ളടക്കം വിഭജിക്കുന്നതിനേക്കാൾ കൂടുതൽ ചെയ്യാൻ ഇത് ഉപയോഗിക്കുവാൻ കഴിയും - തീർച്ചയായും ഇത് ലേഔട്ടിനായി ഉപയോഗിക്കും.
CSS നിരകൾ ഉപയോഗിച്ച് ലേഔട്ട്
ഉള്ളടക്കത്തിന്റെ മൂന്ന് നിര ഉള്ള ഉള്ളടക്ക ഏരിയ ഉള്ള ഒരു വെബ്പേജുണ്ടെന്ന് പറയുക. ഇത് ഒരു സാധാരണ വെബ്സൈറ്റ് ലേഔട്ടാണ്, ആ മൂന്ന് കോളങ്ങൾ നേടാൻ, നിങ്ങൾ സാധാരണയായി ഉള്ള വിഭാഗങ്ങൾ ഫ്ലോട്ട് ചെയ്യും. CSS ഒന്നിലധികം നിരകൾ ഉപയോഗിച്ച് ഇത് വളരെ എളുപ്പമാണ്.
ചില സാമ്പിൾ HTML ഇവിടെയുണ്ട്:
പുതിയ വാർത്ത
ഉള്ളടക്കം ഇവിടെ തന്നെ തുടരും ...
ഉള്ളടക്കം ഇവിടേക്ക് പോകും ...
വരാനിരിക്കുന്ന പരിപാടികൾ p> ഈ ഒന്നിലധികം നിരകൾ നിർമ്മിക്കുന്നതിന് CSS നിങ്ങൾ മുമ്പ് കണ്ടവയോടെ ആരംഭിക്കുന്നു:
.content {-moz-column-count: 3; -webkit-column-count: 3; നിര-എണ്ണം: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; നിര-വിടവ്: 30px; } ഇപ്പോൾ, ഇവിടെ വെല്ലുവിളി, ബ്രൌസർ ഈ ഉള്ളടക്കം ഒരൊറ്റമായി വേർതിരിച്ചെടുക്കണം എന്നതിനാൽ, അങ്ങനെ ഈ ഡിവിഷനുകളുടെ ഉള്ളടക്ക ദൈർഘ്യം വ്യത്യസ്തമാണെങ്കിൽ, ആ ബ്രൌസർ ഒരു വ്യക്തിയുടെ ഡിവിഷനിലെ ഉള്ളടക്കം യഥാർത്ഥത്തിൽ വിഭജിക്കും. തുടർന്ന് മറ്റൊന്നിലേക്ക് (തുടർച്ചയായി ഓരോ ഡിവിഷനിലും ഉള്ള വിവിധ വ്യാപ്തികൾ ചേർക്കാൻ ഒരു കോഡ് ഈ കോഡ് ഉപയോഗിച്ചുകൊണ്ട് നിങ്ങൾക്ക് കാണാൻ കഴിയും)!
നിങ്ങൾ ആഗ്രഹിക്കുന്നതല്ല ഇത്. ഓരോ ഡിവിഷനുകൾക്കും ഒരു പ്രത്യേക നിര സൃഷ്ടിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു, ഒരു വ്യക്തിയുടെ ഡിവിഷൻ ഉള്ളടക്കമുണ്ടാകാം എത്ര വലുത് അല്ലെങ്കിൽ ചെറുതാണെങ്കിലും നിങ്ങൾ അതിനെ ഒരിക്കലും പിളർപ്പാക്കാൻ ആഗ്രഹിക്കുന്നില്ല. നിങ്ങൾക്ക് CSS- ന്റെ ഒരു അധിക വരി ചേർക്കുന്നതിലൂടെ ഇത് നേടാം:
.content div {display: inline-block; } ഇത് ബ്രൌസറിനെ വിവിധ കോളംകളായി വേർതിരിച്ചുകഴിഞ്ഞാൽപ്പോലും "ഉള്ളടക്കം" ഉള്ളിലെ വിഭജനങ്ങൾ നിർബ്ബന്ധിതമാണ്. ഇതിലും നല്ലത്, ഞങ്ങൾ ഇവിടെ നിശ്ചിത വീതി ഒന്നും നൽകാത്തതിനാൽ, ബ്രൌസർ വലുപ്പം മാറ്റിയതു പോലെ ഈ നിരകൾ സ്വയം വലുപ്പമാക്കും, പ്രതികരിച്ച വെബ്സൈറ്റുകൾക്കായി അവ അനുയോജ്യമായ ഒരു ആപ്ലിക്കേഷനാക്കി മാറ്റുന്നു. ആ "ഇൻലൈൻ ബ്ലോക്ക്" രീതി ഉപയോഗിച്ച് നിങ്ങളുടെ ഓരോ മൂന്നു ഡിവിഷനുകളും ഉള്ളടക്കത്തിന്റെ ഒരു വ്യത്യസ്തമായ നിരയായിരിക്കും.
നിര-വിഡ്ത്ത് ഉപയോഗിക്കുന്നു
നിങ്ങൾക്ക് ഉപയോഗിക്കാവുന്ന "നിര-എണ്ണം", കൂടാതെ നിങ്ങളുടെ ലേഔട്ട് ആവശ്യങ്ങൾ അനുസരിച്ച് മറ്റൊരു വസ്തു കൂടി ഉണ്ട്, ഇത് യഥാർത്ഥത്തിൽ നിങ്ങളുടെ സൈറ്റിനായുള്ള മികച്ച തിരഞ്ഞെടുക്കലാകാം. ഇതാണ് "കോളം-വീതി". ഇതേ എച്ച്.റ്റി.എം.എൽ മാർക്ക് ഉപയോഗിക്കുന്നതിനു മുമ്പ്, നമുക്ക് ഇത് നമ്മുടെ CSS ഉപയോഗിച്ച് ചെയ്യാം:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; നിര-വിഡ്ത്ത്: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; നിര-വിടവ്: 30px; } .content div {display: inline-block; } ഇത് പ്രവർത്തിക്കുന്ന രീതി, ആ നിരയുടെ പരമാവധി മൂല്യമായി ബ്രൗസർ ഈ "നിര-വീതി" ഉപയോഗിക്കുന്നു. അതിനാൽ ബ്രൌസർ വിൻഡോ 500 പിക്സൽ വീതിയേക്കാൾ കുറവാണെങ്കിൽ, ഈ മൂന്ന് ഡിവിഷനുകൾ ഒരൊറ്റ നിരയിൽ പ്രത്യക്ഷപ്പെടും, മറ്റൊന്നിന്റെ ബലി ഇത് മൊബൈൽ / ചെറിയ സ്ക്രീൻ ലേയൗട്ടുകൾക്കായി ഉപയോഗിക്കുന്ന ഒരു സാധാരണ ശൈലി ആണ്.
ബ്രൌസറിന്റെ വീതി, നിശ്ചിത നിര വിടവുകൾക്കൊപ്പം രണ്ട് നിരകൾക്കും അനുയോജ്യമായതിനാല്, ഒരൊറ്റ നിര ശൈലിയില് നിന്ന് രണ്ടു നിരകളിലേക്ക് ബ്രൌസര് ഓട്ടോമാറ്റിക്കായി പോകും. സ്ക്രീനിന്റെ വീതി കൂട്ടുക, ഒടുവിൽ 3 നിര ഡിസൈൻ ലഭിക്കും, ഓരോ മൂന്നു ഡിവിഷനുകളും അവരുടെ സ്വന്തം കോളത്തിൽ പ്രദർശിപ്പിക്കും. വീണ്ടും, പ്രതികരിക്കുന്ന, ഒന്നിലധികം ഉപകരണങ്ങളുമായുള്ള സൗഹൃദ ലേഔട്ടുകൾ ലഭിക്കുന്നതിന് ഇത് മികച്ച മാർഗമാണ്, കൂടാതെ ലേഔട്ട് ശൈലികൾ മാറ്റുന്നതിന് നിങ്ങൾ മീഡിയ ചോദ്യങ്ങൾ ഉപയോഗിക്കേണ്ടതില്ല!
മറ്റ് നിര പ്രോപ്പർട്ടികൾ
ഇവിടെ പറഞ്ഞിരിക്കുന്ന പ്രോപ്പർട്ടികൾ കൂടാതെ, നിങ്ങളുടെ നിരകൾക്കിടയിലുള്ള നിയമങ്ങൾ സൃഷ്ടിക്കാൻ അനുവദിക്കുന്ന വർണ, ശൈലി, വീതി മൂല്യങ്ങൾ എന്നിവയുൾപ്പെടെയുള്ള "നിര-ഭരണം" എന്നതുമുണ്ട്. നിങ്ങളുടെ നിരകൾ വേർതിരിക്കുന്ന ചില വരികൾ വേണമെങ്കിൽ ഇത് ബോർഡറുകളേക്കാൾ ഉപയോഗിക്കും.
പരീക്ഷണത്തിനുള്ള സമയം
നിലവിൽ, സിഎസ്എസ് ഒന്നിലധികം നിര ശൈലി നന്നായി പിന്തുണയ്ക്കുന്നു. പ്രീഫിക്സുകൾ ഉപയോഗിച്ച്, 94% വെബ് ഉപയോക്താക്കൾക്ക് ഈ ശൈലികൾ കാണാൻ സാധിക്കും, പിന്തുണയ്ക്കാത്ത ഗ്രൂപ്പിനെ Internet Explorer- ന്റെ വളരെ പഴയ പതിപ്പുകളായിരിക്കുക തന്നെ ചെയ്യും അത് നിങ്ങൾ ഏതുവിധേനയും പിന്തുണയ്ക്കില്ല.
ഇപ്പോൾ പിന്തുണയുടെ ഈ തലത്തിലുള്ള സഹായത്തോടെ, CSS നിരകൾ പരീക്ഷിച്ചു തുടങ്ങുവാനുള്ള കാരണവും ഉൽപ്പാദനം തയ്യാറാക്കുന്ന വെബ്സൈറ്റുകളിൽ ഈ ശൈലികൾ വിന്യസിക്കേണ്ടതുമില്ല. നിങ്ങളുടെ സൈറ്റിന്റെ ലേഔട്ട് ആവശ്യകതകൾക്ക് മികച്ച രീതിയിൽ പ്രവർത്തിക്കാൻ കഴിയുന്നത് കാണാൻ, ഈ ലേഖനത്തിൽ അവതരിപ്പിച്ചിട്ടുള്ള HTML- ഉം CSS- ഉം ഉപയോഗിച്ച് നിങ്ങളുടെ പരീക്ഷണങ്ങൾ ആരംഭിക്കാൻ കഴിയും, വ്യത്യസ്ത മൂല്യങ്ങളോടൊപ്പം കളിക്കുക.
ഈ ഒന്നിലധികം നിരകൾ നിർമ്മിക്കുന്നതിന് CSS നിങ്ങൾ മുമ്പ് കണ്ടവയോടെ ആരംഭിക്കുന്നു:
.content {-moz-column-count: 3; -webkit-column-count: 3; നിര-എണ്ണം: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; നിര-വിടവ്: 30px; }ഇപ്പോൾ, ഇവിടെ വെല്ലുവിളി, ബ്രൌസർ ഈ ഉള്ളടക്കം ഒരൊറ്റമായി വേർതിരിച്ചെടുക്കണം എന്നതിനാൽ, അങ്ങനെ ഈ ഡിവിഷനുകളുടെ ഉള്ളടക്ക ദൈർഘ്യം വ്യത്യസ്തമാണെങ്കിൽ, ആ ബ്രൌസർ ഒരു വ്യക്തിയുടെ ഡിവിഷനിലെ ഉള്ളടക്കം യഥാർത്ഥത്തിൽ വിഭജിക്കും. തുടർന്ന് മറ്റൊന്നിലേക്ക് (തുടർച്ചയായി ഓരോ ഡിവിഷനിലും ഉള്ള വിവിധ വ്യാപ്തികൾ ചേർക്കാൻ ഒരു കോഡ് ഈ കോഡ് ഉപയോഗിച്ചുകൊണ്ട് നിങ്ങൾക്ക് കാണാൻ കഴിയും)!
നിങ്ങൾ ആഗ്രഹിക്കുന്നതല്ല ഇത്. ഓരോ ഡിവിഷനുകൾക്കും ഒരു പ്രത്യേക നിര സൃഷ്ടിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു, ഒരു വ്യക്തിയുടെ ഡിവിഷൻ ഉള്ളടക്കമുണ്ടാകാം എത്ര വലുത് അല്ലെങ്കിൽ ചെറുതാണെങ്കിലും നിങ്ങൾ അതിനെ ഒരിക്കലും പിളർപ്പാക്കാൻ ആഗ്രഹിക്കുന്നില്ല. നിങ്ങൾക്ക് CSS- ന്റെ ഒരു അധിക വരി ചേർക്കുന്നതിലൂടെ ഇത് നേടാം:
.content div {display: inline-block; }ഇത് ബ്രൌസറിനെ വിവിധ കോളംകളായി വേർതിരിച്ചുകഴിഞ്ഞാൽപ്പോലും "ഉള്ളടക്കം" ഉള്ളിലെ വിഭജനങ്ങൾ നിർബ്ബന്ധിതമാണ്. ഇതിലും നല്ലത്, ഞങ്ങൾ ഇവിടെ നിശ്ചിത വീതി ഒന്നും നൽകാത്തതിനാൽ, ബ്രൌസർ വലുപ്പം മാറ്റിയതു പോലെ ഈ നിരകൾ സ്വയം വലുപ്പമാക്കും, പ്രതികരിച്ച വെബ്സൈറ്റുകൾക്കായി അവ അനുയോജ്യമായ ഒരു ആപ്ലിക്കേഷനാക്കി മാറ്റുന്നു. ആ "ഇൻലൈൻ ബ്ലോക്ക്" രീതി ഉപയോഗിച്ച് നിങ്ങളുടെ ഓരോ മൂന്നു ഡിവിഷനുകളും ഉള്ളടക്കത്തിന്റെ ഒരു വ്യത്യസ്തമായ നിരയായിരിക്കും.
നിര-വിഡ്ത്ത് ഉപയോഗിക്കുന്നു
നിങ്ങൾക്ക് ഉപയോഗിക്കാവുന്ന "നിര-എണ്ണം", കൂടാതെ നിങ്ങളുടെ ലേഔട്ട് ആവശ്യങ്ങൾ അനുസരിച്ച് മറ്റൊരു വസ്തു കൂടി ഉണ്ട്, ഇത് യഥാർത്ഥത്തിൽ നിങ്ങളുടെ സൈറ്റിനായുള്ള മികച്ച തിരഞ്ഞെടുക്കലാകാം. ഇതാണ് "കോളം-വീതി". ഇതേ എച്ച്.റ്റി.എം.എൽ മാർക്ക് ഉപയോഗിക്കുന്നതിനു മുമ്പ്, നമുക്ക് ഇത് നമ്മുടെ CSS ഉപയോഗിച്ച് ചെയ്യാം:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; നിര-വിഡ്ത്ത്: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; നിര-വിടവ്: 30px; } .content div {display: inline-block; }ഇത് പ്രവർത്തിക്കുന്ന രീതി, ആ നിരയുടെ പരമാവധി മൂല്യമായി ബ്രൗസർ ഈ "നിര-വീതി" ഉപയോഗിക്കുന്നു. അതിനാൽ ബ്രൌസർ വിൻഡോ 500 പിക്സൽ വീതിയേക്കാൾ കുറവാണെങ്കിൽ, ഈ മൂന്ന് ഡിവിഷനുകൾ ഒരൊറ്റ നിരയിൽ പ്രത്യക്ഷപ്പെടും, മറ്റൊന്നിന്റെ ബലി ഇത് മൊബൈൽ / ചെറിയ സ്ക്രീൻ ലേയൗട്ടുകൾക്കായി ഉപയോഗിക്കുന്ന ഒരു സാധാരണ ശൈലി ആണ്.
ബ്രൌസറിന്റെ വീതി, നിശ്ചിത നിര വിടവുകൾക്കൊപ്പം രണ്ട് നിരകൾക്കും അനുയോജ്യമായതിനാല്, ഒരൊറ്റ നിര ശൈലിയില് നിന്ന് രണ്ടു നിരകളിലേക്ക് ബ്രൌസര് ഓട്ടോമാറ്റിക്കായി പോകും. സ്ക്രീനിന്റെ വീതി കൂട്ടുക, ഒടുവിൽ 3 നിര ഡിസൈൻ ലഭിക്കും, ഓരോ മൂന്നു ഡിവിഷനുകളും അവരുടെ സ്വന്തം കോളത്തിൽ പ്രദർശിപ്പിക്കും. വീണ്ടും, പ്രതികരിക്കുന്ന, ഒന്നിലധികം ഉപകരണങ്ങളുമായുള്ള സൗഹൃദ ലേഔട്ടുകൾ ലഭിക്കുന്നതിന് ഇത് മികച്ച മാർഗമാണ്, കൂടാതെ ലേഔട്ട് ശൈലികൾ മാറ്റുന്നതിന് നിങ്ങൾ മീഡിയ ചോദ്യങ്ങൾ ഉപയോഗിക്കേണ്ടതില്ല!
മറ്റ് നിര പ്രോപ്പർട്ടികൾ
ഇവിടെ പറഞ്ഞിരിക്കുന്ന പ്രോപ്പർട്ടികൾ കൂടാതെ, നിങ്ങളുടെ നിരകൾക്കിടയിലുള്ള നിയമങ്ങൾ സൃഷ്ടിക്കാൻ അനുവദിക്കുന്ന വർണ, ശൈലി, വീതി മൂല്യങ്ങൾ എന്നിവയുൾപ്പെടെയുള്ള "നിര-ഭരണം" എന്നതുമുണ്ട്. നിങ്ങളുടെ നിരകൾ വേർതിരിക്കുന്ന ചില വരികൾ വേണമെങ്കിൽ ഇത് ബോർഡറുകളേക്കാൾ ഉപയോഗിക്കും.
പരീക്ഷണത്തിനുള്ള സമയം
നിലവിൽ, സിഎസ്എസ് ഒന്നിലധികം നിര ശൈലി നന്നായി പിന്തുണയ്ക്കുന്നു. പ്രീഫിക്സുകൾ ഉപയോഗിച്ച്, 94% വെബ് ഉപയോക്താക്കൾക്ക് ഈ ശൈലികൾ കാണാൻ സാധിക്കും, പിന്തുണയ്ക്കാത്ത ഗ്രൂപ്പിനെ Internet Explorer- ന്റെ വളരെ പഴയ പതിപ്പുകളായിരിക്കുക തന്നെ ചെയ്യും അത് നിങ്ങൾ ഏതുവിധേനയും പിന്തുണയ്ക്കില്ല.
ഇപ്പോൾ പിന്തുണയുടെ ഈ തലത്തിലുള്ള സഹായത്തോടെ, CSS നിരകൾ പരീക്ഷിച്ചു തുടങ്ങുവാനുള്ള കാരണവും ഉൽപ്പാദനം തയ്യാറാക്കുന്ന വെബ്സൈറ്റുകളിൽ ഈ ശൈലികൾ വിന്യസിക്കേണ്ടതുമില്ല. നിങ്ങളുടെ സൈറ്റിന്റെ ലേഔട്ട് ആവശ്യകതകൾക്ക് മികച്ച രീതിയിൽ പ്രവർത്തിക്കാൻ കഴിയുന്നത് കാണാൻ, ഈ ലേഖനത്തിൽ അവതരിപ്പിച്ചിട്ടുള്ള HTML- ഉം CSS- ഉം ഉപയോഗിച്ച് നിങ്ങളുടെ പരീക്ഷണങ്ങൾ ആരംഭിക്കാൻ കഴിയും, വ്യത്യസ്ത മൂല്യങ്ങളോടൊപ്പം കളിക്കുക.