സിഎസ്എസ് ലോജിക്കൽ പ്രോപ്പർട്ടീസ് ലെവൽ 2: മെച്ചപ്പെട്ട റൈറ്റിംഗ് മോഡ് പിന്തുണയോടെ ഒരു യഥാർത്ഥ ആഗോള വെബ് നിർമ്മിക്കാം

ദശാബ്ദങ്ങളായി, വെബ് ഡെവലപ്പർമാർ ഭൗതിക ലോകത്തിൽ അധിഷ്ഠിതമായ വാക്കുകൾ ഉപയോഗിച്ചാണ് ലേഔട്ടുകൾ നിർമ്മിച്ചിരുന്നത്: top, bottom, left, പിന്നെ right. നമ്മൾ margin-left, padding-top, border-right എന്നിവ സെറ്റ് ചെയ്തു. വെബ് പ്രധാനമായും ഇടത്തുനിന്ന് വലത്തോട്ടും മുകളിൽ നിന്ന് താഴേക്കും ഉള്ള ഒരു മാധ്യമമായിരുന്നപ്പോൾ ഈ രീതി നമ്മളെ നന്നായി സഹായിച്ചു. എന്നിരുന്നാലും, വെബ് ആഗോളമാണ്. ഇത് എല്ലാ ഭാഷകൾക്കും സംസ്കാരങ്ങൾക്കുമുള്ള ഒരു പ്ലാറ്റ്‌ഫോമാണ്, അവയിൽ പലതും ഈ ലളിതമായ ദിശാ രീതി പിന്തുടരുന്നില്ല.

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

ഈ സമഗ്രമായ ഗൈഡ് ലെവൽ 2 നൽകുന്ന മെച്ചപ്പെടുത്തലുകളിലേക്ക് നിങ്ങളെ ആഴത്തിൽ കൊണ്ടുപോകും. പ്രധാന ആശയങ്ങൾ ഓർമ്മപ്പെടുത്തിക്കൊണ്ട് നമ്മുക്ക് തുടങ്ങാം, അതിനുശേഷം വിടവുകൾ നികത്തുന്ന പുതിയ പ്രോപ്പർട്ടികളും വാല്യൂകളും പര്യവേക്ഷണം ചെയ്യാം, ഒടുവിൽ, ഏത് റൈറ്റിംഗ് മോഡിനോടും സുഗമമായി പൊരുത്തപ്പെടുന്ന ഒരു കോമ്പോണൻ്റ് നിർമ്മിച്ച് ഇതെല്ലാം പ്രായോഗികമാക്കാം. സിഎസ്എസ് ലേഔട്ടിനെക്കുറിച്ച് നിങ്ങൾ ചിന്തിക്കുന്ന രീതി എന്നെന്നേക്കുമായി മാറ്റാൻ തയ്യാറാകുക.

ഒരു ചെറിയ ഓർമ്മപ്പെടുത്തൽ: ലോജിക്കൽ പ്രോപ്പർട്ടീസിന്റെ പ്രധാന ആശയങ്ങൾ (ലെവൽ 1)

ലെവൽ 2-ലെ കൂട്ടിച്ചേർക്കലുകളെ അഭിനന്ദിക്കുന്നതിന് മുൻപ്, ലെവൽ 1 സ്ഥാപിച്ച അടിത്തറയെക്കുറിച്ച് നമുക്ക് വ്യക്തമായ ധാരണയുണ്ടായിരിക്കണം. ഈ മുഴുവൻ സിസ്റ്റവും രണ്ട് പ്രധാന ആശയങ്ങളെ അടിസ്ഥാനമാക്കിയാണ് നിർമ്മിച്ചിരിക്കുന്നത്: റൈറ്റിംഗ് മോഡ്, അതിൻ്റെ ഫലമായുണ്ടാകുന്ന ബ്ലോക്ക്, ഇൻലൈൻ ആക്സിസുകൾ.

നാല് റൈറ്റിംഗ് മോഡുകൾ

writing-mode എന്ന സിഎസ്എസ് പ്രോപ്പർട്ടി ടെക്സ്റ്റ് ഏത് ദിശയിലാണ് ക്രമീകരിക്കുന്നത് എന്ന് നിർണ്ണയിക്കുന്നു. നമ്മൾ പലപ്പോഴും ഡിഫോൾട്ട് വില നിസ്സാരമായി കാണുമെങ്കിലും, പേജിൽ ഉള്ളടക്കം എങ്ങനെ ഒഴുകുന്നു എന്ന് അടിസ്ഥാനപരമായി മാറ്റുന്ന നിരവധി വിലകളുണ്ട്:

• horizontal-tb: മിക്ക പാശ്ചാത്യ ഭാഷകൾക്കും ഇതാണ് ഡിഫോൾട്ട്. ടെക്സ്റ്റ് തിരശ്ചീനമായി (ഇൻലൈൻ ആക്സിസ്) ഇടത്തുനിന്ന് വലത്തോട്ടോ (അല്ലെങ്കിൽ ദിശയനുസരിച്ച് വലത്തുനിന്ന് ഇടത്തോട്ടോ) ഒഴുകുന്നു, കൂടാതെ വരികൾ മുകളിൽ നിന്ന് താഴേക്ക് (ബ്ലോക്ക് ആക്സിസ്) അടുക്കുന്നു.
• vertical-rl: പരമ്പരാഗത കിഴക്കൻ ഏഷ്യൻ ടൈപ്പോഗ്രാഫിക്ക് (ഉദാഹരണത്തിന്, ജാപ്പനീസ്, ചൈനീസ്) ഉപയോഗിക്കുന്നു. ടെക്സ്റ്റ് ലംബമായി മുകളിൽ നിന്ന് താഴേക്ക് (ഇൻലൈൻ ആക്സിസ്) ഒഴുകുന്നു, കൂടാതെ വരികൾ വലത്തുനിന്ന് ഇടത്തേക്ക് (ബ്ലോക്ക് ആക്സിസ്) അടുക്കുന്നു.
• vertical-lr: മുകളിലുള്ളതിന് സമാനം, പക്ഷേ വരികൾ ഇടത്തുനിന്ന് വലത്തോട്ട് (ബ്ലോക്ക് ആക്സിസ്) അടുക്കുന്നു. അത്ര സാധാരണമല്ല, പക്ഷേ മംഗോളിയൻ ലിപി പോലുള്ള ചില സന്ദർഭങ്ങളിൽ ഉപയോഗിക്കുന്നു.
• sidelong-rl / sidelong-lr: അക്ഷരങ്ങൾ ഒരു വശത്തേക്ക് ചരിച്ച് വെക്കേണ്ട പ്രത്യേക ഉപയോഗങ്ങൾക്കുള്ളതാണ് ഇവ. പൊതുവായ വെബ് ഉള്ളടക്കത്തിൽ ഇവ അത്ര സാധാരണയായി കാണാറില്ല.

നിർണ്ണായക ആശയം: ബ്ലോക്ക് വേഴ്സസ് ഇൻലൈൻ ആക്സിസ്

ഇതാണ് മനസ്സിലാക്കേണ്ട ഏറ്റവും പ്രധാനപ്പെട്ട ആശയം. ഒരു ലോജിക്കൽ ലോകത്ത്, നമ്മൾ "ലംബം", "തിരശ്ചീനം" എന്ന് ചിന്തിക്കുന്നത് നിർത്തി ബ്ലോക്ക്, ഇൻലൈൻ ആക്സിസുകളെക്കുറിച്ച് ചിന്തിക്കാൻ തുടങ്ങുന്നു. അവയുടെ ദിശാബോധം പൂർണ്ണമായും writing-mode-നെ ആശ്രയിച്ചിരിക്കുന്നു.

• ഇൻലൈൻ ആക്സിസ് എന്നത് ഒരു വരിയിൽ ടെക്സ്റ്റ് ഒഴുകുന്ന ദിശയാണ്.
• ബ്ലോക്ക് ആക്സിസ് എന്നത് പുതിയ വരികൾ അടുക്കിവെക്കുന്ന ദിശയാണ്.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്ന് നോക്കാം:

• സാധാരണ ഇംഗ്ലീഷിൽ (writing-mode: horizontal-tb): ഇൻലൈൻ ആക്സിസ് തിരശ്ചീനമായും, ബ്ലോക്ക് ആക്സിസ് ലംബമായും പ്രവർത്തിക്കുന്നു.
• പരമ്പരാഗത ജാപ്പനീസിൽ (writing-mode: vertical-rl): ഇൻലൈൻ ആക്സിസ് ലംബമായും, ബ്ലോക്ക് ആക്സിസ് തിരശ്ചീനമായും പ്രവർത്തിക്കുന്നു.

ഈ ആക്സിസുകൾക്ക് മാറാൻ കഴിയുന്നതുകൊണ്ട്, width, height പോലുള്ള പ്രോപ്പർട്ടികൾ അവ്യക്തമാകും. width എന്നത് തിരശ്ചീന ആക്സിസിലെ വലുപ്പമാണോ അതോ ഇൻലൈൻ ആക്സിസിലെ വലുപ്പമാണോ? ലോജിക്കൽ പ്രോപ്പർട്ടികൾ ഈ അവ്യക്തത പരിഹരിക്കുന്നു. ഇപ്പോൾ നമുക്ക് ഓരോ ആക്സിസിനും start, end എന്നിവയുണ്ട്:

• block-start: ഇംഗ്ലീഷിൽ "മുകൾ", എന്നാൽ ലംബമായ ജാപ്പനീസിൽ "വലത്".
• block-end: ഇംഗ്ലീഷിൽ "താഴെ", എന്നാൽ ലംബമായ ജാപ്പനീസിൽ "ഇടത്".
• inline-start: ഇംഗ്ലീഷിൽ "ഇടത്", എന്നാൽ ലംബമായ ജാപ്പനീസിൽ "മുകൾ".
• inline-end: ഇംഗ്ലീഷിൽ "വലത്", എന്നാൽ ലംബമായ ജാപ്പനീസിൽ "താഴെ".

ഭൗതിക പ്രോപ്പർട്ടികളെ ലോജിക്കൽ പ്രോപ്പർട്ടികളിലേക്ക് മാപ്പ് ചെയ്യൽ (ലെവൽ 1)

ലെവൽ 1 ഭൗതിക പ്രോപ്പർട്ടികളിൽ നിന്ന് ലോജിക്കൽ പ്രോപ്പർട്ടികളിലേക്കുള്ള ഒരു സമഗ്രമായ മാപ്പിംഗ് അവതരിപ്പിച്ചു. ചില പ്രധാന ഉദാഹരണങ്ങൾ ഇതാ:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (പൊസിഷനിംഗിനായി) → inset-inline-start / inset-inline-end
• top / bottom (പൊസിഷനിംഗിനായി) → inset-block-start / inset-block-end

ലെവൽ 1 നമുക്ക് margin-inline (start, end എന്നിവയ്ക്ക്), padding-block (start, end എന്നിവയ്ക്ക്) പോലുള്ള ഉപയോഗപ്രദമായ ഷോർട്ട്ഹാൻഡുകളും നൽകി.

