CSS லாஜிக்கல் ப்ராப்பர்ட்டீஸ் லெவல் 2: மேம்படுத்தப்பட்ட எழுத்து முறை ஆதரவுடன் ஒரு உண்மையான உலகளாவிய வலையை உருவாக்குதல்

பல தசாப்தங்களாக, வலை உருவாக்குநர்கள் பௌதீக உலகில் வேரூன்றிய சொற்களஞ்சியத்தைப் பயன்படுத்தி தளவமைப்புகளை உருவாக்கியுள்ளனர்: மேல், கீழ், இடது, மற்றும் வலது. நாம் margin-left, padding-top, மற்றும் border-right என அமைத்தோம். வலையானது பிரதானமாக இடமிருந்து வலம், மேலிருந்து கீழாக இருந்தபோது இந்த மன மாதிரி நமக்கு நன்றாக உதவியது. இருப்பினும், வலை உலகளாவியது. இது எல்லா மொழிகளுக்கும் கலாச்சாரங்களுக்கும் ஒரு தளமாகும், அவற்றில் பல இந்த எளிய திசை ஓட்டத்தைப் பின்பற்றுவதில்லை.

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

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

ஒரு விரைவான மீள்பார்வை: லாஜிக்கல் ப்ராப்பர்ட்டீஸின் அடிப்படைக் கருத்துக்கள் (லெவல் 1)

லெவல் 2-இல் உள்ள சேர்த்தல்களை நாம் பாராட்டுவதற்கு முன், லெவல் 1-ஆல் அமைக்கப்பட்ட அடித்தளத்தைப் பற்றிய உறுதியான புரிதல் நமக்கு இருக்க வேண்டும். முழு அமைப்பும் இரண்டு முக்கிய கருத்துக்களின் மீது கட்டமைக்கப்பட்டுள்ளது: எழுத்து முறை (writing mode) மற்றும் அதன் விளைவாக உருவாகும் பிளாக் மற்றும் இன்லைன் அச்சுகள் (block and inline axes).

நான்கு எழுத்து முறைகள்

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

• horizontal-tb: பெரும்பாலான மேற்கத்திய மொழிகளுக்கு இது இயல்புநிலை. உரை கிடைமட்டமாக (இன்லைன் அச்சு) இடமிருந்து வலமாக (அல்லது திசையைப் பொறுத்து வலமிருந்து இடமாக) பாய்கிறது, மேலும் வரிகள் மேலிருந்து கீழாக (பிளாக் அச்சு) அடுக்கப்படுகின்றன.
• vertical-rl: பாரம்பரிய கிழக்கு ஆசிய அச்சுக்கலைக்கு (எ.கா., ஜப்பானிய, சீன) பயன்படுத்தப்படுகிறது. உரை செங்குத்தாக மேலிருந்து கீழாக (இன்லைன் அச்சு) பாய்கிறது, மேலும் வரிகள் வலமிருந்து இடமாக (பிளாக் அச்சு) அடுக்கப்படுகின்றன.
• vertical-lr: மேலே உள்ளதைப் போன்றது, ஆனால் வரிகள் இடமிருந்து வலமாக (பிளாக் அச்சு) அடுக்கப்படுகின்றன. இது குறைவாகவே பயன்படுத்தப்படுகிறது, ஆனால் மங்கோலிய எழுத்து போன்ற சில சூழல்களில் பயன்படுத்தப்படுகிறது.
• sidelong-rl / sidelong-lr: நீங்கள் கிளிஃப்களை அவற்றின் பக்கவாட்டில் அமைக்க விரும்பும் குறிப்பிட்ட பயன்பாட்டு நிகழ்வுகளுக்கானவை. இவை பொதுவான வலை உள்ளடக்கத்தில் குறைவாகவே காணப்படுகின்றன.

முக்கியமான கருத்து: பிளாக் மற்றும் இன்லைன் அச்சு

இது புரிந்துகொள்ள வேண்டிய மிக முக்கியமான கருத்து. ஒரு தர்க்கரீதியான உலகில், நாம் "செங்குத்து" மற்றும் "கிடைமட்ட" என்பதைப் பற்றி சிந்திப்பதை நிறுத்திவிட்டு, பிளாக் மற்றும் இன்லைன் அச்சுகளின் அடிப்படையில் சிந்திக்கத் தொடங்குகிறோம். அவற்றின் நோக்குநிலை முற்றிலும் writing-mode-ஐப் பொறுத்தது.

• இன்லைன் அச்சு (Inline Axis) என்பது ஒரு வரியில் உரை பாயும் திசையாகும்.
• பிளாக் அச்சு (Block Axis) என்பது புதிய வரிகள் அடுக்கப்படும் திசையாகும்.

