CSS நங்கூர நிலைப்படுத்தல் கட்டுப்பாடு தீர்வு: நிலை மோதல் தீர்வை வழிநடத்துதல்

            
/* Anchor element */
.anchor {
  anchor-name: --my-anchor;
}

/* Anchored element */
.anchored {
  position: absolute; /* Necessary for anchor positioning */
  top: anchor(--my-anchor, bottom);
  left: anchor(--my-anchor, right);
}

            

              
                Copy
              
            
          

            
.anchor1 { anchor-name: --anchor1; }
.anchor2 { anchor-name: --anchor2; }

.anchored {
  position: absolute;
  top: anchor(--anchor1, bottom); /* Attempt to position at the bottom of anchor1 */
  bottom: anchor(--anchor2, top); /* Attempt to position at the top of anchor2 */
}

            

              
                Copy
              
            
          

            
.anchored {
  position: absolute;
  top: anchor(--anchor1, bottom);
  position-try: anchor(--anchor2, top); /* If top: anchor(--anchor1, bottom) fails, try this */
}

            

              
                Copy
              
            
          

            
.anchor { anchor-name: --my-anchor; }

.anchored {
  position: absolute;
  top: 50px; /* Explicit top value */
  left: anchor(--my-anchor, right); 
}

            

              
                Copy
              
            
          

            
.anchored {
  position: absolute;
  top: calc(anchor(--my-anchor, bottom) + 10px); /* Anchor position with offset */
  left: anchor(--my-anchor, right);
}

            

              
                Copy
              
            
          

            
.container {
  width: 200px;
  height: 100px;
  position: relative; /* Containing block */
}

.anchor { anchor-name: --my-anchor; }

.anchored {
  position: absolute;
  width: 300px; /* Wider than the container */
  top: anchor(--my-anchor, bottom);
  left: anchor(--my-anchor, right);
}

            

              
                Copy
              
            
          

தீர்வு: இதற்கு உங்கள் தளவமைப்பை கவனமாக திட்டமிட வேண்டும். இந்த விருப்பங்களைக் கருத்தில் கொள்ளுங்கள்:

• கொண்டிருக்கும் தொகுதியின் அளவை அதிகரிக்கவும்: முடிந்தால், .anchored தனிமத்திற்கு இடமளிக்க .container ஐ பெரிதாக்கவும்.
• நங்கூரமிடப்பட்ட தனிமத்தின் அளவைக் குறைக்கவும்: .anchored தனிமத்தின் அகலம் மற்றும் உயரத்தை சரிசெய்யவும்.
• overflow பண்பைப் பயன்படுத்தவும்: ஓவர்ஃப்ளோவைக் கையாள, கொண்டிருக்கும் தொகுதியில் overflow பண்பை auto, scroll, அல்லது visible என அமைக்கவும். இருப்பினும், இது விரும்பிய காட்சி விளைவாக இருக்காது.
• வேறு சீரமைப்புடன் position-try ஐப் பயன்படுத்தவும்: ஆரம்ப சீரமைப்பு ஓவர்ஃப்ளோவை ஏற்படுத்தினால், கிடைக்கும் இடத்திற்குள் பொருந்தக்கூடிய வேறு சீரமைப்பை முயற்சிக்கவும். உதாரணமாக, வலதுபுறம் சீரமைப்பது ஓவர்ஃப்ளோவை ஏற்படுத்தினால், இடதுபுறம் சீரமைக்க முயற்சிக்கவும்.

4. டைனமிக் உள்ளடக்கம் மற்றும் அளவை மாற்றுதல்

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

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

