உலகளாவிய தளவமைப்புகளை உருவாக்குதல்: CSS லாஜிக்கல் பண்புகளில் ஒரு ஆழமான பார்வை

இன்றைய ஒன்றோடொன்று இணைக்கப்பட்ட உலகில், வலைத்தளங்கள் பல்வேறு உலகளாவிய பார்வையாளர்களை பூர்த்தி செய்ய வேண்டும். இதன் பொருள், இடமிருந்து வலம் (LTR) முதல் வலமிருந்து இடம் (RTL) மற்றும் செங்குத்து எழுத்து வரை பல்வேறு மொழிகள் மற்றும் எழுத்து முறைகளை ஆதரிப்பதாகும். பாரம்பரிய CSS பண்புகளான left, right, top, மற்றும் bottom போன்றவை இயல்பாகவே திசையைச் சார்ந்துள்ளன, இதனால் வெவ்வேறு எழுத்து முறைகளுக்கு தடையின்றி பொருந்தக்கூடிய தளவமைப்புகளை உருவாக்குவது சவாலாக உள்ளது. இங்குதான் CSS லாஜிக்கல் பண்புகள் உதவுகின்றன.

CSS லாஜிக்கல் பண்புகள் என்றால் என்ன?

CSS லாஜிக்கல் பண்புகள் என்பது இயற்பியல் திசைகளை விட உள்ளடக்கத்தின் ஓட்டத்தை (flow) அடிப்படையாகக் கொண்டு தளவமைப்பு திசைகளை வரையறுக்கும் CSS பண்புகளின் தொகுப்பாகும். அவை திரையின் இயற்பியல் நோக்குநிலையை ஒதுக்கி வைத்து, எழுத்து முறை அல்லது திசையைப் பொருட்படுத்தாமல் சீராகப் பொருந்தக்கூடிய தளவமைப்பு விதிகளை வரையறுக்க உங்களை அனுமதிக்கின்றன.

left மற்றும் right என்று சிந்திப்பதற்கு பதிலாக, நீங்கள் start மற்றும் end என்று சிந்திக்கிறீர்கள். top மற்றும் bottom என்பதற்கு பதிலாக, நீங்கள் block-start மற்றும் block-end என்று சிந்திக்கிறீர்கள். பின்னர் உலாவி இந்த லாஜிக்கல் திசைகளை ஒரு உறுப்பின் எழுத்து முறையின் அடிப்படையில் பொருத்தமான இயற்பியல் திசைகளுக்கு தானாகவே மேப் செய்கிறது.

முக்கிய கருத்துக்கள்: எழுதும் முறைகள் மற்றும் உரை திசை

குறிப்பிட்ட பண்புகளுக்குள் செல்வதற்கு முன், இரண்டு அடிப்படைக் கருத்துக்களைப் புரிந்துகொள்வது முக்கியம்:

எழுதும் முறைகள்

எழுதும் முறைகள், உரையின் வரிகள் எந்த திசையில் அமைக்கப்பட வேண்டும் என்பதை வரையறுக்கின்றன. இரண்டு மிகவும் பொதுவான எழுதும் முறைகள்:

• horizontal-tb: கிடைமட்டமாக மேலிருந்து கீழ் (ஆங்கிலம், ஸ்பானிஷ், பிரெஞ்சு போன்ற மொழிகளுக்கு நிலையானது)
• vertical-rl: செங்குத்தாக வலமிருந்து இடம் (ஜப்பானிய மற்றும் சீன போன்ற சில கிழக்கு ஆசிய மொழிகளில் பயன்படுத்தப்படுகிறது)

vertical-lr (செங்குத்தாக இடமிருந்து வலம்) போன்ற பிற எழுதும் முறைகளும் உள்ளன, ஆனால் அவை குறைவாகவே பயன்படுத்தப்படுகின்றன.

உரை திசை

உரை திசையானது, ஒரு வரியில் எழுத்துக்கள் எந்த திசையில் காட்டப்படுகின்றன என்பதைக் குறிப்பிடுகிறது. மிகவும் பொதுவான உரை திசைகள்:

• ltr: இடமிருந்து வலம் (பெரும்பாலான மொழிகளுக்கு நிலையானது)
• rtl: வலமிருந்து இடம் (அரபு, ஹீப்ரு, பாரசீகம் போன்ற மொழிகளில் பயன்படுத்தப்படுகிறது)