இது எப்படி செயல்படுகிறது என்று பார்ப்போம்:

• தரமான ஆங்கிலத்தில் (writing-mode: horizontal-tb): இன்லைன் அச்சு கிடைமட்டமாகவும், பிளாக் அச்சு செங்குத்தாகவும் இயங்குகிறது.
• பாரம்பரிய ஜப்பானிய மொழியில் (writing-mode: vertical-rl): இன்லைன் அச்சு செங்குத்தாகவும், பிளாக் அச்சு கிடைமட்டமாகவும் இயங்குகிறது.

இந்த அச்சுகள் மாறக்கூடியவை என்பதால், width மற்றும் height போன்ற ப்ராப்பர்ட்டீஸ் தெளிவற்றதாகிவிடுகின்றன. width என்பது கிடைமட்ட அச்சின் அளவா அல்லது இன்லைன் அச்சின் அளவா? லாஜிக்கல் ப்ராப்பர்ட்டீஸ் இந்த தெளிவின்மையைத் தீர்க்கின்றன. இப்போது ஒவ்வொரு அச்சுக்கும் start மற்றும் end உள்ளன:

• block-start: ஆங்கிலத்தில் "மேல்" (top), ஆனால் செங்குத்து ஜப்பானிய மொழியில் "வலது" (right).
• block-end: ஆங்கிலத்தில் "கீழ்" (bottom), ஆனால் செங்குத்து ஜப்பானிய மொழியில் "இடது" (left).
• inline-start: ஆங்கிலத்தில் "இடது" (left), ஆனால் செங்குத்து ஜப்பானிய மொழியில் "மேல்" (top).
• inline-end: ஆங்கிலத்தில் "வலது" (right), ஆனால் செங்குத்து ஜப்பானிய மொழியில் "கீழ்" (bottom).

