സിഎസ്എസ് ലോജിക്കൽ ബോർഡർ റേഡിയസ്: ഗ്ലോബൽ ഡിസൈനിനായി റൈറ്റിംഗ് മോഡുകളുമായി പൊരുത്തപ്പെടൽ

വെബ് ഡിസൈനിന്റെ വികസിച്ചുകൊണ്ടിരിക്കുന്ന ഈ ലോകത്ത്, വിവിധ ഭാഷകൾക്കും സംസ്കാരങ്ങൾക്കും എഴുത്ത് രീതികൾക്കും (writing modes) അനുസരിച്ച് പരിധികളില്ലാതെ പൊരുത്തപ്പെടുന്ന ലേഔട്ടുകൾ സൃഷ്ടിക്കേണ്ടത് അത്യാവശ്യമാണ്. പരമ്പരാഗത സിഎസ്എസ് പ്രോപ്പർട്ടികൾ പലപ്പോഴും ഭൗതിക അളവുകളെയാണ് (top, right, bottom, left) ആശ്രയിക്കുന്നത്, ഇത് വലത്തുനിന്ന് ഇടത്തോട്ടുള്ള (RTL) അല്ലെങ്കിൽ മുകളിൽ നിന്ന് താഴോട്ടുള്ള ഭാഷകളുമായി പ്രവർത്തിക്കുമ്പോൾ പ്രശ്നങ്ങൾക്ക് കാരണമാകും.

സിഎസ്എസ് ലോജിക്കൽ പ്രോപ്പർട്ടികളും വാല്യൂകളും ഭൗതിക അരികുകൾക്ക് പകരം ഫ്ലോ, ഡയറക്ഷൻ എന്നിവയെ അടിസ്ഥാനമാക്കിയുള്ള ആശയങ്ങൾ അവതരിപ്പിച്ചുകൊണ്ട് ഒരു പരിഹാരം നൽകുന്നു. ഈ ശക്തമായ ടൂളുകളിൽ, border-radius കുടുംബത്തിന് അതിന്റെ ലോജിക്കൽ എതിരാളികളിലൂടെ പുതിയ വഴക്കം ലഭിക്കുന്നു. ഈ ലേഖനം സിഎസ്എസ് ലോജിക്കൽ ബോർഡർ റേഡിയസ് പ്രോപ്പർട്ടികളുടെ ലോകത്തേക്ക് ആഴ്ന്നിറങ്ങുന്നു, അവയുടെ പ്രവർത്തനം വിശദീകരിക്കുകയും യഥാർത്ഥ ആഗോള വെബ് അനുഭവങ്ങൾ നിർമ്മിക്കുന്നതിൽ അവയുടെ മൂല്യം പ്രകടിപ്പിക്കുകയും ചെയ്യുന്നു.

ലോജിക്കൽ പ്രോപ്പർട്ടികളുടെ ആവശ്യകത മനസ്സിലാക്കാം

ചരിത്രപരമായി, സിഎസ്എസ് പ്രോപ്പർട്ടികൾ ഭൗതിക അളവുകളുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു. ഉദാഹരണത്തിന്, margin-left എല്ലായ്പ്പോഴും ഒരു എലമെന്റിന്റെ ഇടതുവശത്ത് സ്ഥലം ചേർക്കുന്നു. ഇംഗ്ലീഷ് പോലുള്ള ഇടത്തുനിന്ന് വലത്തോട്ടുള്ള (LTR) ഭാഷകൾക്ക് ഇത് നന്നായി പ്രവർത്തിക്കുന്നു, എന്നാൽ അറബിക് അല്ലെങ്കിൽ ഹീബ്രു പോലുള്ള RTL ഭാഷകളിൽ ഇത് അത്ര എളുപ്പമല്ല, അവിടെ 'ഇടത്' വശം യഥാർത്ഥത്തിൽ കാഴ്ചയിൽ വലതുവശത്താണ്.

