CSS கண்டெய்னர் குவெரி லாஜிக்கல் காம்பினேஷன்கள்: குவெரி லாஜிக் ஆபரேட்டர்களின் சக்தியை கட்டவிழ்ப்பது

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

CSS கண்டெய்னர் குவெரிகள் என்றால் என்ன? ஒரு விரைவான மீள்பார்வை

லாஜிக்கல் ஆபரேட்டர்களுக்குள் மூழ்குவதற்கு முன், கண்டெய்னர் குவெரிகள் என்றால் என்ன, அவை ஏன் முக்கியமானவை என்பதை விரைவாக மீள்பார்வை செய்வோம்.

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

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

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

• size: கண்டெய்னர் குவெரி, கண்டெய்னரின் அகலம் மற்றும் உயரம் இரண்டிற்கும் வினைபுரியும்.
• inline-size: கண்டெய்னர் குவெரி, இன்லைன் அளவிற்கு (பொதுவாக கிடைமட்ட எழுத்து முறையில் அகலம்) வினைபுரியும்.

உங்கள் கண்டெய்னருக்கு ஒரு பெயரைக் கொடுக்க container-name ஐப் பயன்படுத்தலாம், இது உங்களிடம் உள்ளமைக்கப்பட்ட கண்டெய்னர் சூழல்கள் இருந்தால் குறிப்பிட்ட கண்டெய்னர்களை இலக்கு வைக்க உங்களை அனுமதிக்கிறது.

ஒரு கண்டெய்னர் சூழலை நீங்கள் நிறுவியவுடன், சில நிபந்தனைகள் பூர்த்தி செய்யப்படும்போது பொருந்தும் ஸ்டைல்களை வரையறுக்க @container விதியைப் பயன்படுத்தலாம்.

லாஜிக்கல் ஆபரேட்டர்களின் சக்தி: 'and', 'or', மற்றும் 'not'

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

'and' ஆபரேட்டர்: பல நிபந்தனைகள் தேவைப்படுதல்

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

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

            
.card-container {
  container-type: inline-size;
}