இந்தப் பண்புகள் முறையே writing-mode மற்றும் direction CSS பண்புகளைப் பயன்படுத்தி அமைக்கப்படுகின்றன. உதாரணமாக:

.rtl-example { direction: rtl; } .vertical-example { writing-mode: vertical-rl; }

முக்கிய லாஜிக்கல் பண்புகள்

மிக முக்கியமான CSS லாஜிக்கல் பண்புகள் மற்றும் அவை அவற்றின் இயற்பியல் đối tácர்களுடன் எவ்வாறு தொடர்புபடுகின்றன என்பதன் முறிவு இங்கே:

பாக்ஸ் மாடல் பண்புகள்

இந்தப் பண்புகள் ஒரு உறுப்பின் பேடிங், மார்ஜின் மற்றும் பார்டரைக் கட்டுப்படுத்துகின்றன.

• margin-inline-start: LTR-இல் margin-left மற்றும் RTL-இல் margin-right-க்கு சமமானது.
• margin-inline-end: LTR-இல் margin-right மற்றும் RTL-இல் margin-left-க்கு சமமானது.
• margin-block-start: LTR மற்றும் RTL இரண்டிலும் margin-top-க்கு சமமானது.
• margin-block-end: LTR மற்றும் RTL இரண்டிலும் margin-bottom-க்கு சமமானது.
• padding-inline-start: LTR-இல் padding-left மற்றும் RTL-இல் padding-right-க்கு சமமானது.
• padding-inline-end: LTR-இல் padding-right மற்றும் RTL-இல் padding-left-க்கு சமமானது.
• padding-block-start: LTR மற்றும் RTL இரண்டிலும் padding-top-க்கு சமமானது.
• padding-block-end: LTR மற்றும் RTL இரண்டிலும் padding-bottom-க்கு சமமானது.
• border-inline-start: லாஜிக்கல் ஆரம்பப் பக்கத்தில் பார்டர் பண்புகளை அமைப்பதற்கான சுருக்கெழுத்து.
• border-inline-end: லாஜிக்கல் இறுதிப் பக்கத்தில் பார்டர் பண்புகளை அமைப்பதற்கான சுருக்கெழுத்து.
• border-block-start: லாஜிக்கல் மேல் பக்கத்தில் பார்டர் பண்புகளை அமைப்பதற்கான சுருக்கெழுத்து.
• border-block-end: லாஜிக்கல் கீழ் பக்கத்தில் பார்டர் பண்புகளை அமைப்பதற்கான சுருக்கெழுத்து.

உதாரணம்: உரை திசையைப் பொருட்படுத்தாமல் நிலையான பேடிங்குடன் ஒரு பொத்தானை உருவாக்குதல்:

.button { padding-inline-start: 1em; padding-inline-end: 1em; }

நிலைப்படுத்தல் பண்புகள்

இந்தப் பண்புகள் ஒரு உறுப்பு அதன் பெற்றோருக்குள் இருக்கும் நிலையைக் கட்டுப்படுத்துகின்றன.

• inset-inline-start: LTR-இல் left மற்றும் RTL-இல் right-க்கு சமமானது.
• inset-inline-end: LTR-இல் right மற்றும் RTL-இல் left-க்கு சமமானது.
• inset-block-start: LTR மற்றும் RTL இரண்டிலும் top-க்கு சமமானது.
• inset-block-end: LTR மற்றும் RTL இரண்டிலும் bottom-க்கு சமமானது.

உதாரணம்: ஒரு உறுப்பை அதன் கண்டெய்னரின் ஆரம்ப மற்றும் மேல் விளிம்புகளுக்கு சார்பாக நிலைநிறுத்துதல்:

.element { position: absolute; inset-inline-start: 10px; inset-block-start: 20px; }

ஃப்ளோ தளவமைப்பு பண்புகள்

இந்தப் பண்புகள் ஒரு கண்டெய்னருக்குள் உள்ளடக்கத்தின் தளவமைப்பைக் கட்டுப்படுத்துகின்றன.

• float-inline-start: LTR-இல் float: left மற்றும் RTL-இல் float: right-க்கு சமமானது.
• float-inline-end: LTR-இல் float: right மற்றும் RTL-இல் float: left-க்கு சமமானது.
• clear-inline-start: LTR-இல் clear: left மற்றும் RTL-இல் clear: right-க்கு சமமானது.
• clear-inline-end: LTR-இல் clear: right மற்றும் RTL-இல் clear: left-க்கு சமமானது.