பௌதீக ப்ராப்பர்ட்டீஸ்களை லாஜிக்கல் ப்ராப்பர்ட்டீஸ்களுடன் பொருத்துதல் (லெவல் 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 (for positioning) → inset-inline-start / inset-inline-end
• top / bottom (for positioning) → inset-block-start / inset-block-end

லெவல் 1, margin-inline (start மற்றும் end-க்கு) மற்றும் padding-block (start மற்றும் end-க்கு) போன்ற பயனுள்ள சுருக்கெழுத்துக்களையும் நமக்கு வழங்கியது.

லெவல் 2-க்கு வரவேற்கிறோம்: புதியவை என்ன, அது ஏன் முக்கியம்

லெவல் 1 ஒரு மகத்தான படியாக இருந்தபோதிலும், அது சில குறிப்பிடத்தக்க இடைவெளிகளை விட்டுச் சென்றது. float, clear, மற்றும் resize போன்ற சில அடிப்படை CSS ப்ராப்பர்ட்டீஸ்களுக்கு தர்க்கரீதியான சமமானவை இல்லை. மேலும், border-radius போன்ற ப்ராப்பர்ட்டீஸ்களை தர்க்கரீதியாக கட்டுப்படுத்த முடியவில்லை, இது உருவாக்குநர்களை நுணுக்கமான ஸ்டைலிங்கிற்கு பௌதீக ப்ராப்பர்ட்டீஸ்களைப் பயன்படுத்த கட்டாயப்படுத்தியது. இதன் பொருள், நீங்கள் 90% லாஜிக்கல் ப்ராப்பர்ட்டீஸ்களைக் கொண்டு ஒரு தளவமைப்பை உருவாக்க முடியும், ஆனால் வெவ்வேறு எழுத்து முறைகளுக்கு இன்னும் பௌதீக ஓவர்ரைடுகள் தேவைப்படும், இது அதன் நோக்கத்தை ஓரளவு தோற்கடித்தது.

CSS லாஜிக்கல் ப்ராப்பர்ட்டீஸ் லெவல் 2 இந்த குறைகளை நேரடியாக நிவர்த்தி செய்கிறது. இது ஒரு தீவிரமான புதிய அமைப்பை அறிமுகப்படுத்துவதைப் பற்றியது அல்ல, மாறாக லெவல் 1-இல் தொடங்கப்பட்ட ஒன்றை நிறைவு செய்வதைப் பற்றியது. இது இரண்டு முதன்மை வழிகளில் இதை அடைகிறது:

1. புதிய லாஜிக்கல் ப்ராப்பர்ட்டீஸ் மற்றும் வேல்யூஸ்களை அறிமுகப்படுத்துதல் இயல்பாகவே பௌதீகமாக இருந்த பழைய CSS அம்சங்களுக்கு (float போன்றவை).
2. முன்பு புறக்கணிக்கப்பட்ட சிக்கலான சுருக்கெழுத்துக்களுக்கு (border-radius போன்றவை) லாஜிக்கல் ப்ராப்பர்ட்டி மேப்பிங்குகளைச் சேர்ப்பது.

லெவல் 2 உடன், முழுமையாக ஓட்டம் சார்ந்த ஸ்டைலிங் அமைப்பின் பார்வை கிட்டத்தட்ட நிறைவடைந்துள்ளது, இது சிக்கலான, அழகான மற்றும் வலுவான காம்போனென்ட்களை உருவாக்க நமக்கு உதவுகிறது, அவை எல்லா இடங்களிலும், எல்லோருக்கும், ஹேக்குகள் அல்லது ஓவர்ரைடுகள் இல்லாமல் வேலை செய்யும்.

ஆழமான பார்வை: லெவல் 2-இல் உள்ள புதிய லாஜிக்கல் வேல்யூஸ் மற்றும் ப்ராப்பர்ட்டீஸ்

லெவல் 2 நமது டெவலப்பர் கருவித்தொகுப்பிற்கு கொண்டு வரும் மிகவும் தாக்கத்தை ஏற்படுத்தும் சேர்த்தல்களை ஆராய்வோம். இவைதான் இடைவெளிகளை நிரப்பி, உண்மையான உலகளாவிய காம்போனென்ட் வடிவமைப்பிற்கு அதிகாரம் அளிக்கும் கருவிகளாகும்.

ஃப்ளோட் மற்றும் கிளியர்: தர்க்கரீதியான புரட்சி

float ப்ராப்பர்ட்டி பல ஆண்டுகளாக CSS தளவமைப்பின் மூலக்கல்லாக இருந்து வருகிறது, ஆனால் அதன் மதிப்புகள், left மற்றும் right, பௌதீக திசையின் வரையறையாகும். நீங்கள் ஆங்கிலத்தில் ஒரு பத்தியின் left-க்கு ஒரு படத்தைப் flott செய்தால், அது சரியாகத் தெரிகிறது. ஆனால் அரபு மொழிக்காக ஆவணத்தின் திசையை வலமிருந்து இடமாக (RTL) மாற்றினால், படம் இப்போது உரைத் தொகுதியின் "தவறான" பக்கத்தில் உள்ளது. அது வரியின் தொடக்கமான வலதுபுறத்தில் இருக்க வேண்டும்.

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

• float: inline-start; இது ஒரு எலிமென்டை இன்லைன் திசையின் தொடக்கத்திற்கு flott செய்கிறது. LTR மொழிகளில், இது இடதுபுறம். RTL மொழிகளில், இது வலதுபுறம். ஒரு vertical-rl எழுத்து முறையில், இது மேல்பகுதி.
• float: inline-end; இது ஒரு எலிமென்டை இன்லைன் திசையின் இறுதிக்கு flott செய்கிறது. LTR-இல், இது வலதுபுறம். RTL-இல், இது இடதுபுறம். vertical-rl-இல், இது கீழ்ப்பகுதி.

இதேபோல், flott செய்யப்பட்ட எலிமென்ட்களைச் சுற்றி உள்ளடக்கத்தை மடக்குவதைக் கட்டுப்படுத்தப் பயன்படுத்தப்படும் clear ப்ராப்பர்ட்டி, அதன் தர்க்கரீதியான சமமானவற்றைப் பெறுகிறது:

• clear: inline-start; inline-start பக்கத்தில் உள்ள flott-களை நீக்குகிறது.
• clear: inline-end; inline-end பக்கத்தில் உள்ள flott-களை நீக்குகிறது.

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

லாஜிக்கல் ரீசைஸ் மூலம் மேம்பட்ட கட்டுப்பாடு

பொதுவாக textarea-வில் பயன்படுத்தப்படும் resize ப்ராப்பர்ட்டி, பயனர்களை ஒரு எலிமென்டின் அளவை மாற்ற அனுமதிக்கிறது. அதன் பாரம்பரிய மதிப்புகள் 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-இலிருந்து நவீன லாஜிக்கல் ப்ராப்பர்ட்டீஸ்களைப் பயன்படுத்த மறுசீரமைப்போம்.

அட்டையில் ஒரு பக்கம் flott செய்யப்பட்ட படம், ஒரு தலைப்பு, சில உரை, மற்றும் ஒரு அலங்கார பார்டர் மற்றும் வட்டமான மூலைகள் இருக்கும்.

"பழைய" வழி: ஒரு பலவீனமான, பௌதீக-ப்ராப்பர்ட்டி கார்டு

சில ஆண்டுகளுக்கு முன்பு இந்த அட்டையை நாம் எப்படி ஸ்டைல் செய்திருக்கலாம் என்பது இங்கே:

/* --- CSS (பௌதீக ப்ராப்பர்ட்டீஸ்) --- */

.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-இன் புதிய சேர்த்தல்கள் இரண்டிலிருந்தும் ப்ராப்பர்ட்டீஸ்களைப் பயன்படுத்துவோம்.

/* --- CSS (லாஜிக்கல் ப்ராப்பர்ட்டீஸ்) --- */

.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;

}