ലെവൽ 2-ലേക്ക് സ്വാഗതം: എന്താണ് പുതിയത്, എന്തുകൊണ്ട് ഇത് പ്രധാനമാണ്

ലെവൽ 1 ഒരു വലിയ മുന്നേറ്റമായിരുന്നെങ്കിലും, അത് ചില ശ്രദ്ധേയമായ വിടവുകൾ അവശേഷിപ്പിച്ചു. float, clear, resize തുടങ്ങിയ ചില അടിസ്ഥാന സിഎസ്എസ് പ്രോപ്പർട്ടികൾക്ക് ലോജിക്കൽ തത്തുല്യങ്ങൾ ഇല്ലായിരുന്നു. കൂടാതെ, border-radius പോലുള്ള പ്രോപ്പർട്ടികൾ ലോജിക്കലായി നിയന്ത്രിക്കാൻ കഴിഞ്ഞില്ല, ഇത് ഡെവലപ്പർമാരെ സൂക്ഷ്മമായ സ്റ്റൈലിംഗിനായി ഭൗതിക പ്രോപ്പർട്ടികളിലേക്ക് മടങ്ങാൻ നിർബന്ധിതരാക്കി. ഇതിനർത്ഥം, നിങ്ങൾക്ക് ഒരു ലേഔട്ട് 90% ലോജിക്കൽ പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് നിർമ്മിക്കാൻ കഴിയുമെങ്കിലും, വ്യത്യസ്ത റൈറ്റിംഗ് മോഡുകൾക്കായി ഭൗതിക ഓവർറൈഡുകൾ ആവശ്യമായി വരും, ഇത് യഥാർത്ഥ ഉദ്ദേശ്യത്തെ ഭാഗികമായി പരാജയപ്പെടുത്തി.

സിഎസ്എസ് ലോജിക്കൽ പ്രോപ്പർട്ടീസ് ലെവൽ 2 ഈ പോരായ്മകളെ നേരിട്ട് അഭിസംബോധന ചെയ്യുന്നു. ഇതൊരു പുതിയ സിസ്റ്റം അവതരിപ്പിക്കുന്നതിനെക്കുറിച്ചല്ല, മറിച്ച് ലെവൽ 1-ൽ ആരംഭിച്ചത് പൂർത്തിയാക്കുന്നതിനെക്കുറിച്ചാണ്. ഇത് പ്രധാനമായും രണ്ട് വഴികളിലൂടെയാണ് നേടുന്നത്:

1. പഴയതും സഹജമായി ഭൗതികവുമായ സിഎസ്എസ് ഫീച്ചറുകൾക്കായി (float പോലുള്ളവ) പുതിയ ലോജിക്കൽ പ്രോപ്പർട്ടികളും വാല്യൂകളും അവതരിപ്പിക്കുന്നു.
2. മുമ്പ് അവഗണിക്കപ്പെട്ട സങ്കീർണ്ണമായ ഷോർട്ട്ഹാൻഡുകൾക്കായി (border-radius പോലുള്ളവ) ലോജിക്കൽ പ്രോപ്പർട്ടി മാപ്പിംഗുകൾ ചേർക്കുന്നു.

ലെവൽ 2-ലൂടെ, പൂർണ്ണമായും ഫ്ലോ-റിലേറ്റീവ് ആയ ഒരു സ്റ്റൈലിംഗ് സിസ്റ്റം എന്ന കാഴ്ചപ്പാട് ഏതാണ്ട് പൂർത്തിയായി, ഇത് ഹാക്കുകളോ ഓവർറൈഡുകളോ ഇല്ലാതെ, എല്ലായിടത്തും എല്ലാവർക്കുമായി പ്രവർത്തിക്കുന്ന സങ്കീർണ്ണവും മനോഹരവും കരുത്തുറ്റതുമായ കോമ്പോണൻ്റുകൾ നിർമ്മിക്കാൻ നമ്മളെ അനുവദിക്കുന്നു.

ആഴത്തിലുള്ള പഠനം: ലെവൽ 2-ലെ പുതിയ ലോജിക്കൽ വാല്യൂകളും പ്രോപ്പർട്ടികളും

ലെവൽ 2 നമ്മുടെ ഡെവലപ്പർ ടൂൾകിറ്റിലേക്ക് കൊണ്ടുവരുന്ന ഏറ്റവും സ്വാധീനം ചെലുത്തുന്ന കൂട്ടിച്ചേർക്കലുകൾ നമുക്ക് പര്യവേക്ഷണം ചെയ്യാം. വിടവുകൾ നികത്തുകയും യഥാർത്ഥ സാർവത്രിക കോമ്പോണൻ്റ് ഡിസൈൻ ശാക്തീകരിക്കുകയും ചെയ്യുന്ന ഉപകരണങ്ങളാണിവ.

ഫ്ലോട്ടും ക്ലിയറും: ലോജിക്കൽ വിപ്ലവം

float പ്രോപ്പർട്ടി വർഷങ്ങളായി സിഎസ്എസ് ലേഔട്ടിന്റെ ഒരു അടിസ്ഥാന ശിലയാണ്, എന്നാൽ അതിന്റെ വിലകളായ left, right എന്നിവ ഭൗതിക ദിശയുടെ നിർവചനമാണ്. നിങ്ങൾ ഒരു ചിത്രം ഇംഗ്ലീഷിലുള്ള ഒരു ഖണ്ഡികയുടെ left-ലേക്ക് ഫ്ലോട്ട് ചെയ്താൽ, അത് ശരിയായി കാണപ്പെടും. എന്നാൽ അറബിക്കായി ഡോക്യുമെൻ്റ് ദിശ വലത്തുനിന്ന് ഇടത്തോട്ട് (RTL) മാറ്റിയാൽ, ചിത്രം ഇപ്പോൾ ടെക്സ്റ്റ് ബ്ലോക്കിന്റെ "തെറ്റായ" വശത്തായിരിക്കും. അത് വലതുവശത്തായിരിക്കണം, അതാണ് വരിയുടെ തുടക്കം.