LTR ഭാഷകളിൽ ഇടതുവശത്ത് ഒരു സൈഡ്‌ബാർ ഉള്ള ഒരു വെബ്സൈറ്റ് സങ്കൽപ്പിക്കുക. margin-left, float: left എന്നിവ ഉപയോഗിക്കുന്നത് തികച്ചും പ്രവർത്തിക്കുന്നു. എന്നിരുന്നാലും, വെബ്സൈറ്റ് അറബിയിലേക്ക് വിവർത്തനം ചെയ്യുമ്പോൾ, സൈഡ്‌ബാർ വലതുവശത്ത് ദൃശ്യമാകണം. margin-left-നെ margin-right ആയും float: right ആയും സ്വമേധയാ മാറ്റുന്നത് സങ്കീർണ്ണതയും പരിപാലന ഭാരവും വർദ്ധിപ്പിക്കുന്നു.

ലോജിക്കൽ പ്രോപ്പർട്ടികൾ 'start', 'end' പോലുള്ള ആശയങ്ങൾ ഉപയോഗിച്ച് ഇത് പരിഹരിക്കുന്നു, അത് റൈറ്റിംഗ് മോഡിന് അനുസരിച്ച് സ്വയമേവ ക്രമീകരിക്കുന്നു. ഇത് വിവിധ ഭാഷകളിലും എഴുത്ത് സംവിധാനങ്ങളിലും ശരിയായി പ്രവർത്തിക്കുന്ന ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നത് വളരെ ലളിതമാക്കുന്നു.

സിഎസ്എസ് ലോജിക്കൽ ബോർഡർ റേഡിയസ് പ്രോപ്പർട്ടികൾ പരിചയപ്പെടാം

പരമ്പരാഗത border-radius പ്രോപ്പർട്ടി ഒരു എലമെന്റിന്റെ കോണുകൾ ഉരുട്ടാൻ നിങ്ങളെ അനുവദിക്കുന്നു. എന്നിരുന്നാലും, ഇത് border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius പോലുള്ള ഭൗതിക ദിശകളെ ആശ്രയിക്കുന്നു. സിഎസ്എസ് ലോജിക്കൽ പ്രോപ്പർട്ടികളും വാല്യൂകളും സ്പെസിഫിക്കേഷൻ പുതിയതും റൈറ്റിംഗ് മോഡ്-അവയർ ആയതുമായ പ്രോപ്പർട്ടികൾ അവതരിപ്പിക്കുന്നു, അത് കൂടുതൽ വഴക്കവും പൊരുത്തപ്പെടുത്തലും നൽകുന്നു:

• border-start-start-radius: ഒരു എലമെന്റിന്റെ സ്റ്റാർട്ട്-സ്റ്റാർട്ട് കോണറിനായുള്ള ബോർഡർ റേഡിയസ് വ്യക്തമാക്കുന്നു.
• border-start-end-radius: ഒരു എലമെന്റിന്റെ സ്റ്റാർട്ട്-എൻഡ് കോണറിനായുള്ള ബോർഡർ റേഡിയസ് വ്യക്തമാക്കുന്നു.
• border-end-start-radius: ഒരു എലമെന്റിന്റെ എൻഡ്-സ്റ്റാർട്ട് കോണറിനായുള്ള ബോർഡർ റേഡിയസ് വ്യക്തമാക്കുന്നു.
• border-end-end-radius: ഒരു എലമെന്റിന്റെ എൻഡ്-എൻഡ് കോണറിനായുള്ള ബോർഡർ റേഡിയസ് വ്യക്തമാക്കുന്നു.