சோதனை மற்றும் சரிபார்ப்பு

இந்த புதிய CSS உடன், நீங்கள் காம்போனென்டை எந்த கொள்கலனிலும் போட்டால், அது தானாகவே பொருந்திக்கொள்ளும்.

• ஒரு LTR சூழலில்: இது அசல் பௌதீக பதிப்பைப் போலவே இருக்கும்.
• ஒரு RTL சூழலில் (dir="rtl"): அவதார் வலதுபுறம் flott ஆகும், அதன் மார்ஜின் இடதுபுறத்தில் இருக்கும், அலங்கார பார்டர் வலதுபுறத்தில் இருக்கும், மற்றும் உரை தொடக்கத்தில் (வலதுபுறம்) சீரமைக்கப்படும். வட்டமான மூலைகள் சரியாக மேல்-வலது மற்றும் கீழ்-வலதுபுறத்தில் இருக்கும். இது சரியாக வேலை செய்கிறது.
• ஒரு செங்குத்து சூழலில் (writing-mode: vertical-rl): அட்டையின் "அகலம்" (இப்போது அதன் செங்குத்து inline-size) 300px ஆக இருக்கும். அவதார் "மேல்" (inline-start) பகுதிக்கு flott ஆகி அதன் "கீழ்" (inline-end) பகுதியில் ஒரு மார்ஜினுடன் இருக்கும். அலங்கார பார்டர் வலது பக்கத்தில் (inline-start) இருக்கும், மற்றும் வட்டமான மூலைகள் மேல்-வலது மற்றும் மேல்-இடதுபுறத்தில் இருக்கும். காம்போனென்ட் எந்த மீடியா வினவல்கள் அல்லது ஓவர்ரைடுகள் இல்லாமல் தன்னை முழுமையாக மறுசீரமைத்துக் கொண்டுள்ளது.

உலாவி ஆதரவு மற்றும் ஃபால்பேக்குகள்

இது எல்லாம் அருமையாகத் தெரிகிறது, ஆனால் உலாவி ஆதரவு பற்றி என்ன? நல்ல செய்தி என்னவென்றால், லெவல் 1 லாஜிக்கல் ப்ராப்பர்ட்டீஸ்களுக்கான ஆதரவு அனைத்து நவீன உலாவிகளிலும் சிறப்பாக உள்ளது. நீங்கள் இன்று margin-inline-start மற்றும் padding-block போன்ற ப்ராப்பர்ட்டீஸ்களைப் பயன்படுத்தலாம் மற்றும் பயன்படுத்த வேண்டும்.

புதிய லெவல் 2 அம்சங்களுக்கான ஆதரவு வேகமாக மேம்பட்டு வருகிறது, ஆனால் இன்னும் உலகளாவியதாக இல்லை. float, clear, மற்றும் resize-க்கான லாஜிக்கல் மதிப்புகள் நன்கு ஆதரிக்கப்படுகின்றன. லாஜிக்கல் border-radius ப்ராப்பர்ட்டீஸ் புதியவை மற்றும் இன்னும் அம்சம் கொடிகளின் பின்னால் அல்லது சமீபத்திய உலாவி பதிப்புகளில் இருக்கலாம். எப்போதும் போல, நீங்கள் MDN Web Docs அல்லது CanIUse.com போன்ற வளங்களை மிகச் சமீபத்திய இணக்கத்தன்மை தரவுகளுக்கு ஆலோசிக்க வேண்டும்.

முற்போக்கான மேம்பாட்டிற்கான உத்திகள்