ലെവൽ 2 float പ്രോപ്പർട്ടിക്കായി രണ്ട് പുതിയ, ലോജിക്കൽ കീവേഡുകൾ അവതരിപ്പിക്കുന്നു:

• float: inline-start; ഇത് ഒരു എലമെൻ്റിനെ ഇൻലൈൻ ദിശയുടെ തുടക്കത്തിലേക്ക് ഫ്ലോട്ട് ചെയ്യുന്നു. LTR ഭാഷകളിൽ ഇത് ഇടത് വശമാണ്. RTL ഭാഷകളിൽ ഇത് വലത് വശമാണ്. ഒരു vertical-rl റൈറ്റിംഗ് മോഡിൽ ഇത് മുകൾ ഭാഗമാണ്.
• float: inline-end; ഇത് ഒരു എലമെൻ്റിനെ ഇൻലൈൻ ദിശയുടെ അവസാനത്തിലേക്ക് ഫ്ലോട്ട് ചെയ്യുന്നു. LTR-ൽ ഇത് വലതുവശമാണ്. RTL-ൽ ഇത് ഇടത് വശമാണ്. vertical-rl-ൽ ഇത് താഴെയാണ്.

അതുപോലെ, ഫ്ലോട്ട് ചെയ്ത എലമെൻ്റുകൾക്ക് ചുറ്റുമുള്ള ഉള്ളടക്കത്തിന്റെ റാപ്പിംഗ് നിയന്ത്രിക്കാൻ ഉപയോഗിക്കുന്ന clear പ്രോപ്പർട്ടിക്കും അതിൻ്റേതായ ലോജിക്കൽ തുല്യതകൾ ലഭിക്കുന്നു:

• clear: inline-start; ഇൻലൈൻ-സ്റ്റാർട്ട് വശത്തുള്ള ഫ്ലോട്ടുകളെ ക്ലിയർ ചെയ്യുന്നു.
• clear: inline-end; ഇൻലൈൻ-എൻഡ് വശത്തുള്ള ഫ്ലോട്ടുകളെ ക്ലിയർ ചെയ്യുന്നു.

ഇതൊരു വലിയ മാറ്റമാണ്. ഒരു വരി അധിക സിഎസ്എസ് ഇല്ലാതെ തന്നെ ഏത് ഭാഷാ ദിശയുമായും സ്വയമേവ പൊരുത്തപ്പെടുന്ന ക്ലാസിക് ഇമേജ്-വിത്ത്-ടെക്സ്റ്റ്-റാപ്പ് ലേഔട്ടുകൾ നിങ്ങൾക്ക് ഇപ്പോൾ നിർമ്മിക്കാൻ കഴിയും.

ലോജിക്കൽ റീസൈസ് ഉപയോഗിച്ച് മെച്ചപ്പെട്ട നിയന്ത്രണം

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

ലെവൽ 2 resize-നായി ലോജിക്കൽ വിലകൾ അവതരിപ്പിക്കുന്നു:

• resize: inline; ഇൻലൈൻ അക്ഷത്തിലൂടെ വലുപ്പം മാറ്റാൻ അനുവദിക്കുന്നു.
• resize: block; ബ്ലോക്ക് അക്ഷത്തിലൂടെ വലുപ്പം മാറ്റാൻ അനുവദിക്കുന്നു.

ഇംഗ്ലീഷിലുള്ള ഒരു textarea-യിൽ resize: block; ഉപയോഗിക്കുന്നത് ഉപയോക്താവിന് അതിൻ്റെ ഉയരം കൂട്ടാൻ അനുവദിക്കുന്നു. ഒരു ലംബമായ റൈറ്റിംഗ് മോഡിൽ ഇത് ഉപയോഗിക്കുന്നത് ഉപയോക്താവിന് അതിൻ്റെ വീതി കൂട്ടാൻ അനുവദിക്കുന്നു (അതാണ് ബ്ലോക്ക് ദിശ). ഇത് കൃത്യമായി പ്രവർത്തിക്കുന്നു.

`caption-side`: ടേബിൾ ക്യാപ്ഷനുകൾക്കുള്ള ലോജിക്കൽ പൊസിഷനിംഗ്

caption-side പ്രോപ്പർട്ടി ഒരു ടേബിളിന്റെ caption എവിടെ സ്ഥാപിക്കണമെന്ന് നിർണ്ണയിക്കുന്നു. പഴയ വിലകൾ top, bottom എന്നിവയായിരുന്നു. വീണ്ടും, ഇവ ഭൗതികമാണ്. ഒരു ഡിസൈനറുടെ ഉദ്ദേശ്യം ടേബിളിന്റെ ഉള്ളടക്കത്തിന് "മുമ്പായി" ക്യാപ്ഷൻ സ്ഥാപിക്കുക എന്നതാണെങ്കിൽ, തിരശ്ചീന റൈറ്റിംഗ് മോഡുകൾക്ക് top പ്രവർത്തിക്കും. എന്നാൽ ഒരു vertical-rl മോഡിൽ, ബ്ലോക്ക് ഫ്ലോയുടെ "തുടക്കം" വലതുവശത്താണ്, മുകളിലല്ല.