உதாரணம்: ஒரு படத்தை உள்ளடக்க ஓட்டத்தின் தொடக்கத்திற்கு மிதக்க வைத்தல்:

.image { float-inline-start: left; /* LTR மற்றும் RTL இரண்டிலும் சீரான காட்சி இடம் */ }

அளவு பண்புகள்

• inline-size: கிடைமட்ட எழுதும் முறையில் கிடைமட்ட அளவையும், செங்குத்து எழுதும் முறையில் செங்குத்து அளவையும் குறிக்கிறது.
• block-size: கிடைமட்ட எழுதும் முறையில் செங்குத்து அளவையும், செங்குத்து எழுதும் முறையில் கிடைமட்ட அளவையும் குறிக்கிறது.
• min-inline-size
• max-inline-size
• min-block-size
• max-block-size

செங்குத்து எழுதும் முறைகளுடன் பணிபுரியும் போது இவை குறிப்பாக பயனுள்ளதாக இருக்கும்.

லாஜிக்கல் பண்புகளைப் பயன்படுத்துவதன் நன்மைகள்

CSS லாஜிக்கல் பண்புகளை ஏற்றுக்கொள்வது சர்வதேச வலை வடிவமைப்பிற்கு பல குறிப்பிடத்தக்க நன்மைகளை வழங்குகிறது:

• மேம்படுத்தப்பட்ட சர்வதேசியமாக்கல் (I18N): வெவ்வேறு எழுதும் முறைகள் மற்றும் உரை திசைகளுக்கு தானாகவே பொருந்தக்கூடிய தளவமைப்புகளை உருவாக்குங்கள், பல மொழிகளை ஆதரிக்கும் செயல்முறையை எளிதாக்குகிறது.
• மேம்படுத்தப்பட்ட பதிலளிப்புத்திறன்: லாஜிக்கல் பண்புகள் பதிலளிக்கக்கூடிய வடிவமைப்பு கொள்கைகளை பூர்த்தி செய்கின்றன, பல்வேறு திரை அளவுகள் மற்றும் நோக்குநிலைகளுக்கு தடையின்றி சரிசெய்யக்கூடிய தளவமைப்புகளை உருவாக்க உங்களை அனுமதிக்கிறது.
• குறியீடு பராமரிப்புத்திறன்: மொழி அல்லது திசையின் அடிப்படையில் சிக்கலான மீடியா வினவல்கள் மற்றும் நிபந்தனை ஸ்டைலிங் தேவையை குறைத்து, சுத்தமான மற்றும் மேலும் பராமரிக்கக்கூடிய CSS-ஐ விளைவிக்கிறது.
• குறைக்கப்பட்ட சிக்கல்: திரையின் இயற்பியல் நோக்குநிலையை ஒதுக்கி வைத்து, தளவமைப்பு விதிகளைப் பற்றி பகுத்தறிவு செய்வதை எளிதாக்கி, வெவ்வேறு மொழிகள் மற்றும் கலாச்சாரங்களில் நிலையான வடிவமைப்புகளை உருவாக்குகிறது.
• எதிர்காலத்திற்கான ஆதாரம்: எழுதும் முறைகள் மற்றும் தளவமைப்பு தொழில்நுட்பங்கள் உருவாகும்போது, லாஜிக்கல் பண்புகள் வலை வடிவமைப்பிற்கு மிகவும் நெகிழ்வான மற்றும் மாற்றியமைக்கக்கூடிய அணுகுமுறையை வழங்குகின்றன.

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

சர்வதேசமயமாக்கப்பட்ட தளவமைப்புகளை உருவாக்க CSS லாஜிக்கல் பண்புகளை எவ்வாறு பயன்படுத்தலாம் என்பதற்கான சில நடைமுறை எடுத்துக்காட்டுகளை ஆராய்வோம்:

எடுத்துக்காட்டு 1: ஒரு வழிசெலுத்தல் மெனுவை உருவாக்குதல்

ஒரு வழிசெலுத்தல் மெனுவைக் கவனியுங்கள், அதில் மெனு உருப்படிகள் LTR மொழிகளில் வலதுபுறமாகவும், RTL மொழிகளில் இடதுபுறமாகவும் சீரமைக்கப்பட வேண்டும்.

.nav { display: flex; justify-content: flex-end; /* உருப்படிகளை வரியின் முடிவில் சீரமைக்கவும் */ }