தீர்வு: இங்குதான் CSS நங்கூர நிலைப்படுத்தலின் சக்தி பிரகாசிக்கிறது. நங்கூர தனிமத்தின் அளவு அல்லது நிலை மாறும்போதெல்லாம் உலாவி தானாகவே நங்கூரமிடப்பட்ட தனிமத்தின் நிலையை மீண்டும் கணக்கிடுகிறது. இருப்பினும், மிகவும் சிக்கலான காட்சிகளுக்கு, நிலையை நேர்த்தியாக சரிசெய்ய அல்லது நங்கூரமிடப்பட்ட தனிமத்தின் நிலையை மென்மையாக மாற்ற அனிமேஷன்களைத் தூண்டுவதற்கு ஜாவாஸ்கிரிப்டைப் பயன்படுத்தலாம். நங்கூர தனிமத்தின் அளவு மாற்றங்களைக் கண்டறிந்து, நங்கூரமிடப்பட்ட தனிமத்தின் நிலையை அதற்கேற்ப புதுப்பிக்க ResizeObserver API ஐப் பயன்படுத்தலாம்.

5. மார்ஜின் மற்றும் பேடிங்குடன் மோதல்கள்

காட்சி: நங்கூர தனிமத்தின் மார்ஜின் அல்லது பேடிங், நங்கூரமிடப்பட்ட தனிமத்தின் நிலையை விரும்பத்தகாத வகையில் பாதிக்கிறது.

உதாரணம்:

            
.anchor {
  anchor-name: --my-anchor;
  padding: 20px;
}

.anchored {
  position: absolute;
  top: anchor(--my-anchor, bottom);
  left: anchor(--my-anchor, right);
}

            

              
                Copy
              
            
          

தீர்வு: நங்கூர தனிமங்களில் மார்ஜின் மற்றும் பேடிங்கின் தாக்கத்தைக் கவனத்தில் கொள்ளுங்கள். மார்ஜின்/பேடிங்கை ஈடுசெய்ய நங்கூர விதிகளை சரிசெய்ய அல்லது CSS மாறிகள் மற்றும் calc() ஐப் பயன்படுத்த வேண்டியிருக்கலாம்.

            
.anchored {
  position: absolute;
  top: calc(anchor(--my-anchor, bottom) + 20px); /* Adjust for padding */
  left: calc(anchor(--my-anchor, right) + 20px); /* Adjust for padding */
}

            

              
                Copy
              
            
          

மோதல்களைத் தவிர்ப்பதற்கான சிறந்த நடைமுறைகள்

மோதல்களைத் தீர்ப்பதை விட தடுப்பது பெரும்பாலும் எளிதானது. நினைவில் கொள்ள வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:

• உங்கள் தளவமைப்பை கவனமாக திட்டமிடுங்கள்: எந்த CSS ஐயும் எழுதுவதற்கு முன், உங்கள் தளவமைப்பை வரைந்து சாத்தியமான மோதல்களை அடையாளம் காணவும். வெவ்வேறு தனிமங்கள் எவ்வாறு தொடர்பு கொள்ளும் மற்றும் அவற்றின் அளவுகள் எவ்வாறு மாறும் என்பதைக் கருத்தில் கொள்ளுங்கள்.
• விளக்கமான நங்கூர பெயர்களைப் பயன்படுத்தவும்: குழப்பத்தைத் தவிர்க்க தெளிவான மற்றும் விளக்கமான நங்கூர பெயர்களைப் பயன்படுத்தவும். உதாரணமாக, --anchor1 என்பதற்குப் பதிலாக, --button-anchor அல்லது --tooltip-anchor ஐப் பயன்படுத்தவும்.
• CSS விதிகளை தனித்துவமாக வைத்திருங்கள்: நங்கூரமிடப்பட்ட தனிமங்களை தற்செயலாக பாதிக்கக்கூடிய அதிகப்படியான பொதுவான CSS விதிகளைத் தவிர்க்கவும். நீங்கள் நங்கூரமிட விரும்பும் தனிமங்களை மட்டும் குறிவைக்க குறிப்பிட்ட தேர்வாளர்களைப் பயன்படுத்தவும்.
• CSS மாறிகளைப் பயன்படுத்தவும்: CSS மாறிகள் சிக்கலான தளவமைப்புகளை நிர்வகிக்கவும், மீண்டும் மீண்டும் செய்வதைத் தவிர்க்கவும் உதவும். பொதுவான நிலைப்படுத்தல் மதிப்புகள் மற்றும் ஆஃப்செட்களை சேமிக்க மாறிகளைப் பயன்படுத்தவும்.
• position-try ஐப் பயன்படுத்தவும்: position-try பண்பு உங்கள் நண்பன். முதன்மை நங்கூர நிலையை அடைய முடியாத நிலையில் பின்னடைவு நிலைகளை வழங்க இதைப் பயன்படுத்தவும்.
• முழுமையாக சோதிக்கவும்: உங்கள் தளவமைப்பு எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை உறுதிப்படுத்த வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் சோதிக்கவும். வெவ்வேறு திரை அளவுகள் மற்றும் உள்ளடக்க மாற்றங்களுக்கு தளவமைப்பு எவ்வாறு மாற்றியமைக்கிறது என்பதில் அதிக கவனம் செலுத்துங்கள்.
• உங்கள் CSS ஐ ஆவணப்படுத்துங்கள்: ஒவ்வொரு நங்கூர விதியின் நோக்கம் மற்றும் சாத்தியமான மோதல்களை விளக்க உங்கள் CSS இல் கருத்துக்களைச் சேர்க்கவும். இது உங்களுக்கும் மற்றவர்களுக்கும் எதிர்காலத்தில் குறியீட்டைப் பராமரிப்பதை எளிதாக்கும்.

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