ലെവൽ 2 ലോജിക്കൽ പരിഹാരം നൽകുന്നു:

• caption-side: block-start; ക്യാപ്ഷനെ ബ്ലോക്ക് ഫ്ലോയുടെ തുടക്കത്തിൽ സ്ഥാപിക്കുന്നു.
• caption-side: block-end; ക്യാപ്ഷനെ ബ്ലോക്ക് ഫ്ലോയുടെ അവസാനത്തിൽ സ്ഥാപിക്കുന്നു.

`text-align`: ഒരു അടിസ്ഥാനപരമായ ലോജിക്കൽ വാല്യൂ

text-align-നുള്ള start, end എന്നീ വിലകൾ കുറച്ചുകാലമായി നിലവിലുണ്ടെങ്കിലും, അവ ലോജിക്കൽ പ്രോപ്പർട്ടീസ് തത്ത്വചിന്തയുടെ ഒരു പ്രധാന ഭാഗമാണ്, അത് ഉറപ്പിക്കേണ്ടതുണ്ട്. text-align: left; ഉപയോഗിക്കുന്നത് ഒരു സാധാരണ തെറ്റാണ്, ഇത് RTL ഭാഷകളിൽ ഉടൻ തന്നെ ലേഔട്ട് പ്രശ്നങ്ങൾക്ക് കാരണമാകുന്നു. ശരിയായ, ആധുനിക സമീപനം എല്ലായ്പ്പോഴും ഇത് ഉപയോഗിക്കുക എന്നതാണ്:

• text-align: start; ടെക്സ്റ്റിനെ ഇൻലൈൻ ദിശയുടെ തുടക്കത്തിലേക്ക് വിന്യസിക്കുന്നു.
• text-align: end; ടെക്സ്റ്റിനെ ഇൻലൈൻ ദിശയുടെ അവസാനത്തിലേക്ക് വിന്യസിക്കുന്നു.

ലെവൽ 2-ന്റെ കിരീടം: ലോജിക്കൽ `border-radius`

ഒരുപക്ഷേ ലെവൽ 2-ലെ ഏറ്റവും പ്രാധാന്യമർഹിക്കുന്നതും ശക്തവുമായ കൂട്ടിച്ചേർക്കൽ ബോർഡർ റേഡിയസുകൾ ലോജിക്കലായി നിയന്ത്രിക്കുന്നതിനുള്ള പ്രോപ്പർട്ടികളാണ്. മുമ്പ്, ഒരു കാർഡിന് "മുകളിലെ" കോണുകളിൽ മാത്രം വളവ് വേണമെങ്കിൽ, നിങ്ങൾ border-top-left-radius, border-top-right-radius എന്നിവ ഉപയോഗിക്കുമായിരുന്നു. ഇത് ഒരു ലംബമായ റൈറ്റിംഗ് മോഡിൽ പൂർണ്ണമായും തകരുന്നു, അവിടെ "മുകളിലെ" കോണുകൾ ഇപ്പോൾ start-start, end-start കോണുകളാണ്.

ലെവൽ 2 ഒരു എലമെൻ്റിൻ്റെ നാല് കോണുകളിലേക്ക് ഫ്ലോ-റിലേറ്റീവ് രീതിയിൽ മാപ്പ് ചെയ്യുന്ന നാല് പുതിയ ലോംഗ്‌ഹാൻഡ് പ്രോപ്പർട്ടികൾ അവതരിപ്പിക്കുന്നു. ഇതിന്റെ പേരിടൽ രീതി border-[block-edge]-[inline-edge]-radius എന്നാണ്.

• border-start-start-radius: ബ്ലോക്ക്-സ്റ്റാർട്ടും ഇൻലൈൻ-സ്റ്റാർട്ടും ചേരുന്ന കോർണർ.
• border-start-end-radius: ബ്ലോക്ക്-സ്റ്റാർട്ടും ഇൻലൈൻ-എൻഡും ചേരുന്ന കോർണർ.
• border-end-start-radius: ബ്ലോക്ക്-എൻഡും ഇൻലൈൻ-സ്റ്റാർട്ടും ചേരുന്ന കോർണർ.
• border-end-end-radius: ബ്ലോക്ക്-എൻഡും ഇൻലൈൻ-എൻഡും ചേരുന്ന കോർണർ.

ഇത് ആദ്യം മനസ്സിലാക്കാൻ പ്രയാസമായിരിക്കും, അതിനാൽ നമുക്ക് വിവിധ റൈറ്റിംഗ് മോഡുകൾക്കായി ഇത് മാപ്പ് ചെയ്യാം:

`writing-mode: horizontal-tb` (ഉദാ: ഇംഗ്ലീഷ്) യിൽ `border-radius` മാപ്പ് ചെയ്യുമ്പോൾ

• border-start-start-radius എന്നത് top-left-radius-ലേക്ക് മാപ്പ് ചെയ്യുന്നു.
• border-start-end-radius എന്നത് top-right-radius-ലേക്ക് മാപ്പ് ചെയ്യുന്നു.
• border-end-start-radius എന്നത് bottom-left-radius-ലേക്ക് മാപ്പ് ചെയ്യുന്നു.
• border-end-end-radius എന്നത് bottom-right-radius-ലേക്ക് മാപ്പ് ചെയ്യുന്നു.

`dir="rtl"` ഉള്ള `writing-mode: horizontal-tb` (ഉദാ: അറബി) യിൽ `border-radius` മാപ്പ് ചെയ്യുമ്പോൾ

ഇവിടെ, ഇൻലൈൻ ദിശ തിരിച്ചിരിക്കുന്നു.