இந்த வழக்கில், flex-end-ஐப் பயன்படுத்துவது, ஒவ்வொரு திசைக்கும் தனித்தனி ஸ்டைல்கள் தேவையில்லாமல், மெனு உருப்படிகள் LTR-இல் வலதுபுறமாகவும், RTL-இல் இடதுபுறமாகவும் சீரமைக்கப்படுவதை உறுதி செய்கிறது.

எடுத்துக்காட்டு 2: ஒரு அரட்டை இடைமுகத்தை ஸ்டைலிங் செய்தல்

ஒரு அரட்டை இடைமுகத்தில், அனுப்புநரிடமிருந்து வரும் செய்திகளை வலதுபுறத்திலும், பெறுநரிடமிருந்து வரும் செய்திகளை இடதுபுறத்திலும் (LTR-இல்) காட்ட விரும்பலாம். RTL-இல், இது தலைகீழாக இருக்க வேண்டும்.

.message.sender { margin-inline-start: auto; /* அனுப்புநர் செய்திகளை முடிவுக்குத் தள்ளவும் */ } .message.receiver { margin-inline-end: auto; /* பெறுநர் செய்திகளை தொடக்கத்திற்குத் தள்ளவும் (LTR இல் திறம்பட இடதுபுறம்) */ }

எடுத்துக்காட்டு 3: ஒரு எளிய கார்டு தளவமைப்பை உருவாக்குதல்

LTR-இல் இடதுபுறம் ஒரு படமும் வலதுபுறம் உரை உள்ளடக்கமும் கொண்ட ஒரு கார்டை உருவாக்கவும், RTL-இல் நேர்மாறாகவும்.

.card { display: flex; } .card img { margin-inline-end: 1em; }

படத்தில் உள்ள margin-inline-end தானாகவே LTR-இல் வலதுபுறத்திலும், RTL-இல் இடதுபுறத்திலும் ஒரு மார்ஜினைப் பயன்படுத்தும்.

எடுத்துக்காட்டு 4: நிலையான சீரமைப்புடன் உள்ளீட்டு புலங்களைக் கையாளுதல்

LTR தளவமைப்புகளில் உள்ளீட்டு புலங்களுக்கு வலதுபுறம் லேபிள்கள் சீரமைக்கப்பட்ட ஒரு படிவத்தை கற்பனை செய்து பாருங்கள். RTL-இல், லேபிள்கள் இடதுபுறத்தில் இருக்க வேண்டும்.

.form-group { display: flex; align-items: center; } .form-group label { text-align: end; padding-inline-end: 0.5em; width: 100px; /* லேபிளுக்கு நிலையான அகலம் */ } .form-group input { flex: 1; }

text-align: end ஐப் பயன்படுத்துவது உரையை LTR-இல் வலதுபுறமாகவும் RTL-இல் இடதுபுறமாகவும் சீரமைக்கிறது. padding-inline-end தளவமைப்பு திசையைப் பொருட்படுத்தாமல் நிலையான இடைவெளியை வழங்குகிறது.

இயற்பியல் பண்புகளிலிருந்து லாஜிக்கல் பண்புகளுக்கு மாறுதல்

இருக்கும் ஒரு குறியீட்டுத் தளத்தை லாஜிக்கல் பண்புகளைப் பயன்படுத்த மாற்றுவது கடினமாகத் தோன்றலாம், ஆனால் இது ஒரு படிப்படியான செயல்முறையாகும். இங்கே ஒரு பரிந்துரைக்கப்பட்ட அணுகுமுறை உள்ளது:

1. திசை-சார்ந்த ஸ்டைல்களை அடையாளம் காணுதல்: left, right, margin-left, margin-right போன்ற இயற்பியல் பண்புகளைப் பயன்படுத்தும் CSS விதிகளை அடையாளம் காண்பதன் மூலம் தொடங்கவும்.
2. லாஜிக்கல் பண்பு சமமானவைகளை உருவாக்குதல்: ஒவ்வொரு திசை-சார்ந்த விதிக்கும், லாஜிக்கல் பண்புகளைப் பயன்படுத்தி ஒரு தொடர்புடைய விதியை உருவாக்கவும் (எ.கா., margin-left-ஐ margin-inline-start உடன் மாற்றவும்).
3. முழுமையாகச் சோதிக்கவும்: புதிய லாஜிக்கல் பண்புகள் சரியாக வேலை செய்கின்றனவா என்பதை உறுதிப்படுத்த, உங்கள் மாற்றங்களை LTR மற்றும் RTL தளவமைப்புகள் இரண்டிலும் சோதிக்கவும். RTL சூழல்களை உருவகப்படுத்த உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தலாம்.
4. படிப்படியாக இயற்பியல் பண்புகளை மாற்றுதல்: லாஜிக்கல் பண்புகள் சரியாக வேலை செய்கின்றன என்பதில் நீங்கள் நம்பிக்கையுடன் இருந்தால், அசல் இயற்பியல் பண்புகளை படிப்படியாக அகற்றவும்.
5. CSS மாறிகளைப் பயன்படுத்துங்கள்: பொதுவான இடைவெளி அல்லது அளவு மதிப்புகளை வரையறுக்க CSS மாறிகளைப் பயன்படுத்துவதைக் கவனியுங்கள், இது உங்கள் ஸ்டைல்களை நிர்வகிப்பதையும் புதுப்பிப்பதையும் எளிதாக்குகிறது. உதாரணமாக: :root { --spacing-inline: 1em; } .element { margin-inline-start: var(--spacing-inline); margin-inline-end: var(--spacing-inline); }

உலாவி ஆதரவு

CSS லாஜிக்கல் பண்புகள் Chrome, Firefox, Safari மற்றும் Edge உள்ளிட்ட நவீன உலாவிகளில் சிறந்த உலாவி ஆதரவைக் கொண்டுள்ளன. இருப்பினும், பழைய உலாவிகள் அவற்றை பூர்வீகமாக ஆதரிக்காமல் இருக்கலாம். பழைய உலாவிகளுடன் இணக்கத்தன்மையை உறுதிப்படுத்த, நீங்கள் css-logical-props போன்ற ஒரு பாலிஃபில் நூலகத்தைப் பயன்படுத்தலாம்.

மேம்பட்ட நுட்பங்கள்

லாஜிக்கல் பண்புகளை CSS கிரிட் மற்றும் ஃப்ளெக்ஸ்பாக்ஸுடன் இணைத்தல்

லாஜிக்கல் பண்புகள் CSS கிரிட் மற்றும் ஃப்ளெக்ஸ்பாக்ஸுடன் தடையின்றி செயல்படுகின்றன, இது வெவ்வேறு எழுத்து முறைகளுக்கு ஏற்றவாறு சிக்கலான மற்றும் பதிலளிக்கக்கூடிய தளவமைப்புகளை உருவாக்க உங்களை அனுமதிக்கிறது. உதாரணமாக, ஃப்ளெக்ஸ்பாக்ஸில் justify-content: start மற்றும் justify-content: end ஐப் பயன்படுத்தி உருப்படிகளை கண்டெய்னரின் லாஜிக்கல் ஆரம்பம் மற்றும் இறுதிக்கு சீரமைக்கலாம்.

தனிப்பயன் பண்புகளுடன் (CSS மாறிகள்) லாஜிக்கல் பண்புகளைப் பயன்படுத்துதல்

மேலே காட்டப்பட்டுள்ளபடி, CSS மாறிகள் உங்கள் லாஜிக்கல் பண்பு குறியீட்டை இன்னும் பராமரிக்கக்கூடியதாகவும் படிக்கக்கூடியதாகவும் மாற்றும். பொதுவான இடைவெளி மற்றும் அளவு மதிப்புகளை மாறிகளாக வரையறுத்து, அவற்றை உங்கள் ஸ்டைல்ஷீட் முழுவதும் மீண்டும் பயன்படுத்தவும்.

ஜாவாஸ்கிரிப்ட் மூலம் எழுதும் முறை மற்றும் திசையைக் கண்டறிதல்

சில சந்தர்ப்பங்களில், நீங்கள் ஜாவாஸ்கிரிப்ட் பயன்படுத்தி தற்போதைய எழுதும் முறை அல்லது திசையைக் கண்டறிய வேண்டியிருக்கலாம். writing-mode மற்றும் direction பண்புகளின் மதிப்புகளைப் பெற நீங்கள் getComputedStyle() முறையைப் பயன்படுத்தலாம்.

சிறந்த நடைமுறைகள்

