பதிலளிக்கக்கூடிய மற்றும் எழுதும் முறைக்கு ஏற்ற வடிவமைப்புகளை உருவாக்க CSS லாஜிக்கல் பார்டர் ரேடியஸ் பண்புகளை ஆராயுங்கள். சர்வதேச வலைத்தளங்களுக்கான நடைமுறை எடுத்துக்காட்டுகளுடன் அவற்றை எவ்வாறு செயல்படுத்துவது என்பதை அறிக.
CSS லாஜிக்கல் பார்டர் ரேடியஸ்: உலகளாவிய வடிவமைப்பிற்காக எழுதும் முறைகளுக்கு ஏற்ப மாற்றுதல்
வலை வடிவமைப்பின் வளர்ந்து வரும் சூழலில், வெவ்வேறு மொழிகள், கலாச்சாரங்கள் மற்றும் எழுதும் முறைகளுக்கு ஏற்ப தடையின்றி மாற்றியமைக்கும் தளவமைப்புகளை உருவாக்குவது மிகவும் முக்கியமானது. பாரம்பரிய CSS பண்புகள் பெரும்பாலும் இயற்பியல் பரிமாணங்களை (top, right, bottom, left) சார்ந்துள்ளன, இது வலமிருந்து இடமாக (RTL) அல்லது மேலிருந்து கீழாகப் படிக்கும் மொழிகளைக் கையாளும் போது சிக்கலாக மாறும்.
CSS லாஜிக்கல் பண்புகள் மற்றும் மதிப்புகள் இயற்பியல் விளிம்புகளுக்குப் பதிலாக ஓட்டம் மற்றும் திசையின் அடிப்படையில் கருத்துக்களை அறிமுகப்படுத்துவதன் மூலம் ஒரு தீர்வை வழங்குகின்றன. இந்த சக்திவாய்ந்த கருவிகளில், border-radius குடும்பம் அதன் லாஜிக்கல் இணைகளுடன் புதிய நெகிழ்வுத்தன்மையைப் பெறுகிறது. இந்தக் கட்டுரை CSS லாஜிக்கல் பார்டர் ரேடியஸ் பண்புகளின் உலகத்தை ஆராய்ந்து, அவற்றின் செயல்பாட்டை விளக்கி, உண்மையான உலகளாவிய வலை அனுபவங்களை உருவாக்குவதில் அவற்றின் மதிப்பை நிரூபிக்கிறது.
லாஜிக்கல் பண்புகளின் தேவையைப் புரிந்துகொள்ளுதல்
வரலாற்று ரீதியாக, CSS பண்புகள் இயற்பியல் பரிமாணங்களுடன் பிணைக்கப்பட்டுள்ளன. எடுத்துக்காட்டாக, margin-left எப்போதும் ஒரு உறுப்பின் இடது பக்கத்தில் இடத்தை சேர்க்கிறது. இது ஆங்கிலம் போன்ற இடமிருந்து வலமாக (LTR) எழுதும் மொழிகளுக்கு நன்றாக வேலை செய்கிறது, ஆனால் அரபு அல்லது ஹீப்ரு போன்ற RTL மொழிகளில் இது அவ்வளவு உள்ளுணர்வாக இருப்பதில்லை, அங்கு “இடது” பக்கம் உண்மையில் காட்சிக்கு வலது பக்கமாக உள்ளது.
LTR மொழிகளில் இடதுபுறத்தில் ஒரு பக்கப்பட்டி நிலைநிறுத்தப்பட்ட ஒரு வலைத்தளத்தை கற்பனை செய்து பாருங்கள். margin-left மற்றும் float: left ஐப் பயன்படுத்துவது சரியாக வேலை செய்கிறது. இருப்பினும், வலைத்தளம் அரபு மொழிக்கு மொழிபெயர்க்கப்படும்போது, பக்கப்பட்டி வலதுபுறத்தில் தோன்ற வேண்டும். கைமுறையாக margin-left ஐ margin-right ஆகவும் float: right ஆகவும் மாற்றுவது சிக்கலையும் பராமரிப்புச் சுமையையும் அதிகரிக்கிறது.
லாஜிக்கல் பண்புகள் 'start' மற்றும் 'end' போன்ற கருத்துக்களைப் பயன்படுத்துவதன் மூலம் இதை நிவர்த்தி செய்கின்றன, அவை எழுதும் முறையின் அடிப்படையில் தானாகவே மாற்றியமைக்கப்படுகின்றன. இது வெவ்வேறு மொழிகள் மற்றும் எழுதும் முறைகளில் சரியாக வேலை செய்யும் தளவமைப்புகளை உருவாக்குவதை வியக்கத்தக்க வகையில் எளிதாக்குகிறது.
CSS லாஜிக்கல் பார்டர் ரேடியஸ் பண்புகளை அறிமுகப்படுத்துதல்
பாரம்பரிய border-radius பண்பு ஒரு உறுப்பின் மூலைகளை வட்டமாக்க உங்களை அனுமதிக்கிறது. இருப்பினும், இது border-top-left-radius, border-top-right-radius, border-bottom-right-radius, மற்றும் border-bottom-left-radius போன்ற இயற்பியல் திசைகளை நம்பியுள்ளது. CSS லாஜிக்கல் பண்புகள் மற்றும் மதிப்புகள் விவரக்குறிப்பு புதிய, எழுதும் முறைக்கு ஏற்ற பண்புகளை அறிமுகப்படுத்துகிறது, இது அதிக நெகிழ்வுத்தன்மையையும் மாற்றியமைக்கும் தன்மையையும் வழங்குகிறது:
border-start-start-radius: ஒரு உறுப்பின் start-start மூலைக்கான பார்டர் ரேடியஸைக் குறிப்பிடுகிறது.border-start-end-radius: ஒரு உறுப்பின் start-end மூலைக்கான பார்டர் ரேடியஸைக் குறிப்பிடுகிறது.border-end-start-radius: ஒரு உறுப்பின் end-start மூலைக்கான பார்டர் ரேடியஸைக் குறிப்பிடுகிறது.border-end-end-radius: ஒரு உறுப்பின் end-end மூலைக்கான பார்டர் ரேடியஸைக் குறிப்பிடுகிறது.
இங்கே, '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 இல்) மூலைகள் வட்டமாக இருக்கும். வெவ்வேறு எழுதும் முறைகளுக்கு தனி CSS விதிகளை எழுத வேண்டிய அவசியமில்லை. உலாவி dir பண்புக்கூறின் அடிப்படையில் ஸ்டைல்களை புத்திசாலித்தனமாகப் பயன்படுத்துகிறது.
எடுத்துக்காட்டு 2: டைனமிக் வால் இடத்துடன் கூடிய அரட்டைக் குமிழ்கள்
அரட்டைக் குமிழ்கள் ஒரு பொதுவான UI உறுப்பு. பொதுவாக, குமிழின் வால் அனுப்புநரை நோக்கிச் சுட்டிக்காட்டுகிறது. லாஜிக்கல் பண்புகளைப் பயன்படுத்தி, செய்தி பயனரிடமிருந்தோ அல்லது மற்றொரு தொடர்பிலிருந்தோ வந்ததா என்பதைப் பொறுத்து குமிழின் தோற்றத்தை எளிதாக மாற்றியமைக்கலாம், மேலும் எழுதும் முறையையும் கணக்கில் எடுத்துக்கொள்ளலாம்.
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 மொழிகளுக்கு, உலாவி தானாகவே start/end ஐ பிரதிபலிக்கிறது */
/* கூடுதல் CSS தேவையில்லை */
இந்தச் சூழ்நிலையில், .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 மொழிகளுக்கு உலாவியால் தானாகவே பிரதிபலிக்கப்படும்.
லாஜிக்கல் பார்டர் ரேடியஸ் பண்புகளைப் பயன்படுத்துவதன் நன்மைகள்
- எளிதாக்கப்பட்ட சர்வதேசமயமாக்கல்: குறைவான CSS ஐ எழுதுங்கள் மற்றும் வெவ்வேறு எழுதும் முறைகளுக்கு தனி ஸ்டைல்ஷீட்களை நிர்வகிக்கும் சிக்கலைத் தவிர்க்கவும்.
- மேம்படுத்தப்பட்ட பதிலளிப்பு: வெவ்வேறு திரை அளவுகள் மற்றும் நோக்குநிலைகளுக்கு மிகவும் தடையின்றி மாற்றியமைக்கும் தளவமைப்புகளை உருவாக்கவும்.
- அதிகரிக்கப்பட்ட பராமரிப்புத்திறன்: லாஜிக்கல் பண்புகள் சுத்தமான, சுருக்கமான குறியீட்டிற்கு வழிவகுக்கும், இது புரிந்துகொள்வதற்கும் பராமரிப்பதற்கும் எளிதானது.
- மேம்படுத்தப்பட்ட அணுகல்தன்மை: தளவமைப்பு மற்றும் திசையை சரியாகக் கையாள்வதன் மூலம், எல்லா மொழிகள் மற்றும் கலாச்சாரங்களின் பயனர்களுக்கு மிகவும் உள்ளடக்கிய அனுபவத்தை உருவாக்குகிறீர்கள்.
- எதிர்காலத்திற்கான ஆதாரம்: CSS தொடர்ந்து உருவாகும்போது, லாஜிக்கல் பண்புகளை ஏற்றுக்கொள்வது உங்கள் குறியீடு பொருத்தமானதாகவும் மாற்றியமைக்கக்கூடியதாகவும் இருப்பதை உறுதி செய்கிறது.
உலாவி ஆதரவு மற்றும் பாலிஃபில்கள்
பெரும்பாலான நவீன உலாவிகள் லாஜிக்கல் பார்டர் ரேடியஸ் பண்புகள் உட்பட CSS லாஜிக்கல் பண்புகள் மற்றும் மதிப்புகளுக்கு சிறந்த ஆதரவை வழங்குகின்றன. இருப்பினும், நேட்டிவ் ஆதரவு இல்லாத பழைய உலாவிகளுக்கு, இணக்கத்தன்மையை வழங்க பாலிஃபில்களைப் பயன்படுத்தலாம். ஆட்டோபிரெஃபிக்சர் பெரும்பாலும் உங்கள் குறியீடு பரந்த அளவிலான உலாவிகளில் வேலை செய்வதை உறுதிசெய்ய தேவையான மாற்றங்களைக் கையாள முடியும்.
ஒரு உற்பத்தி சூழலில் இந்தப் பண்புகளைச் செயல்படுத்துவதற்கு முன், 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` பண்புடன் நீங்கள் செய்வது போலவே, ஒன்று, இரண்டு, மூன்று அல்லது நான்கு மதிப்புகளையும் பயன்படுத்தலாம். இந்த மதிப்புகளின் விளக்கம் அதே விதிகளைப் பின்பற்றுகிறது:
- ஒரு மதிப்பு: நான்கு மூலைகளும் ஒரே ரேடியஸைக் கொண்டுள்ளன.
- இரண்டு மதிப்புகள்: முதல் மதிப்பு start-start மற்றும் end-end மூலைகளுக்கும், இரண்டாவது மதிப்பு start-end மற்றும் end-start மூலைகளுக்கும் பொருந்தும்.
- மூன்று மதிப்புகள்: முதல் மதிப்பு start-start மூலைக்கும், இரண்டாவது மதிப்பு start-end மற்றும் end-start மூலைகளுக்கும், மூன்றாவது மதிப்பு end-end மூலைக்கும் பொருந்தும்.
- நான்கு மதிப்புகள்: ஒவ்வொரு மதிப்பும் ஒரு குறிப்பிட்ட மூலைக்கு வரிசையில் பொருந்தும்: start-start, start-end, end-end, end-start.
எடுத்துக்காட்டாக:
border-radius: 10px; /* அனைத்து மூலைகளிலும் 10px ரேடியஸ் உள்ளது */
border-radius: 10px 20px; /* start-start மற்றும் end-end: 10px, start-end மற்றும் end-start: 20px */
border-radius: 10px 20px 30px; /* start-start: 10px, start-end மற்றும் end-start: 20px, end-end: 30px */
border-radius: 10px 20px 30px 40px; /* start-start: 10px, start-end: 20px, end-end: 30px, end-start: 40px */
முடிவு: உலகளாவிய வலைக்கு லாஜிக்கல் பண்புகளை ஏற்றுக்கொள்ளுங்கள்
லாஜிக்கல் பார்டர் ரேடியஸ் பண்புகள் உட்பட CSS லாஜிக்கல் பண்புகள் மற்றும் மதிப்புகள், உண்மையான உலகளாவிய மற்றும் அணுகக்கூடிய வலை அனுபவங்களை உருவாக்குவதற்கான அத்தியாவசிய கருவிகளாகும். இந்தப் பண்புகளைப் புரிந்துகொண்டு பயன்படுத்துவதன் மூலம், வெவ்வேறு மொழிகள், கலாச்சாரங்கள் மற்றும் எழுதும் முறைகளுக்கு உங்கள் வடிவமைப்புகளை மாற்றியமைக்கும் செயல்முறையை நீங்கள் கணிசமாக எளிதாக்கலாம்.
வலை பெருகிய முறையில் உலகளாவியதாக மாறுவதால், அனைத்து பயனர்களுக்கும் உள்ளடக்கம் மற்றும் அணுகல்தன்மையை உறுதிசெய்யும் சிறந்த நடைமுறைகளை ஏற்றுக்கொள்வது மிகவும் முக்கியமானது. லாஜிக்கல் பண்புகளை ஏற்றுக்கொள்ளுங்கள், முழுமையாகச் சோதிக்கவும், வெவ்வேறு மொழிகள் மற்றும் எழுதும் முறைகளில் தடையின்றி வேலை செய்யும் வலைத்தளங்களை உருவாக்கவும்.
இயற்பியல் பரிமாணங்களிலிருந்து விலகி, லாஜிக்கல் கருத்துக்களை ஏற்றுக்கொள்வதன் மூலம், நீங்கள் அதிக பராமரிக்கக்கூடிய, பதிலளிக்கக்கூடிய மற்றும் பயனர் நட்பு வலைத்தளங்களை உருவாக்குவீர்கள், இது ஒரு பன்முகப்படுத்தப்பட்ட உலகளாவிய பார்வையாளர்களுக்கு உதவுகிறது.