• border-start-start-radius എന്നത് top-right-radius-ലേക്ക് മാപ്പ് ചെയ്യുന്നു. (ബ്ലോക്ക്-സ്റ്റാർട്ട് മുകളിലും, ഇൻലൈൻ-സ്റ്റാർട്ട് വലതുവശത്തുമാണ്).
• border-start-end-radius എന്നത് top-left-radius-ലേക്ക് മാപ്പ് ചെയ്യുന്നു.
• border-end-start-radius എന്നത് bottom-right-radius-ലേക്ക് മാപ്പ് ചെയ്യുന്നു.
• border-end-end-radius എന്നത് bottom-left-radius-ലേക്ക് മാപ്പ് ചെയ്യുന്നു.

`writing-mode: vertical-rl` (ഉദാ: ജാപ്പനീസ്) യിൽ `border-radius` മാപ്പ് ചെയ്യുമ്പോൾ

ഇവിടെ, രണ്ട് ആക്സിസുകളും തിരിഞ്ഞിരിക്കുന്നു.

• border-start-start-radius എന്നത് top-right-radius-ലേക്ക് മാപ്പ് ചെയ്യുന്നു. (ബ്ലോക്ക്-സ്റ്റാർട്ട് വലതുവശത്തും, ഇൻലൈൻ-സ്റ്റാർട്ട് മുകളിലുമാണ്).
• border-start-end-radius എന്നത് bottom-right-radius-ലേക്ക് മാപ്പ് ചെയ്യുന്നു.
• border-end-start-radius എന്നത് top-left-radius-ലേക്ക് മാപ്പ് ചെയ്യുന്നു.
• border-end-end-radius എന്നത് bottom-left-radius-ലേക്ക് മാപ്പ് ചെയ്യുന്നു.

ഈ പുതിയ പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് ഭൗതിക സ്ക്രീനിനോടല്ല, മറിച്ച് ഉള്ളടക്കത്തിന്റെ ഒഴുക്കുമായി അർത്ഥപരമായി ബന്ധിപ്പിച്ചിട്ടുള്ള കോർണർ റേഡിയസുകൾ നിർവചിക്കാൻ കഴിയും. ഒരു "start-start" കോർണർ ഭാഷയോ ടെക്സ്റ്റ് ദിശയോ പരിഗണിക്കാതെ എല്ലായ്പ്പോഴും ശരിയായ കോർണർ ആയിരിക്കും.

പ്രായോഗികമായി നടപ്പിലാക്കൽ: ഒരു ഗ്ലോബൽ-റെഡി കോമ്പോണൻ്റ് നിർമ്മിക്കാം

സിദ്ധാന്തം മികച്ചതാണ്, എന്നാൽ ഇത് പ്രായോഗികമായി എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്ന് നോക്കാം. നമ്മൾ ഒരു ലളിതമായ പ്രൊഫൈൽ കാർഡ് കോമ്പോണൻ്റ് നിർമ്മിക്കും, ആദ്യം പഴയ ഭൗതിക പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച്, തുടർന്ന് ലെവൽ 1, ലെവൽ 2 എന്നിവയിൽ നിന്നുള്ള ആധുനിക ലോജിക്കൽ പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് അതിനെ റീഫാക്റ്റർ ചെയ്യും.

കാർഡിന് ഒരു വശത്തേക്ക് ഫ്ലോട്ട് ചെയ്ത ഒരു ചിത്രം, ഒരു തലക്കെട്ട്, കുറച്ച് ടെക്സ്റ്റ്, ഒരു അലങ്കാര ബോർഡറും വളഞ്ഞ കോണുകളും ഉണ്ടായിരിക്കും.

"പഴയ" വഴി: ദുർബലമായ, ഭൗതിക-പ്രോപ്പർട്ടി കാർഡ്

കുറച്ച് വർഷങ്ങൾക്ക് മുൻപ് നമ്മൾ ഈ കാർഡ് എങ്ങനെ സ്റ്റൈൽ ചെയ്യുമായിരുന്നു എന്നത് താഴെ നൽകുന്നു:

/* --- സിഎസ്എസ് (ഭൗതിക പ്രോപ്പർട്ടികൾ) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

ഒരു സാധാരണ ഇംഗ്ലീഷ് LTR പശ്ചാത്തലത്തിൽ ഇത് നന്നായി കാണപ്പെടുന്നു. എന്നാൽ നമ്മൾ ഇത് dir="rtl" അല്ലെങ്കിൽ writing-mode: vertical-rl ഉള്ള ഒരു കണ്ടെയ്‌നറിനുള്ളിൽ വെച്ചാൽ, ലേഔട്ട് തകരും. അലങ്കാര ബോർഡർ തെറ്റായ വശത്താണ്, അവതാർ തെറ്റായ വശത്താണ്, മാർജിൻ തെറ്റാണ്, വളഞ്ഞ കോണുകൾ തെറ്റായ സ്ഥാനത്താണ്.

"പുതിയ" വഴി: കരുത്തുറ്റ, ലോജിക്കൽ-പ്രോപ്പർട്ടി കാർഡ്

ഇനി, നമുക്ക് ഇതേ കോമ്പോണൻ്റ് ലോജിക്കൽ പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് റീഫാക്റ്റർ ചെയ്യാം. ലെവൽ 1, ലെവൽ 2 എന്നിവയിൽ നിന്നുള്ള പ്രോപ്പർട്ടികൾ നമ്മൾ ഉപയോഗിക്കും.

/* --- സിഎസ്എസ് (ലോജിക്കൽ പ്രോപ്പർട്ടികൾ) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` ഷോർട്ട്ഹാൻഡ് ഇതിനകം ലോജിക്കലാണ്! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* ലെവൽ 2 പവർ! */

  border-end-start-radius: 8px; /* ലെവൽ 2 പവർ! */

}