• லாஜிக்கல் பண்புகளுக்கு முன்னுரிமை அளியுங்கள்: உங்கள் தளவமைப்புகள் வெவ்வேறு எழுதும் முறைகளுக்கு ஏற்றதாக இருப்பதை உறுதிசெய்ய, முடிந்தவரை இயற்பியல் பண்புகளுக்குப் பதிலாக லாஜிக்கல் பண்புகளைப் பயன்படுத்தவும்.
• வெவ்வேறு மொழிகளில் சோதிக்கவும்: தளவமைப்பு சரியாக வேலை செய்கிறதா என்பதை உறுதிப்படுத்த, உங்கள் வலைத்தளத்தை LTR மற்றும் RTL மொழிகள் உட்பட பல்வேறு மொழிகளில் சோதிக்கவும்.
• பழைய உலாவிகளுக்கு ஒரு பாலிஃபில் பயன்படுத்தவும்: பழைய உலாவிகளில் லாஜிக்கல் பண்புகளுக்கு ஆதரவை வழங்க ஒரு பாலிஃபில் நூலகத்தைப் பயன்படுத்தவும்.
• அணுகல்தன்மையைக் கவனியுங்கள்: எழுதும் முறை அல்லது திசையைப் பொருட்படுத்தாமல், உங்கள் தளவமைப்புகள் மாற்றுத்திறனாளிகளுக்கு அணுகக்கூடியதாக இருப்பதை உறுதிசெய்யவும்.
• அதை சீராக வைத்திருங்கள்: நீங்கள் லாஜிக்கல் பண்புகளைப் பயன்படுத்தத் தொடங்கியதும், குழப்பத்தைத் தவிர்க்கவும், பராமரிப்புத்திறனை உறுதிப்படுத்தவும் உங்கள் திட்டம் முழுவதும் நிலைத்தன்மையை பராமரிக்கவும்.
• உங்கள் குறியீட்டை ஆவணப்படுத்தவும்: நீங்கள் ஏன் லாஜிக்கல் பண்புகளைப் பயன்படுத்துகிறீர்கள் மற்றும் அவை எவ்வாறு செயல்படுகின்றன என்பதை விளக்க உங்கள் CSS-இல் கருத்துகளைச் சேர்க்கவும்.

முடிவுரை

CSS லாஜிக்கல் பண்புகள் பதிலளிக்கக்கூடிய, சர்வதேசமயமாக்கப்பட்ட வலை தளவமைப்புகளை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். எழுதும் முறைகள் மற்றும் உரை திசையின் அடிப்படைக் கருத்துக்களைப் புரிந்துகொண்டு, உங்கள் CSS-இல் லாஜிக்கல் பண்புகளை ஏற்றுக்கொள்வதன் மூலம், நீங்கள் உலகளாவிய பார்வையாளர்களைப் பூர்த்தி செய்யும் வலைத்தளங்களை உருவாக்கலாம் மற்றும் வெவ்வேறு மொழிகள் மற்றும் கலாச்சாரங்களில் ஒரு நிலையான பயனர் அனுபவத்தை வழங்கலாம். லாஜிக்கல் பண்புகளின் சக்தியைத் தழுவி, உங்கள் வலை மேம்பாட்டுப் பணிப்பாய்வுகளில் ஒரு புதிய அளவிலான நெகிழ்வுத்தன்மையையும் பராமரிப்புத்திறனையும் திறக்கவும். சிறியதாகத் தொடங்குங்கள், பரிசோதனை செய்யுங்கள், மற்றும் படிப்படியாக அவற்றை உங்கள் தற்போதைய திட்டங்களில் இணைக்கவும். வலை வடிவமைப்பிற்கான மிகவும் மாற்றியமைக்கக்கூடிய மற்றும் உலகளவில் அறிந்த அணுகுமுறையின் நன்மைகளை நீங்கள் விரைவில் காண்பீர்கள். வலை தொடர்ந்து உலகமயமாகி வருவதால், இந்த நுட்பங்களின் முக்கியத்துவம் மட்டுமே வளரும்.

மேலும் ஆதாரங்கள்

• MDN Web Docs: CSS லாஜிக்கல் பண்புகள் மற்றும் மதிப்புகள்
• CSS லாஜிக்கல் பண்புகள் மற்றும் மதிப்புகள் நிலை 1 (W3C விவரக்குறிப்பு)
• லாஜிக்கல் பண்புகளுக்கான ஒரு முழுமையான வழிகாட்டி
• CSS லாஜிக்கல் பண்புகளுடன் தளவமைப்பைக் கட்டுப்படுத்தவும்
• RTLCSS: இடமிருந்து வலம் (LTR) காஸ்கேடிங் ஸ்டைல் ஷீட்களை (CSS) வலமிருந்து இடம் (RTL) ஆக மாற்றும் செயல்முறையை தானியங்குபடுத்துகிறது.