CSS Region Rule: மேம்பட்ட தளவமைப்புகளுக்கான உள்ளடக்க ஓட்டக் கட்டுப்பாடு

தொடர்ந்து மாறிவரும் வலை உருவாக்கச் சூழலில், பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் ஈடுபாட்டுடன் கூடிய தளவமைப்புகளை உருவாக்குவது மிக முக்கியமானது. Flexbox மற்றும் Grid போன்ற பாரம்பரிய CSS தளவமைப்பு நுட்பங்கள் உள்ளடக்கத்தை கட்டமைக்க சக்திவாய்ந்த கருவிகளை வழங்கினாலும், பத்திரிக்கைகள் அல்லது செய்தித்தாள்களில் காணப்படும் சிக்கலான, நேரியல் அல்லாத வடிவமைப்புகளை அடைவதில் சில நேரங்களில் அவை குறைபடுகின்றன. இங்குதான் CSS Regions முக்கியப் பங்கு வகிக்கிறது. இது பல கொள்கலன்களுக்கு இடையில் உள்ளடக்க ஓட்டத்தைக் கட்டுப்படுத்த ஒரு வலுவான வழிமுறையை வழங்குகிறது, இதன் மூலம் டெவலப்பர்கள் நுட்பமான மற்றும் டைனமிக் தளவமைப்புகளை உருவாக்க முடிகிறது.

CSS Regions-ஐப் புரிந்துகொள்ளுதல்

CSS Regions, CSS3 விவரக்குறிப்பின் ஒரு பகுதியாக (முழுமையாகச் செயல்படுத்தப்படவில்லை என்றாலும்), பெயரிடப்பட்ட ஓட்டங்களை வரையறுக்கவும், பின்னர் உள்ளடக்கத்தை குறிப்பிட்ட பகுதிகளுக்கு அனுப்பவும் ஒரு வழியை வழங்குகிறது. ஒரு நீண்ட கட்டுரையை நீங்கள் பல்வேறு வடிவங்கள் மற்றும் அளவுகளில் உள்ள பல கொள்கலன்களில் காட்ட விரும்புகிறீர்கள் என்று கற்பனை செய்து பாருங்கள். CSS Regions அதைச் செய்ய உங்களை அனுமதிக்கிறது, இந்த கொள்கலன்களுக்கு இடையில் உள்ளடக்கத்தை தடையின்றி மறுஓட்டம் செய்து, ஒரு ஒருங்கிணைந்த மற்றும் பார்வைக்கு ஈர்க்கும் அனுபவத்தை உருவாக்குகிறது.

இதன் அடிப்படைக் கருத்து இரண்டு முக்கிய கூறுகளைச் சுற்றி வருகிறது:

• பெயரிடப்பட்ட ஓட்டங்கள் (Named Flows): இவை உள்ளடக்கத்தைக் கொண்டிருக்கும் பெயரிடப்பட்ட கொள்கலன்கள். இவற்றை நிரப்பக் காத்திருக்கும் வாளிகளாகக் கருதலாம். ஒரு பெயரிடப்பட்ட ஓட்டம் உள்ளடக்கத்தின் ஒற்றை ஆதாரமாகச் செயல்படுகிறது.
• பகுதிகள் (Regions): இவை பெயரிடப்பட்ட ஓட்டத்திலிருந்து உள்ளடக்கத்தைக் காட்சிப்படுத்தும் கொள்கலன்கள். இந்த பகுதிகளை தனித்தனியாக நிலைநிறுத்தி, ஸ்டைல் செய்ய முடியும், இது படைப்பாற்றல் மற்றும் நெகிழ்வான தளவமைப்புகளை அனுமதிக்கிறது.

துரதிர்ஷ்டவசமாக, CSS Regions-இன் கருத்து சக்தி வாய்ந்ததாக இருந்தாலும், உலாவி ஆதரவு குறைவாகவே உள்ளது. இது ஆரம்பத்தில் சில உலாவிகளில் செயல்படுத்தப்பட்டது, ஆனால் பின்னர் கைவிடப்பட்டது அல்லது தீவிரமாகப் பராமரிக்கப்படவில்லை. இருப்பினும், CSS Regions-க்குப் பின்னால் உள்ள கொள்கைகளைப் புரிந்துகொள்வது, மற்ற தளவமைப்பு சவால்களை நீங்கள் எவ்வாறு அணுகுகிறீர்கள் என்பதைத் தெரிவிக்கலாம் மற்றும் பாலிஃபில்கள் அல்லது எதிர்கால தளவமைப்பு தொழில்நுட்பங்களுக்கு ஊக்கமளிக்கலாம்.