ഇവിടെ, 'start', 'end' എന്നിവ ഉള്ളടക്കത്തിന്റെ റൈറ്റിംഗ് മോഡും ദിശാബോധവും അനുസരിച്ചാണ്. ഒരു LTR ഭാഷയിൽ, 'start' ഇടത് വശത്തെയും 'end' വലത് വശത്തെയും സൂചിപ്പിക്കുന്നു. ഒരു RTL ഭാഷയിൽ, 'start' വലത് വശത്തെയും 'end' ഇടത് വശത്തെയും സൂചിപ്പിക്കുന്നു. അതുപോലെ, വെർട്ടിക്കൽ റൈറ്റിംഗ് മോഡുകൾക്കായി, 'start' മുകൾ ഭാഗത്തെയും 'end' താഴ് ഭാഗത്തെയും സൂചിപ്പിക്കുന്നു.

പ്രായോഗിക ഉദാഹരണങ്ങളും ഉപയോഗങ്ങളും

റെസ്‌പോൺസീവും റൈറ്റിംഗ് മോഡ്-അവയർ ഡിസൈനുകളും സൃഷ്ടിക്കാൻ ഈ ലോജിക്കൽ ബോർഡർ റേഡിയസ് പ്രോപ്പർട്ടികൾ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് വ്യക്തമാക്കുന്ന ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ നമുക്ക് പരിശോധിക്കാം.

ഉദാഹരണം 1: റൈറ്റിംഗ് മോഡിന് അനുസരിച്ച് മാറുന്ന റൗണ്ടഡ് ബട്ടണുകൾ

ഉരുണ്ട കോണുകളുള്ള ഒരു ബട്ടൺ പരിഗണിക്കുക. റൈറ്റിംഗ് മോഡ് പരിഗണിക്കാതെ, മുൻവശത്തും പിൻവശത്തുമുള്ള അരികുകളിൽ റൗണ്ടിംഗ് ദൃശ്യമാകാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു.

HTML:

<button class="button">Click Me</button>

CSS:

.button {
  border-start-start-radius: 10px;
  border-start-end-radius: 10px;
  border-end-start-radius: 10px;
  border-end-end-radius: 10px;
  /* അല്ലെങ്കിൽ, ഷോർട്ട്ഹാൻഡ് ഉപയോഗിച്ച്: */
  border-radius: 10px;
}

[dir="rtl"] .button {
 /* മാറ്റങ്ങളൊന്നും ആവശ്യമില്ല! ബ്രൗസർ റൈറ്റിംഗ് മോഡ് അഡാപ്റ്റേഷൻ കൈകാര്യം ചെയ്യും */
}

ഈ ഉദാഹരണത്തിൽ, പേജ് LTR ആയാലും RTL ആയാലും, മുകളിൽ-ഇടതും മുകളിൽ-വലതും (LTR-ൽ) അല്ലെങ്കിൽ മുകളിൽ-വലതും മുകളിൽ-ഇടതും (RTL-ൽ) കോണുകൾ ഉരുണ്ടതായിരിക്കും. വ്യത്യസ്ത റൈറ്റിംഗ് മോഡുകൾക്കായി പ്രത്യേക സിഎസ്എസ് നിയമങ്ങൾ എഴുതേണ്ട ആവശ്യമില്ല. ബ്രൗസർ dir ആട്രിബ്യൂട്ടിനെ അടിസ്ഥാനമാക്കി സ്റ്റൈലുകൾ ബുദ്ധിപരമായി പ്രയോഗിക്കുന്നു.

ഉദാഹരണം 2: ഡൈനാമിക് ടെയിൽ പ്ലേസ്‌മെന്റോടുകൂടിയ ചാറ്റ് ബബിളുകൾ

ചാറ്റ് ബബിളുകൾ ഒരു സാധാരണ യുഐ ഘടകമാണ്. സാധാരണയായി, ബബിളിന്റെ വാൽ അയച്ചയാളുടെ നേരെയായിരിക്കും. ലോജിക്കൽ പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച്, സന്ദേശം ഉപയോക്താവിൽ നിന്നാണോ അതോ മറ്റേതെങ്കിലും കോൺടാക്റ്റിൽ നിന്നാണോ എന്നതിനെ അടിസ്ഥാനമാക്കി ബബിളിന്റെ രൂപം എളുപ്പത്തിൽ ക്രമീകരിക്കാനും റൈറ്റിംഗ് മോഡ് കണക്കിലെടുക്കാനും കഴിയും.