CSS நெகிழ்வுத்தன்மையுடன் வடிவமைக்கப்பட்டுள்ளதால், பழைய உலாவிகளுக்கு நாம் எளிதாக ஃபால்பேக்குகளை வழங்கலாம். ஒரு உலாவி ஒரு லாஜிக்கல் ப்ராப்பர்ட்டியைப் புரிந்து கொள்ளவில்லை என்றால், அது அதை வெறுமனே புறக்கணித்து, அதற்கு முன் வரையறுக்கப்பட்ட பௌதீக ப்ராப்பர்ட்டியைப் பயன்படுத்தும் என்பதை அடுக்கு (cascade) உறுதி செய்யும்.

ஃபால்பேக்-தயார் CSS-ஐ நீங்கள் எப்படி எழுதலாம் என்பது இங்கே:

.card {

  /* பழைய உலாவிகளுக்கான ஃபால்பேக் */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* ஃபால்பேக்கை மீறும் நவீன லாஜிக்கல் ப்ராப்பர்ட்டி */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

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

எதிர்காலம் தர்க்கரீதியானது: லெவல் 2-க்கு அப்பால்

பௌதீக மனநிலையிலிருந்து தர்க்கரீதியான மனநிலைக்கு மாறுவது நவீன CSS-இல் மிக முக்கியமான மாற்றங்களில் ஒன்றாகும். இது நமது ஸ்டைலிங் மொழியை ஒரு பன்முக, உலகளாவிய வலையின் யதார்த்தத்துடன் சீரமைக்கிறது. இது நம்மை பலவீனமான, திரை சார்ந்த ஹேக்குகளிலிருந்து விலக்கி, நெகிழ்வான, உள்ளடக்கம் சார்ந்த வடிவமைப்பை நோக்கி நகர்த்துகிறது.

இன்னும் இடைவெளிகள் உள்ளதா? சில. background-position அல்லது கிரேடியன்ட்கள் போன்ற ப்ராப்பர்ட்டீஸ்களுக்கான லாஜிக்கல் மதிப்புகள் இன்னும் விவாதிக்கப்பட்டு வருகின்றன. ஆனால் லெவல் 2-இன் வெளியீட்டோடு, அன்றாட தளவமைப்பு மற்றும் ஸ்டைலிங் பணிகளில் பெரும்பாலானவற்றை இப்போது முற்றிலும் தர்க்கரீதியான அணுகுமுறையைப் பயன்படுத்திச் செய்ய முடியும்.

டெவலப்பர்களுக்கான செயல் அழைப்பு தெளிவாக உள்ளது: லாஜிக்கல் ப்ராப்பர்ட்டீஸ்களுக்கு இயல்புநிலையாக மாறத் தொடங்குங்கள். width-க்கு பதிலாக inline-size-ஐ உங்கள் விருப்பமாக ஆக்குங்கள். இடது மற்றும் வலது மார்ஜின்களை தனித்தனியாக அமைப்பதற்குப் பதிலாக margin-inline-ஐப் பயன்படுத்தவும். இது வெவ்வேறு மொழிகளை ஆதரிப்பதைப் பற்றியது மட்டுமல்ல; இது சிறந்த, அதிக நெகிழ்வான CSS எழுதுவதைப் பற்றியது. லாஜிக்கல் ப்ராப்பர்ட்டீஸ்களுடன் கட்டப்பட்ட ஒரு காம்போனென்ட் இயல்பாகவே அதிக மறுபயன்பாடு மற்றும் மாற்றியமைக்கக்கூடியது, அது LTR, RTL, அல்லது செங்குத்து தளவமைப்பில் பயன்படுத்தப்பட்டாலும் சரி. இது வெறுமனே சிறந்த பொறியியல்.

முடிவுரை: ஓட்டத்தை தழுவுங்கள்

CSS லாஜிக்கல் ப்ராப்பர்ட்டீஸ் லெவல் 2 என்பது புதிய அம்சங்களின் தொகுப்பு மட்டுமல்ல; அது ஒரு பார்வையின் நிறைவு. இது தளவமைப்புகளை உருவாக்கத் தேவையான இறுதி, முக்கியமான துண்டுகளை வழங்குகிறது, அவை அவற்றின் உள்ளடக்கத்தின் இயற்கையான ஓட்டத்தை மதிக்கின்றன, அந்த ஓட்டம் எதுவாக இருந்தாலும் சரி. float: inline-start மற்றும் border-start-start-radius போன்ற ப்ராப்பர்ட்டீஸ்களைத் தழுவுவதன் மூலம், நாம் நமது கலையை ஒரு திரையில் பெட்டிகளை நிலைநிறுத்துவதிலிருந்து உண்மையான உலகளாவிய, உள்ளடக்கிய மற்றும் எதிர்காலத்திற்கு ஏற்ற வலை அனுபவங்களை வடிவமைக்கும் நிலைக்கு உயர்த்துகிறோம்.

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