CSS Regions எவ்வாறு செயல்படுகின்றன (கோட்பாட்டளவில்)

தற்போதைய உலாவி ஆதரவின் வரம்புகளை மனதில் கொண்டு, CSS Regions கோட்பாட்டளவில் எவ்வாறு செயல்படும் என்பதை ஆராய்வோம். இந்த செயல்முறை பொதுவாக பின்வரும் படிகளை உள்ளடக்கியது:

1. பெயரிடப்பட்ட ஓட்டத்தை வரையறுத்தல்: நீங்கள் ஓட்ட விரும்பும் உள்ளடக்கத்தைக் கொண்ட உறுப்பில் `flow-into` பண்பைப் பயன்படுத்தி உள்ளடக்க ஓட்டத்திற்கு ஒரு பெயரை ஒதுக்குவதன் மூலம் தொடங்குகிறீர்கள். உதாரணமாக:

               .content {
    flow-into: articleFlow;
    }
    
               
   
                 
                   Copy
                 
               
             

2. பகுதிகளை உருவாக்குதல்: அடுத்து, உள்ளடக்கம் காட்டப்பட வேண்டிய பகுதிகளை நீங்கள் வரையறுக்கிறீர்கள். இந்தப் பகுதிகள் பொதுவாக `
   ` உறுப்புகள் போன்ற பிளாக்-லெவல் உறுப்புகளாகும். `flow-from` பண்பைப் பயன்படுத்தி இந்தப் பகுதிகளை பெயரிடப்பட்ட ஓட்டத்துடன் இணைக்கிறீர்கள்.

               .region1 {
    flow-from: articleFlow;
    width: 300px;
    height: 200px;
    }
   
   .region2 {
    flow-from: articleFlow;
    width: 400px;
    height: 300px;
    }
    
               
   
                 
                   Copy
                 
               
             

3. பகுதிகளை ஸ்டைல் செய்தல்: பின்னர் `width`, `height`, `background-color`, `border` போன்ற நிலையான CSS பண்புகளைப் பயன்படுத்தி ஒவ்வொரு பகுதியையும் தனித்தனியாக ஸ்டைல் செய்யலாம்.

`flow-into: articleFlow` உள்ள உறுப்பிலிருந்து வரும் உள்ளடக்கம், பின்னர் `.region1` மற்றும் `.region2` உறுப்புகளுக்குள் தானாகவே பாய்ந்து, அவற்றை வரிசையாக நிரப்பும். உள்ளடக்கம் பகுதிகளில் கிடைக்கும் இடத்தை விட அதிகமாக இருந்தால், அது துண்டிக்கப்படும், மேலும் பகுதிகளுக்கு இடையில் உள்ளடக்கம் எவ்வாறு பிரிக்கப்படுகிறது என்பதைக் கட்டுப்படுத்த `region-fragment` போன்ற CSS பண்புகளைப் பயன்படுத்தலாம்.

Regions-க்கான முக்கிய CSS பண்புகள்

Regions உடன் தொடர்புடைய அத்தியாவசிய CSS பண்புகளின் விவரம் இங்கே:

• `flow-into`: இந்தப் பண்பு உள்ளடக்கத்தை ஒரு பெயரிடப்பட்ட ஓட்டத்திற்கு ஒதுக்குகிறது. இது நீங்கள் பகுதிகளுக்கு இடையில் விநியோகிக்க விரும்பும் உள்ளடக்கத்தைக் கொண்ட உறுப்பிற்குப் பயன்படுத்தப்படுகிறது. இதன் மதிப்பு நீங்கள் ஓட்டத்திற்கு கொடுக்கும் பெயராகும்.
• `flow-from`: இந்தப் பண்பு ஒரு பெயரிடப்பட்ட ஓட்டத்தின் உள்ளடக்கத்தை ஒரு குறிப்பிட்ட பகுதிக்குள் செலுத்துகிறது. இது பகுதி உறுப்புகளுக்குப் பயன்படுத்தப்படுகிறது. இதன் மதிப்பு `flow-into` பண்பில் பயன்படுத்தப்பட்ட பெயருடன் பொருந்த வேண்டும்.
• `region-fragment`: ஒரு பகுதியில் உள்ளடக்கம் நிரம்பி வழியும் போது அது எவ்வாறு துண்டிக்கப்பட வேண்டும் என்பதை இந்தப் பண்பு கட்டுப்படுத்துகிறது. சாத்தியமான மதிப்புகளில் `auto`, `break`, மற்றும் `discard` ஆகியவை அடங்கும். `auto` என்பது இயல்புநிலையாகும், இது உள்ளடக்கத்தை எங்கு உடைப்பது என்பதை உலாவி தீர்மானிக்க அனுமதிக்கிறது. `break` ஆனது அருகிலுள்ள சரியான உடைப்புப் புள்ளியில் (எ.கா., வார்த்தைகள் அல்லது வரிகளுக்கு இடையில்) ஒரு உடைப்பை கட்டாயப்படுத்துகிறது. `discard` நிரம்பி வழியும் உள்ளடக்கத்தை மறைக்கிறது.
• `getRegions()`: இந்த Javascript முறை, *கிடைத்தால்*, ஒரு குறிப்பிட்ட பெயரிடப்பட்ட ஓட்டத்துடன் தொடர்புடைய பகுதிகளின் பட்டியலைப் பெற உங்களை அனுமதிக்கும். இது தளவமைப்பின் டைனமிக் கையாளுதலுக்குப் பயன்படுத்தப்படலாம். இருப்பினும், வரையறுக்கப்பட்ட உலாவி ஆதரவு காரணமாக, அதன் நம்பகத்தன்மை கேள்விக்குறியது.