HTML:

<div class="chat-bubble user">Hello!</div>
<div class="chat-bubble other">Hi there!</div>

CSS:

.chat-bubble {
  background-color: #eee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}

.chat-bubble.user {
  border-start-start-radius: 0; /* മുകളിൽ-ഇടത് (LTR) അല്ലെങ്കിൽ മുകളിൽ-വലത് (RTL) കോണിലെ റേഡിയസ് ഒഴിവാക്കുക */
}

.chat-bubble.other {
  border-start-end-radius: 0; /* മുകളിൽ-വലത് (LTR) അല്ലെങ്കിൽ മുകളിൽ-ഇടത് (RTL) കോണിലെ റേഡിയസ് ഒഴിവാക്കുക */
}

/* RTL ഭാഷകൾക്കായി, ബ്രൗസർ സ്വയമേവ സ്റ്റാർട്ട്/എൻഡ് മിറർ ചെയ്യുന്നു */
/* അധിക സിഎസ്എസ് ആവശ്യമില്ല */

ഈ സാഹചര്യത്തിൽ, .user ക്ലാസ് 'start-start' കോണിലെ ബോർഡർ റേഡിയസ് നീക്കംചെയ്യുന്നു, ഇത് ഫലപ്രദമായി വാൽ സൃഷ്ടിക്കുന്നു. LTR ഭാഷകൾക്ക്, ഇത് മുകളിൽ-ഇടത് കോണാണ്. RTL ഭാഷകൾക്ക്, ബ്രൗസർ സ്വയമേവ 'start-start'-നെ മുകളിൽ-വലത് കോണായി വ്യാഖ്യാനിക്കുന്നു, ഇത് പ്രത്യേക RTL-നിർദ്ദിഷ്ട സ്റ്റൈലുകൾ ആവശ്യമില്ലാതെ വാൽ എല്ലായ്പ്പോഴും ശരിയായി സ്ഥാപിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുന്നു.

ഉദാഹരണം 3: കോർണർ ഹൈലൈറ്റിംഗോടുകൂടിയ കാർഡുകൾ

ഒരു ഫീച്ചർ ചെയ്ത ഇനം സൂചിപ്പിക്കുന്നതിന് ഒരു കാർഡിന്റെ ഒരു പ്രത്യേക കോർണർ ഹൈലൈറ്റ് ചെയ്യാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നുവെന്ന് കരുതുക. ലോജിക്കൽ പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുന്നത് ഇത് അവിശ്വസനീയമാംവിധം വഴക്കമുള്ളതാക്കുന്നു.

HTML:

<div class="card featured">
  <h2>Product Title</h2>
  <p>Product description.</p>
</div>

CSS:

.card {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
}

.card.featured {
  border-end-end-radius: 0; /* താഴെ-വലത് (LTR) അല്ലെങ്കിൽ താഴെ-ഇടത് (RTL) കോണിലെ റേഡിയസ് ഒഴിവാക്കുക */
  border-top: 3px solid red;
  border-start-start-radius:0; /*മുകളിൽ ഇടത് റേഡിയസ് നീക്കം ചെയ്യുക*/
}

.featured ക്ലാസ് 'end-end' കോണിൽ നിന്ന് റേഡിയസ് നീക്കംചെയ്യുന്നു, ഇത് LTR-ൽ താഴെ-വലത്തും RTL-ൽ താഴെ-ഇടത്തും ആയിരിക്കും. ഈ പ്രഭാവം ബ്രൗസർ സ്വയമേവ RTL ഭാഷകൾക്കായി പ്രതിഫലിപ്പിക്കും.

ലോജിക്കൽ ബോർഡർ റേഡിയസ് പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുന്നതിന്റെ പ്രയോജനങ്ങൾ

• ലളിതമായ അന്താരാഷ്ട്രവൽക്കരണം: കുറഞ്ഞ സിഎസ്എസ് എഴുതുക, വ്യത്യസ്ത റൈറ്റിംഗ് മോഡുകൾക്കായി പ്രത്യേക സ്റ്റൈൽഷീറ്റുകൾ കൈകാര്യം ചെയ്യുന്നതിന്റെ സങ്കീർണ്ണത ഒഴിവാക്കുക.
• മെച്ചപ്പെട്ട റെസ്‌പോൺസീവ്നസ്: വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളോടും ഓറിയന്റേഷനുകളോടും കൂടുതൽ സുഗമമായി പൊരുത്തപ്പെടുന്ന ലേഔട്ടുകൾ സൃഷ്ടിക്കുക.
• വർദ്ധിച്ച പരിപാലനക്ഷമത: ലോജിക്കൽ പ്രോപ്പർട്ടികൾ കൂടുതൽ വൃത്തിയുള്ളതും സംക്ഷിപ്തവുമായ കോഡിലേക്ക് നയിക്കുന്നു, അത് മനസ്സിലാക്കാനും പരിപാലിക്കാനും എളുപ്പമാണ്.
• മെച്ചപ്പെട്ട പ്രവേശനക്ഷമത: ലേഔട്ടും ദിശാബോധവും ശരിയായി കൈകാര്യം ചെയ്യുന്നതിലൂടെ, എല്ലാ ഭാഷകളിലെയും സംസ്കാരങ്ങളിലെയും ഉപയോക്താക്കൾക്കായി നിങ്ങൾ കൂടുതൽ ഉൾക്കൊള്ളുന്ന ഒരു അനുഭവം സൃഷ്ടിക്കുന്നു.
• ഭാവിയിലേക്കുള്ള തയ്യാറെടുപ്പ്: സിഎസ്എസ് വികസിക്കുന്നത് തുടരുമ്പോൾ, ലോജിക്കൽ പ്രോപ്പർട്ടികൾ സ്വീകരിക്കുന്നത് നിങ്ങളുടെ കോഡ് പ്രസക്തവും പൊരുത്തപ്പെടുത്താവുന്നതുമായി തുടരുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

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

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

ഒരു പ്രൊഡക്ഷൻ എൻവയോൺമെന്റിൽ ഈ പ്രോപ്പർട്ടികൾ നടപ്പിലാക്കുന്നതിന് മുമ്പ് Can I use പോലുള്ള ഉറവിടങ്ങളിൽ നിലവിലെ ബ്രൗസർ പിന്തുണ പരിശോധിക്കുന്നത് എല്ലായ്പ്പോഴും ഒരു നല്ല ശീലമാണ്.

മികച്ച രീതികളും പരിഗണനകളും

• ലോജിക്കൽ പ്രോപ്പർട്ടികൾ സ്ഥിരമായി ഉപയോഗിക്കുക: നിങ്ങൾ ലോജിക്കൽ പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കാൻ തുടങ്ങിയാൽ, സ്ഥിരതയ്ക്കായി നിങ്ങളുടെ പ്രോജക്റ്റിലുടനീളം അവ പ്രയോഗിക്കാൻ ശ്രമിക്കുക. ലോജിക്കൽ, ഫിസിക്കൽ പ്രോപ്പർട്ടികൾ കലർത്തുന്നത് ആശയക്കുഴപ്പത്തിനും അപ്രതീക്ഷിത ഫലങ്ങൾക്കും ഇടയാക്കും.
• സമഗ്രമായി പരിശോധിക്കുക: ലേഔട്ട് ശരിയായി പൊരുത്തപ്പെടുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ നിങ്ങളുടെ വെബ്സൈറ്റ് വ്യത്യസ്ത റൈറ്റിംഗ് മോഡുകളിൽ (LTR, RTL, സാധ്യതയുള്ള വെർട്ടിക്കൽ) പരിശോധിക്കുക.
• direction ആട്രിബ്യൂട്ട് പരിഗണിക്കുക: direction ആട്രിബ്യൂട്ട് (dir="ltr" അല്ലെങ്കിൽ dir="rtl") നിങ്ങളുടെ ഉള്ളടക്കത്തിന്റെ റൈറ്റിംഗ് മോഡ് സൂചിപ്പിക്കുന്നതിന് അത്യാവശ്യമാണ്. ഇത് <html> എലമെന്റിലോ നിങ്ങളുടെ പേജിന്റെ നിർദ്ദിഷ്ട വിഭാഗങ്ങളിലോ ശരിയായി സജ്ജീകരിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.
• മറ്റ് ലോജിക്കൽ പ്രോപ്പർട്ടികളോടൊപ്പം ഉപയോഗിക്കുക: യഥാർത്ഥ റൈറ്റിംഗ് മോഡ്-അവയർ ലേഔട്ടുകൾക്കായി ലോജിക്കൽ ബോർഡർ റേഡിയസ് പ്രോപ്പർട്ടികൾ margin-inline-start, padding-block-end, inset-inline-start പോലുള്ള മറ്റ് ലോജിക്കൽ പ്രോപ്പർട്ടികളുമായി സംയോജിപ്പിക്കുക.
• പ്രവേശനക്ഷമതാ പരിശോധന: സ്ക്രീൻ റീഡറുകളും മറ്റ് സഹായ സാങ്കേതികവിദ്യകളും ഉപയോഗിച്ച് നിങ്ങളുടെ ലേഔട്ടുകൾ ആക്സസ് ചെയ്യാവുന്നതാണെന്ന് ഉറപ്പാക്കുക. ഈ ഉപകരണങ്ങളെ ആശ്രയിക്കുന്ന ഉപയോക്താക്കൾക്ക് ശരിയായ ദിശാബോധം നിർണായകമാണ്.

വിപുലമായ സാങ്കേതികതകളും ഷോർട്ട്ഹാൻഡും

സ്റ്റാൻഡേർഡ് `border-radius` പ്രോപ്പർട്ടി പോലെ, ഒരേസമയം ഒന്നിലധികം ലോജിക്കൽ ബോർഡർ റേഡിയുകൾ സജ്ജീകരിക്കാൻ നിങ്ങൾക്ക് ഷോർട്ട്ഹാൻഡ് ഉപയോഗിക്കാം:

border-radius: border-start-start-radius border-start-end-radius border-end-end-radius border-end-start-radius;

സ്റ്റാൻഡേർഡ് `border-radius` പ്രോപ്പർട്ടിയിൽ ചെയ്യുന്നതുപോലെ നിങ്ങൾക്ക് ഒന്നോ രണ്ടോ മൂന്നോ നാലോ മൂല്യങ്ങൾ ഉപയോഗിക്കാം. ഈ മൂല്യങ്ങളുടെ വ്യാഖ്യാനം അതേ നിയമങ്ങൾ പിന്തുടരുന്നു:

• ഒരു മൂല്യം: നാല് കോണുകൾക്കും ഒരേ റേഡിയസ് ഉണ്ട്.
• രണ്ട് മൂല്യങ്ങൾ: ആദ്യത്തെ മൂല്യം സ്റ്റാർട്ട്-സ്റ്റാർട്ട്, എൻഡ്-എൻഡ് കോണുകൾക്കും, രണ്ടാമത്തെ മൂല്യം സ്റ്റാർട്ട്-എൻഡ്, എൻഡ്-സ്റ്റാർട്ട് കോണുകൾക്കും ബാധകമാണ്.
• മൂന്ന് മൂല്യങ്ങൾ: ആദ്യത്തെ മൂല്യം സ്റ്റാർട്ട്-സ്റ്റാർട്ട് കോണറിനും, രണ്ടാമത്തെ മൂല്യം സ്റ്റാർട്ട്-എൻഡ്, എൻഡ്-സ്റ്റാർട്ട് കോണുകൾക്കും, മൂന്നാമത്തെ മൂല്യം എൻഡ്-എൻഡ് കോണറിനും ബാധകമാണ്.
• നാല് മൂല്യങ്ങൾ: ഓരോ മൂല്യവും ഒരു പ്രത്യേക കോണറിന് ബാധകമാണ്: സ്റ്റാർട്ട്-സ്റ്റാർട്ട്, സ്റ്റാർട്ട്-എൻഡ്, എൻഡ്-എൻഡ്, എൻഡ്-സ്റ്റാർട്ട്.

ഉദാഹരണത്തിന്:

border-radius: 10px; /* എല്ലാ കോണുകൾക്കും 10px റേഡിയസ് ഉണ്ട് */
border-radius: 10px 20px; /* സ്റ്റാർട്ട്-സ്റ്റാർട്ട്, എൻഡ്-എൻഡ്: 10px, സ്റ്റാർട്ട്-എൻഡ്, എൻഡ്-സ്റ്റാർട്ട്: 20px */
border-radius: 10px 20px 30px; /* സ്റ്റാർട്ട്-സ്റ്റാർട്ട്: 10px, സ്റ്റാർട്ട്-എൻഡ്, എൻഡ്-സ്റ്റാർട്ട്: 20px, എൻഡ്-എൻഡ്: 30px */
border-radius: 10px 20px 30px 40px; /* സ്റ്റാർട്ട്-സ്റ്റാർട്ട്: 10px, സ്റ്റാർട്ട്-എൻഡ്: 20px, എൻഡ്-എൻഡ്: 30px, എൻഡ്-സ്റ്റാർട്ട്: 40px */

ഉപസംഹാരം: ഒരു ആഗോള വെബിനായി ലോജിക്കൽ പ്രോപ്പർട്ടികൾ സ്വീകരിക്കുക

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

വെബ് കൂടുതൽ ആഗോളമാകുമ്പോൾ, എല്ലാ ഉപയോക്താക്കൾക്കും ഉൾക്കൊള്ളലും പ്രവേശനക്ഷമതയും ഉറപ്പാക്കുന്ന മികച്ച രീതികൾ സ്വീകരിക്കേണ്ടത് നിർണായകമാണ്. ലോജിക്കൽ പ്രോപ്പർട്ടികൾ സ്വീകരിക്കുക, സമഗ്രമായി പരിശോധിക്കുക, വിവിധ ഭാഷകളിലും എഴുത്ത് സംവിധാനങ്ങളിലും പരിധികളില്ലാതെ പ്രവർത്തിക്കുന്ന വെബ്സൈറ്റുകൾ സൃഷ്ടിക്കുക.

ഭൗതിക അളവുകളിൽ നിന്ന് മാറി ലോജിക്കൽ ആശയങ്ങൾ സ്വീകരിക്കുന്നതിലൂടെ, വൈവിധ്യമാർന്ന ആഗോള പ്രേക്ഷകർക്ക് അനുയോജ്യമായ, കൂടുതൽ പരിപാലിക്കാൻ കഴിയുന്നതും റെസ്‌പോൺസീവും ഉപയോക്തൃ-സൗഹൃദവുമായ വെബ്സൈറ്റുകൾ നിങ്ങൾ സൃഷ്ടിക്കും.

കൂടുതൽ വിഭവങ്ങൾ

• എംഡിഎൻ വെബ് ഡോക്സ്: സിഎസ്എസ് ലോജിക്കൽ പ്രോപ്പർട്ടികളും വാല്യൂകളും
• ഡബ്ല്യു3സി സിഎസ്എസ് ലോജിക്കൽ പ്രോപ്പർട്ടികളും വാല്യൂകളും ലെവൽ 1
• Can I use (ബ്രൗസർ പിന്തുണ പരിശോധിക്കുന്നതിന്)