மிகவும் சிக்கலான தளவமைப்புகளுக்கு, நீங்கள் மேம்பட்ட நுட்பங்களை நாட வேண்டியிருக்கலாம், அவை:

• ஜாவாஸ்கிரிப்ட் அடிப்படையிலான நிலைப்படுத்தல்: சில சமயங்களில், CSS நங்கூர நிலைப்படுத்தல் மட்டும் போதுமானதாக இருக்காது. நங்கூரமிடப்பட்ட தனிமத்தின் துல்லியமான நிலையை கணக்கிட ஜாவாஸ்கிரிப்டைப் பயன்படுத்தலாம் மற்றும் அதன் top மற்றும் left மதிப்புகளை நேரடியாகப் புதுப்பிக்கலாம். இது நிலைப்படுத்தலின் மீது உங்களுக்கு அதிக கட்டுப்பாட்டைக் கொடுக்கிறது, ஆனால் உங்கள் குறியீட்டிற்கு சிக்கலையும் சேர்க்கிறது. நங்கூரம் அல்லது நங்கூரமிடப்பட்ட தனிமங்களில் ஏற்படும் மாற்றங்களைக் கண்டறிய ResizeObserver மற்றும் MutationObserver API களைப் பயன்படுத்தவும்.
• CSS ஹூடினி (CSS Houdini): CSS ஹூடினி என்பது CSS ஐ தனிப்பயன் அம்சங்களுடன் விரிவாக்க உங்களை அனுமதிக்கும் API களின் தொகுப்பாகும். நீங்கள் தனிப்பயன் கட்டுப்பாடு தீர்வுகள் அல்லது நிலைப்படுத்தல் அல்காரிதம்களை உருவாக்க ஹூடிரியைப் பயன்படுத்தலாம். இருப்பினும், ஹூடினி இன்னும் ஒப்பீட்டளவில் புதியது மற்றும் இன்னும் அனைத்து உலாவிகளாலும் பரவலாக ஆதரிக்கப்படவில்லை.

சர்வதேசமயமாக்கல் (i18n) பரிசீலனைகள்

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