நடைமுறை எடுத்துக்காட்டுகள் (கருத்தியல்)

உலாவி ஆதரவு காரணமாக நீங்கள் CSS Regions-ஐ உற்பத்தியில் நம்பகத்தன்மையுடன் பயன்படுத்த முடியாது என்றாலும், அவற்றின் திறனை விளக்க சில பயன்பாட்டு நிகழ்வுகளை கற்பனை செய்து பார்ப்போம்:

பத்திரிக்கை தளவமைப்பு

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

ரெஸ்பான்சிவ் கட்டுரை விளக்கக்காட்சி

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

ஊடாடும் கதைசொல்லல்

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

வரம்புகள் மற்றும் மாற்று வழிகள்

முன்னர் குறிப்பிட்டபடி, CSS Regions-இன் முதன்மை வரம்பு பரவலான உலாவி ஆதரவு இல்லாததுதான். விவரக்குறிப்பு சில காலமாக இருந்தாலும், அது உலாவி விற்பனையாளர்களால் பரவலாக ஏற்றுக்கொள்ளப்படவில்லை. எனவே, உற்பத்தி வலைத்தளங்களுக்கு CSS Regions-ஐ மட்டுமே நம்பியிருப்பது தற்போது பரிந்துரைக்கப்படவில்லை.

இருப்பினும், சிக்கலான தன்மையின் மாறுபட்ட அளவுகளுடன், இதே போன்ற முடிவுகளை அடையக்கூடிய மாற்று அணுகுமுறைகள் உள்ளன:

• JavaScript-அடிப்படையிலான தீர்வுகள்: பல JavaScript நூலகங்கள் மற்றும் கட்டமைப்புகள் இதே போன்ற உள்ளடக்க மறுஓட்ட திறன்களை வழங்குகின்றன. இந்த தீர்வுகள் பெரும்பாலும் ஒவ்வொரு கொள்கலனிலும் கிடைக்கும் இடத்தைக் கணக்கிட்டு, அதற்கேற்ப உள்ளடக்கத்தை கைமுறையாக விநியோகிப்பதை உள்ளடக்கியது. இந்த அணுகுமுறை செயல்படுத்த மிகவும் சிக்கலானதாக இருந்தாலும், இது அதிக கட்டுப்பாடு மற்றும் நெகிழ்வுத்தன்மையை வழங்குகிறது.
• CSS Grid மற்றும் Flexbox: CSS Regions-க்கு நேரடியாக சமமானவை அல்ல என்றாலும், CSS Grid மற்றும் Flexbox பல பத்திகள் மற்றும் நெகிழ்வான உள்ளடக்க ஏற்பாடுகளுடன் நுட்பமான தளவமைப்புகளை உருவாக்கப் பயன்படுத்தப்படலாம். இந்த நுட்பங்களை மீடியா வினவல்களுடன் இணைப்பதன் மூலம், வெவ்வேறு திரை அளவுகளுக்கு ஏற்றவாறு ரெஸ்பான்சிவ் வடிவமைப்புகளை நீங்கள் அடையலாம்.
• column-count பண்பு: `column-count` CSS பண்பு அனைத்து முக்கிய உலாவிகளிலும் ஆதரிக்கப்படுகிறது. இது உள்ளடக்கம் எங்கு உடைகிறது என்பதற்கான முழுமையான கட்டுப்பாட்டை உங்களுக்கு வழங்காவிட்டாலும், உள்ளடக்கம் பல பத்திகளாகப் பாயும் பத்திரிக்கை பாணி தளவமைப்புகளை உருவாக்க இதைப் பயன்படுத்தலாம். பத்திகளுக்கு இடையில் இடைவெளியைச் சேர்க்க `column-gap` மற்றும் ஒரு காட்சிப் பிரிப்பானைச் சேர்க்க `column-rule`-ஐப் பயன்படுத்தலாம்.