.logical-card .avatar {

  float: inline-start; /* ലെവൽ 2 പവർ! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

പരിശോധനയും ഉറപ്പുവരുത്തലും

ഈ പുതിയ സിഎസ്എസ് ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ഈ കോമ്പോണൻ്റ് ഏത് കണ്ടെയ്‌നറിലും ഇടാം, അത് സ്വയമേവ പൊരുത്തപ്പെടും.

• ഒരു LTR പശ്ചാത്തലത്തിൽ: ഇത് യഥാർത്ഥ ഭൗതിക പതിപ്പിന് സമാനമായി കാണപ്പെടും.
• ഒരു RTL പശ്ചാത്തലത്തിൽ (dir="rtl"): അവതാർ വലതുവശത്തേക്ക് ഫ്ലോട്ട് ചെയ്യും, അതിന്റെ മാർജിൻ ഇടതുവശത്തായിരിക്കും, അലങ്കാര ബോർഡർ വലതുവശത്തായിരിക്കും, ടെക്സ്റ്റ് സ്റ്റാർട്ട്-അലൈൻഡ് (വലതുവശത്തേക്ക്) ആയിരിക്കും. വളഞ്ഞ കോണുകൾ ശരിയായി മുകളിൽ-വലത്തും താഴെ-വലത്തും ആയിരിക്കും. ഇത് തനിയെ പ്രവർത്തിക്കുന്നു.
• ഒരു ലംബമായ പശ്ചാത്തലത്തിൽ (writing-mode: vertical-rl): കാർഡിന്റെ "വീതി" (ഇപ്പോൾ അതിന്റെ ലംബമായ inline-size) 300px ആയിരിക്കും. അവതാർ "മുകളിലേക്ക്" (inline-start) ഫ്ലോട്ട് ചെയ്യും, അതിന്റെ "താഴെ" (inline-end) ഒരു മാർജിൻ ഉണ്ടാകും. അലങ്കാര ബോർഡർ വലതുവശത്തായിരിക്കും (inline-start), വളഞ്ഞ കോണുകൾ മുകളിൽ-വലത്തും മുകളിൽ-ഇടത്തും ആയിരിക്കും. മീഡിയ ക്വറികളോ ഓവർറൈഡുകളോ ഇല്ലാതെ കോമ്പോണൻ്റ് പൂർണ്ണമായും ശരിയായി പുനഃക്രമീകരിച്ചിരിക്കുന്നു.

ബ്രൗസർ പിന്തുണയും ഫാൾബാക്കുകളും

ഇതെല്ലാം മികച്ചതായി തോന്നുന്നു, എന്നാൽ ബ്രൗസർ പിന്തുണയുടെ കാര്യമോ? നല്ല വാർത്ത, ലെവൽ 1 ലോജിക്കൽ പ്രോപ്പർട്ടികൾക്കുള്ള പിന്തുണ എല്ലാ ആധുനിക ബ്രൗസറുകളിലും മികച്ചതാണ്. നിങ്ങൾക്ക് ഇന്ന് തന്നെ margin-inline-start, padding-block പോലുള്ള പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കാം, ഉപയോഗിക്കുകയും വേണം.

പുതിയ ലെവൽ 2 ഫീച്ചറുകൾക്കുള്ള പിന്തുണ അതിവേഗം മെച്ചപ്പെടുന്നുണ്ടെങ്കിലും ഇതുവരെ സാർവത്രികമായിട്ടില്ല. float, clear, resize എന്നിവയുടെ ലോജിക്കൽ വിലകൾക്ക് നല്ല പിന്തുണയുണ്ട്. ലോജിക്കൽ border-radius പ്രോപ്പർട്ടികൾ ഏറ്റവും പുതിയതാണ്, അവ ഇപ്പോഴും ഫീച്ചർ ഫ്ലാഗുകൾക്ക് പിന്നിലോ അല്ലെങ്കിൽ ഏറ്റവും പുതിയ ബ്രൗസർ പതിപ്പുകളിലോ ആയിരിക്കാം. എപ്പോഴും, ഏറ്റവും പുതിയ അനുയോജ്യതാ ഡാറ്റയ്ക്കായി നിങ്ങൾ MDN വെബ് ഡോക്സ് അല്ലെങ്കിൽ CanIUse.com പോലുള്ള ഉറവിടങ്ങൾ പരിശോധിക്കണം.

പ്രോഗ്രസ്സീവ് എൻഹാൻസ്മെൻ്റിനുള്ള തന്ത്രങ്ങൾ

സിഎസ്എസ് പ്രതിരോധശേഷിയുള്ളതായി രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതിനാൽ, പഴയ ബ്രൗസറുകൾക്കായി നമുക്ക് എളുപ്പത്തിൽ ഫാൾബാക്കുകൾ നൽകാൻ കഴിയും. ഒരു ബ്രൗസറിന് ഒരു ലോജിക്കൽ പ്രോപ്പർട്ടി മനസ്സിലായില്ലെങ്കിൽ, അത് അതിനെ അവഗണിച്ച് അതിന് മുൻപ് നിർവചിച്ചിട്ടുള്ള ഭൗതിക പ്രോപ്പർട്ടി ഉപയോഗിക്കുമെന്ന് കാസ്കേഡ് ഉറപ്പാക്കും.

ഫാൾബാക്ക്-റെഡി സിഎസ്എസ് എങ്ങനെ എഴുതാമെന്ന് ഇതാ:

.card {

  /* പഴയ ബ്രൗസറുകൾക്കുള്ള ഫാൾബാക്ക് */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* ഫാൾബാക്കിനെ ഓവർറൈഡ് ചെയ്യുന്ന ആധുനിക ലോജിക്കൽ പ്രോപ്പർട്ടി */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

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

ഭാവി ലോജിക്കലാണ്: ലെവൽ 2-നപ്പുറം

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

ഇപ്പോഴും വിടവുകളുണ്ടോ? കുറച്ച്. background-position അല്ലെങ്കിൽ ഗ്രേഡിയൻ്റ്‌സ് പോലുള്ള പ്രോപ്പർട്ടികൾക്കുള്ള ലോജിക്കൽ വിലകൾ ഇപ്പോഴും ചർച്ചയിലാണ്. എന്നാൽ ലെവൽ 2 പുറത്തിറങ്ങിയതോടെ, ദൈനംദിന ലേഔട്ടിന്റെയും സ്റ്റൈലിംഗിന്റെയും ബഹുഭൂരിപക്ഷം ജോലികളും ഇപ്പോൾ പൂർണ്ണമായും ലോജിക്കൽ സമീപനം ഉപയോഗിച്ച് നിർവഹിക്കാൻ കഴിയും.

ഡെവലപ്പർമാർക്കുള്ള ആഹ്വാനം വ്യക്തമാണ്: ലോജിക്കൽ പ്രോപ്പർട്ടികൾ സ്ഥിരമായി ഉപയോഗിക്കാൻ തുടങ്ങുക. width-ന് പകരം inline-size നിങ്ങളുടെ സ്ഥിരം തിരഞ്ഞെടുപ്പാക്കുക. ഇടതും വലതും മാർജിനുകൾ വെവ്വേറെ സജ്ജീകരിക്കുന്നതിന് പകരം margin-inline ഉപയോഗിക്കുക. ഇത് വ്യത്യസ്ത ഭാഷകളെ പിന്തുണയ്ക്കുന്നതിനെക്കുറിച്ച് മാത്രമല്ല; ഇത് മികച്ചതും കൂടുതൽ പ്രതിരോധശേഷിയുള്ളതുമായ സിഎസ്എസ് എഴുതുന്നതിനെക്കുറിച്ചാണ്. ലോജിക്കൽ പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് നിർമ്മിച്ച ഒരു കോമ്പോണൻ്റ്, അത് LTR, RTL, അല്ലെങ്കിൽ ലംബമായ ലേഔട്ടിൽ ഉപയോഗിച്ചാലും, സഹജമായി കൂടുതൽ പുനരുപയോഗിക്കാവുന്നതും പൊരുത്തപ്പെടാൻ കഴിവുള്ളതുമാണ്. ഇത് ലളിതമായി പറഞ്ഞാൽ മികച്ച എഞ്ചിനീയറിംഗ് ആണ്.

ഉപസംഹാരം: ഒഴുക്കിനെ സ്വീകരിക്കുക

സിഎസ്എസ് ലോജിക്കൽ പ്രോപ്പർട്ടീസ് ലെവൽ 2 എന്നത് പുതിയ ഫീച്ചറുകളുടെ ഒരു ശേഖരം മാത്രമല്ല; അതൊരു കാഴ്ചപ്പാടിന്റെ പൂർത്തീകരണമാണ്. ഉള്ളടക്കത്തിന്റെ സ്വാഭാവിക ഒഴുക്കിനെ മാനിക്കുന്ന ലേഔട്ടുകൾ നിർമ്മിക്കുന്നതിന് ആവശ്യമായ അന്തിമവും നിർണായകവുമായ ഭാഗങ്ങൾ ഇത് നൽകുന്നു, ആ ഒഴുക്ക് എന്തുതന്നെയായാലും. float: inline-start, border-start-start-radius പോലുള്ള പ്രോപ്പർട്ടികൾ സ്വീകരിക്കുന്നതിലൂടെ, നമ്മൾ നമ്മുടെ വൈദഗ്ധ്യത്തെ സ്ക്രീനിൽ ബോക്സുകൾ സ്ഥാപിക്കുന്നതിൽ നിന്ന് യഥാർത്ഥത്തിൽ ആഗോളവും എല്ലാവരെയും ഉൾക്കൊള്ളുന്നതും ഭാവിയിൽ സുരക്ഷിതവുമായ വെബ് അനുഭവങ്ങൾ രൂപകൽപ്പന ചെയ്യുന്നതിലേക്ക് ഉയർത്തുന്നു.

അടുത്ത തവണ നിങ്ങൾ ഒരു പുതിയ പ്രോജക്റ്റ് ആരംഭിക്കുകയോ ഒരു പുതിയ കോമ്പോണൻ്റ് നിർമ്മിക്കുകയോ ചെയ്യുമ്പോൾ, margin-left എന്ന് ടൈപ്പ് ചെയ്യുന്നതിന് മുൻപ് ഒന്ന് നിർത്തുക. നിങ്ങളോടുതന്നെ ചോദിക്കുക, "ഞാൻ ഉദ്ദേശിച്ചത് ഇടത് എന്നാണോ, അതോ ആരംഭം എന്നാണോ?" ആ ചെറിയ മാനസിക മാറ്റം വരുത്തുന്നതിലൂടെ, നിങ്ങൾ എല്ലായിടത്തുമുള്ള എല്ലാവർക്കുമായി കൂടുതൽ പൊരുത്തപ്പെടാൻ കഴിവുള്ളതും പ്രാപ്യവുമായ ഒരു വെബിനായി സംഭാവന ചെയ്യുകയായിരിക്കും.