• வலமிருந்து இடமாக (RTL) மொழிகள்: அரபு மற்றும் ஹீப்ரு போன்ற RTL மொழிகளில், தளவமைப்பு பிரதிபலிக்கப்படுகிறது. RTL பயன்முறையில் நங்கூரமிடப்பட்ட தனிமங்கள் சரியாக நிலைநிறுத்தப்படுவதை உறுதிசெய்ய உங்கள் நங்கூர விதிகளை சரிசெய்ய வேண்டியிருக்கலாம். எழுதும் திசையைக் கண்டறிந்து பொருத்தமான CSS ஸ்டைல்களைப் பயன்படுத்த direction பண்பைப் பயன்படுத்தவும்.
• உரை விரிவாக்கம்: வெவ்வேறு மொழிகள் வெவ்வேறு உரை நீளங்களைக் கொண்டிருக்கலாம். உங்கள் பயன்பாட்டை மற்றொரு மொழிக்கு மொழிபெயர்க்கும்போது, நங்கூர தனிமங்களில் உள்ள உரை விரிவடையலாம் அல்லது சுருங்கலாம், இதனால் நங்கூரமிடப்பட்ட தனிமங்கள் எதிர்பாராதவிதமாக மாறக்கூடும். உங்கள் தளவமைப்பு உரை விரிவாக்கத்தை அழகாக கையாள முடியும் என்பதை உறுதிப்படுத்தவும். வெவ்வேறு உரை நீளங்களுக்கு இடமளிக்க flexbox அல்லது grid போன்ற நெகிழ்வான தளவமைப்பு நுட்பங்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
• எழுத்துரு அளவுகள்: வெவ்வேறு மொழிகளுக்கு வாசிப்புத்திறனுக்காக வெவ்வேறு எழுத்துரு அளவுகள் தேவைப்படலாம். வெவ்வேறு எழுத்துரு அளவுகளுக்கு ஏற்ப உங்கள் நங்கூர விதிகளை சரிசெய்யவும்.

RTL ஐக் கையாள்வதற்கான உதாரணம்:

            
/* Default LTR styles */
.anchored {
  position: absolute;
  left: anchor(--my-anchor, right);
}

/* RTL styles */
[dir="rtl"] .anchored {
  left: auto;
  right: anchor(--my-anchor, left);
}

            

              
                Copy
              
            
          

அணுகல்தன்மை பரிசீலனைகள்

உங்கள் CSS நங்கூர நிலைப்படுத்தல் பயன்பாடு அணுகல்தன்மையை எதிர்மறையாக பாதிக்கவில்லை என்பதை உறுதிப்படுத்தவும். முக்கிய பரிசீலனைகள் பின்வருமாறு:

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

நிஜ உலக உதாரணங்கள்

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

• குறிப்புரைகள் (Tooltips): ஒரு டூல்டிப்-ஐ அது விவரிக்கும் தனிமத்தின் அருகில் நிலைநிறுத்தவும்.
• சூழல் மெனுக்கள் (Context Menus): வலது கிளிக் செய்யப்பட்ட தனிமத்திற்கு அருகில் ஒரு சூழல் மெனுவை நிலைநிறுத்தவும்.
• அழைப்புகள் (Callouts): ஒரு படம் அல்லது வரைபடத்தின் குறிப்பிட்ட பகுதிகளைச் சுட்டிக்காட்டும் அழைப்புகளை உருவாக்கவும்.
• மிதக்கும் செயல் பொத்தான்கள் (FABs): திரையின் கீழ்-வலது மூலையுடன் தொடர்புடைய ஒரு FAB-ஐ நிலைநிறுத்தவும்.
• டைனமிக் படிவங்கள்: சில புலங்களின் நிலை மற்ற புலங்களின் மதிப்புகளைப் பொறுத்து இருக்கும் டைனமிக் படிவங்களை உருவாக்கவும்.
• சிக்கலான டாஷ்போர்டுகள்: ஒரு கூறுகளின் நிலை மற்றவற்றின் நிலையைப் பாதிக்கும் ஒன்றோடொன்று இணைக்கப்பட்ட கூறுகளுடன் சிக்கலான டாஷ்போர்டுகளை உருவாக்கவும்.

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

முடிவுரை

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

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