CSS தளவமைப்பின் எதிர்காலம்

CSS Regions இந்த நேரத்தில் உற்பத்தி வலைத்தளங்களுக்கு ஒரு சாத்தியமான தேர்வாக இல்லாவிட்டாலும், உள்ளடக்க ஓட்டக் கட்டுப்பாட்டின் அடிப்படைக் கருத்து பொருத்தமானதாகவே உள்ளது. வலை தொடர்ந்து বিকசிக்கும்போது, இருக்கும் அணுகுமுறைகளின் வரம்புகளை நிவர்த்தி செய்யும் புதிய மற்றும் புதுமையான தளவமைப்பு நுட்பங்கள் வெளிவரும் என்று நாம் எதிர்பார்க்கலாம். CSS Regions-க்குப் பின்னால் உள்ள யோசனைகள் மீண்டும் பார்க்கப்பட்டு எதிர்கால CSS விவரக்குறிப்புகளில் இணைக்கப்பட வாய்ப்புள்ளது.

மேம்பட்ட தளவமைப்புகளைச் செயல்படுத்தும்போது உலகளாவிய பரிசீலனைகள்

மேம்பட்ட தளவமைப்புகளை வடிவமைக்கும்போது, குறிப்பாக உலகளாவிய பார்வையாளர்களுக்காக, பின்வருவனவற்றைக் கருத்தில் கொள்வது முக்கியம்:

• மொழி ஆதரவு: உங்கள் தளவமைப்பு வலமிருந்து இடமாக எழுதும் திசையுள்ள மொழிகள் (எ.கா., அரபு, ஹீப்ரு) உட்பட வெவ்வேறு மொழிகளுக்கு இடமளிக்கக்கூடியதா என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். எழுத்து திசையைப் பொருட்படுத்தாமல் சரியான தளவமைப்பு நடத்தையை உறுதிப்படுத்த லாஜிக்கல் பண்புகளை (எ.கா., `margin-left` க்கு பதிலாக `margin-inline-start`) பயன்படுத்தவும்.
• எழுத்துரு ரெண்டரிங்: வெவ்வேறு இயக்க முறைமைகள் மற்றும் உலாவிகள் எழுத்துருக்களை வித்தியாசமாக ரெண்டர் செய்யலாம். சீரான காட்சி தோற்றத்தை உறுதிப்படுத்த உங்கள் தளவமைப்பை பல்வேறு தளங்களில் சோதிக்கவும். ஒரு சீரான அச்சுக்கலை அனுபவத்தை வழங்க வலை எழுத்துருக்களைப் பயன்படுத்துவதைக் கவனியுங்கள்.
• அணுகல்தன்மை: உங்கள் தளவமைப்பு மாற்றுத்திறனாளிகளுக்கு அணுகக்கூடியதாக இருப்பதை உறுதிசெய்யுங்கள். படங்களுக்கு மாற்று உரையை வழங்கவும், செமாண்டிக் HTML உறுப்புகளைப் பயன்படுத்தவும், போதுமான வண்ண மாறுபாட்டை உறுதி செய்யவும். சிக்கலான தளவமைப்புகளின் அணுகல்தன்மையை மேம்படுத்த ARIA பண்புகளைப் பயன்படுத்தவும்.
• செயல்திறன்: சிக்கலான தளவமைப்புகள் வலைத்தள செயல்திறனைப் பாதிக்கலாம். உங்கள் CSS மற்றும் JavaScript குறியீட்டை மேம்படுத்தவும், HTTP கோரிக்கைகளைக் குறைக்கவும், ஏற்றுதல் நேரங்களை மேம்படுத்த கேச்சிங் நுட்பங்களைப் பயன்படுத்தவும். செயல்திறன் தடைகளைக் கண்டறிய Google PageSpeed Insights போன்ற கருவிகளைப் பயன்படுத்தவும்.
• சோதனை: உங்கள் தளவமைப்பு எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை உறுதிப்படுத்த, வெவ்வேறு உலாவிகள், சாதனங்கள் மற்றும் திரை அளவுகளில் முழுமையாகச் சோதிக்கவும். பின்னடைவுகளைக் கண்டறிந்து சீரான நடத்தையை உறுதிப்படுத்த தானியங்கு சோதனை கருவிகளைப் பயன்படுத்தவும்.

முடிவுரை

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