@container (min-width: 500px) and (data-theme="dark") {
  .card {
    background-color: #333;
    color: #fff;
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், .card-container குறைந்தபட்சம் 500px அகலமாக மற்றும் data-theme பண்புக்கூறு "dark" என அமைக்கப்பட்டிருந்தால் மட்டுமே .card ஒரு இருண்ட பின்னணி மற்றும் வெள்ளை உரையைக் கொண்டிருக்கும். ஏதேனும் ஒரு நிபந்தனை பூர்த்தி செய்யப்படாவிட்டால், @container விதிக்குள் உள்ள ஸ்டைல்கள் பயன்படுத்தப்படாது.

'and'-ன் நடைமுறைப் பயன்பாடுகள்:

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

'or' ஆபரேட்டர்: குறைந்தபட்சம் ஒரு நிபந்தனையை பூர்த்தி செய்தல்

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

எடுத்துக்காட்டு: ஒரு கண்டெய்னர் 300px க்கும் குறைவாகவோ அல்லது 800px க்கும் அதிகமாகவோ அகலமாக இருந்தால், அதற்கு ஒரு குறிப்பிட்ட ஸ்டைலைப் பயன்படுத்த விரும்புகிறீர்கள் என்று வைத்துக்கொள்வோம்.

            
.card-container {
  container-type: inline-size;
}

@container (max-width: 300px) or (min-width: 800px) {
  .card {
    padding: 1em;
    border: 1px solid #ccc;
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், .card-container 300px க்கும் குறைவாகவோ அல்லது 800px க்கும் அதிகமாகவோ அகலமாக இருந்தால், .card 1em பேடிங் மற்றும் ஒரு பார்டரைக் கொண்டிருக்கும். கண்டெய்னரின் அகலம் 300px மற்றும் 800px க்கு இடையில் (உள்ளடக்கியது) இருந்தால், @container விதிக்குள் உள்ள ஸ்டைல்கள் பயன்படுத்தப்படாது.

'or'-ன் நடைமுறைப் பயன்பாடுகள்:

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

'not' ஆபரேட்டர்: குறிப்பிட்ட நிபந்தனைகளைத் தவிர்த்தல்

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

எடுத்துக்காட்டு: ஒரு கண்டெய்னருக்கு "featured" கிளாஸ் இல்லையென்றால், அதற்கு ஒரு குறிப்பிட்ட ஸ்டைலைப் பயன்படுத்த விரும்புகிறீர்கள் என்று வைத்துக்கொள்வோம்.

            
.card-container {
  container-type: inline-size;
}

@container not (.featured) {
  .card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், .card-container க்கு "featured" கிளாஸ் இல்லையென்றால், .card க்கு ஒரு பாக்ஸ் ஷேடோ பயன்படுத்தப்படும். கண்டெய்னருக்கு "featured" கிளாஸ் இருந்தால், பாக்ஸ் ஷேடோ பயன்படுத்தப்படாது.

'not'-ன் நடைமுறைப் பயன்பாடுகள்:

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

சிக்கலான நிபந்தனைகளுக்காக லாஜிக்கல் ஆபரேட்டர்களை இணைத்தல்

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

எடுத்துக்காட்டு: ஒரு கண்டெய்னர் 600px க்கும் அகலமாகவும் மற்றும் "primary" கிளாஸ் கொண்டதாகவோ அல்லது "secondary" கிளாஸ் இல்லாததாகவோ இருந்தால், அதற்கு ஒரு குறிப்பிட்ட ஸ்டைலைப் பயன்படுத்த விரும்புகிறீர்கள் என்று வைத்துக்கொள்வோம்.

            
.card-container {
  container-type: inline-size;
}

@container (min-width: 600px) and (.primary or not(.secondary)) {
  .card {
    border: 2px solid blue;
  }
}

            

              
                Copy
              
            
          

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

1. .card-container 600px க்கும் அகலமாக உள்ளது.
2. மற்றும் ஒன்று:
• .card-container "primary" கிளாஸ் கொண்டுள்ளது.
• அல்லது .card-container "secondary" கிளாஸ் கொண்டிருக்கவில்லை.

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

ஆபரேட்டர்களை இணைக்கும்போது கவனத்தில் கொள்ள வேண்டிய விஷயங்கள்:

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

நிஜ-உலக எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

மாற்றியமைக்கக்கூடிய மற்றும் ரெஸ்பான்சிவ் லேஅவுட்களை உருவாக்க கண்டெய்னர் குவெரி லாஜிக்கல் ஆபரேட்டர்களை நீங்கள் எவ்வாறு பயன்படுத்தலாம் என்பதற்கான சில நிஜ-உலக எடுத்துக்காட்டுகளை ஆராய்வோம்.

எடுத்துக்காட்டு 1: ஒரு நெகிழ்வான கார்டு காம்போனென்ட்

ஒரு கார்டு காம்போனென்ட்டைக் கவனியுங்கள், அது அதன் அகலத்தைப் பொறுத்து வெவ்வேறு வழிகளில் தகவலைக் காட்டுகிறது. கார்டின் லேஅவுட் மற்றும் தோற்றத்தைக் கட்டுப்படுத்த லாஜிக்கல் ஆபரேட்டர்களுடன் கண்டெய்னர் குவெரிகளைப் பயன்படுத்தலாம்.

            

  

    
    
Card Title
    
Card Description
    Learn More
  


            

              
                Copy
              
            
          

            
.card-container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px; /* Example max-width */
  margin: 0 auto;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 1em;
}

.card img {
  width: 100%;
  max-width: 200px; /* Example max-width for the image */
  margin-bottom: 1em;
}

/* Default styles for small containers */
@container (max-width: 400px) {
  .card {
    text-align: center;
  }

  .card img {
    margin: 0 auto 1em;
  }
}

/* Styles for medium containers */
@container (min-width: 401px) and (max-width: 600px) {
  .card {
    flex-direction: row;
    align-items: center;
  }

  .card img {
    margin: 0 1em 0 0;
  }

  .card > *:not(img) {
    flex: 1;
  }
}

/* Styles for large containers */
@container (min-width: 601px) {
  .card {
    flex-direction: row;
    align-items: flex-start;
  }

  .card img {
    margin: 0 1em 0 0;
  }

  .card > *:not(img) {
    flex: 1;
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில்:

• 400px அல்லது அதற்கும் குறைவான அகலம் கொண்ட கண்டெய்னர்களுக்கு, கார்டு எலிமெண்ட்கள் மையப்படுத்தப்பட்டுள்ளன.
• 401px முதல் 600px அகலம் கொண்ட கண்டெய்னர்களுக்கு, படமும் உரையும் ஒரு வரிசையில் காட்டப்படுகின்றன, படம் இடதுபுறத்தில் உள்ளது.
• 600px க்கும் அதிகமான அகலம் கொண்ட கண்டெய்னர்களுக்கு, லேஅவுட் நடுத்தர கண்டெய்னரைப் போலவே உள்ளது, ஆனால் ஐட்டம்கள் தொடக்கத்திற்கு சீரமைக்கப்படுகின்றன.

எடுத்துக்காட்டு 2: ஒரு ரெஸ்பான்சிவ் நேவிகேஷன் மெனு

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

            


            

              
                Copy
              
            
          

            
.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 0.5em;
}

.nav-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
}

.nav-container li a {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
  padding: 0.5em;
}

.nav-container i {
  font-size: 1.2em;
  margin-right: 0.5em;
}

.nav-container span {
  display: none; /* Hide text by default */
}

/* Styles for larger containers */
@container (min-width: 400px) {
  .nav-container span {
    display: inline; /* Show text for larger containers */
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், நேவிகேஷன் மெனு ஐட்டம்கள் ஆரம்பத்தில் ஐகான்களை மட்டுமே காட்டுகின்றன. கண்டெய்னர் 400px க்கும் அகலமாக இருக்கும்போது, உரை லேபிள்கள் ஐகான்களுடன் காட்டப்படுகின்றன, இது ஒரு விளக்கமான மெனுவை உருவாக்குகிறது.

எடுத்துக்காட்டு 3: பன்னாட்டுமயமாக்கல் மற்றும் டெக்ஸ்ட் டைரக்ஷன்

டெக்ஸ்ட் டைரக்ஷனின் அடிப்படையில் லேஅவுட்களை மாற்றுவதற்கும் கண்டெய்னர் குவெரிகள் பயனுள்ளதாக இருக்கும். அரபு அல்லது ஹீப்ரு போன்ற வலமிருந்து இடமாக (RTL) எழுதப்பட்ட மொழிகளை ஆதரிக்கும் சர்வதேச வலைத்தளங்களுக்கு இது மிகவும் முக்கியமானது.

            

  

    
Article Title
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
  


            

              
                Copy
              
            
          

            
.article-container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.article {
  padding: 1em;
}

/* Default styles for LTR (Left-to-Right) */
.article h1 {
  text-align: left;
}

/* Styles for RTL (Right-to-Left) */
@container (dir(rtl)) {
  .article h1 {
    text-align: right;
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், dir(rtl) கண்டெய்னர் குவெரி, dir பண்புக்கூறு "rtl" என அமைக்கப்பட்ட கண்டெய்னர்களை இலக்கு வைக்கிறது. டெக்ஸ்ட் டைரக்ஷன் RTL ஆக இருக்கும்போது, தலைப்பு வலதுபுறமாக சீரமைக்கப்படுகிறது. இது வெவ்வேறு மொழிகள் மற்றும் எழுத்து முறைகளுக்கு லேஅவுட் சரியாக மாற்றியமைக்கப்படுவதை உறுதி செய்கிறது.

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

கண்டெய்னர் குவெரி லாஜிக்கல் ஆபரேட்டர்களை最大限மாகப் பயன்படுத்த, பின்வரும் சிறந்த நடைமுறைகளைக் கவனத்தில் கொள்ளுங்கள்:

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

முடிவுரை: கண்டெய்னர் குவெரி லாஜிக்கின் நெகிழ்வுத்தன்மையை ஏற்றுக்கொள்வது

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

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

கண்டெய்னர் குவெரி லாஜிக்கின் நெகிழ்வுத்தன்மையை ஏற்றுக்கொண்டு, உங்கள் ரெஸ்பான்சிவ் டிசைன் திறன்களை அடுத்த கட்டத்திற்கு உயர்த்துங்கள்!