நவீன CSS லேஅவுட்கள்: கன்டெய்னர் குவரிக்களின் ஆழமான பார்வை

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

கன்டெய்னர் குவரிகள் என்றால் என்ன?

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

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

கன்டெய்னர் குவரிகளை ஏன் பயன்படுத்த வேண்டும்?

கன்டெய்னர் குவரிகளைப் பயன்படுத்துவதன் முக்கிய நன்மைகளின் ஒரு முறிவு இங்கே:

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

கன்டெய்னர் குவரிக்களுடன் தொடங்குதல்

கன்டெய்னர் குவரிகளைப் பயன்படுத்துவது சில முக்கிய படிகளை உள்ளடக்கியது:

1. கன்டெய்னர் வரையறை: ஒரு உறுப்பை `container-type` பண்பைப் பயன்படுத்தி ஒரு கன்டெய்னராக நியமிக்கவும். இது குவரி செயல்படும் எல்லைகளை நிறுவுகிறது.
2. குவரி வரையறை: `@container` at-rule-ஐப் பயன்படுத்தி குவரி நிபந்தனைகளை வரையறுக்கவும். இது `@media` போன்றது, ஆனால் வியூபோர்ட் பண்புகளுக்குப் பதிலாக, நீங்கள் கன்டெய்னர் பண்புகளை குவரி செய்வீர்கள்.
3. ஸ்டைல் ​​பயன்பாடு: குவரி நிபந்தனைகள் பூர்த்தி செய்யப்படும்போது பயன்படுத்தப்பட வேண்டிய ஸ்டைல்களைப் பயன்படுத்துங்கள். இந்த ஸ்டைல்கள் கன்டெய்னருக்குள் உள்ள உறுப்புகளை மட்டுமே பாதிக்கும்.

1. கன்டெய்னரை அமைத்தல்

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

• `size`: கன்டெய்னர் இன்லைன் (அகலம்) மற்றும் பிளாக் (உயரம்) ஆகிய இரண்டின் பரிமாணங்களையும் கண்காணிக்கும்.
• `inline-size`: கன்டெய்னர் அதன் இன்லைன் பரிமாணத்தை (பொதுவாக அகலம்) மட்டுமே கண்காணிக்கும். இது மிகவும் பொதுவான மற்றும் செயல்திறன் மிக்க தேர்வாகும்.
• `normal`: உறுப்பு ஒரு குவரி கன்டெய்னர் அல்ல (இயல்புநிலை).

இங்கே ஒரு எடுத்துக்காட்டு:

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

இந்த எடுத்துக்காட்டில், `.card-container` உறுப்பு அதன் இன்லைன் அளவை (அகலம்) கண்காணிக்கும் ஒரு கன்டெய்னராக நியமிக்கப்பட்டுள்ளது.

2. கன்டெய்னர் குவரியை வரையறுத்தல்

அடுத்து, `@container` at-rule-ஐப் பயன்படுத்தி குவரியை நீங்களே வரையறுப்பீர்கள். குவரியின் உள்ளே உள்ள ஸ்டைல்கள் பயன்படுத்தப்படுவதற்கு பூர்த்தி செய்யப்பட வேண்டிய நிபந்தனைகளை இங்கே நீங்கள் குறிப்பிடுகிறீர்கள்.

கன்டெய்னர் குறைந்தபட்சம் 500 பிக்சல்கள் அகலமாக உள்ளதா என்பதைச் சரிபார்க்கும் ஒரு எளிய எடுத்துக்காட்டு இங்கே:

@container (min-width: 500px) {
  .card {
    flex-direction: row; /* கார்டு லேஅவுட்டை மாற்றவும் */
  }
}

இந்த எடுத்துக்காட்டில், `.card-container` உறுப்பு குறைந்தபட்சம் 500 பிக்சல்கள் அகலமாக இருந்தால், `.card` உறுப்பின் `flex-direction` `row` என அமைக்கப்படும்.

நீங்கள் `max-width`, `min-height`, `max-height` போன்றவற்றையும் பயன்படுத்தலாம், மேலும் `and` மற்றும் `or` போன்ற தர்க்கரீதியான ஆபரேட்டர்களைப் பயன்படுத்தி பல நிபந்தனைகளை இணைக்கவும் செய்யலாம்.

@container (min-width: 300px) and (max-width: 700px) {
  .card-title {
    font-size: 1.2em;
  }
}

இந்த எடுத்துக்காட்டு, கன்டெய்னரின் அகலம் 300px மற்றும் 700px க்கு இடையில் இருக்கும்போது மட்டுமே ஸ்டைல்களைப் பயன்படுத்துகிறது.

3. ஸ்டைல்களைப் பயன்படுத்துதல்

`@container` at-rule-க்குள், கன்டெய்னருக்குள் உள்ள உறுப்புகளுக்கு நீங்கள் விரும்பும் எந்த CSS ஸ்டைல்களையும் பயன்படுத்தலாம். குவரி நிபந்தனைகள் பூர்த்தி செய்யப்படும்போது மட்டுமே இந்த ஸ்டைல்கள் பயன்படுத்தப்படும்.

அனைத்து படிகளையும் இணைக்கும் ஒரு முழுமையான எடுத்துக்காட்டு இங்கே:

  

    
Product Title
    
A brief description of the product.
    Learn More
  

.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  padding: 1em;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-title {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

.card-button {
  background-color: #007bff;
  color: white;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 5px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
    align-items: flex-start;
  }

  .card-title {
    font-size: 1.8em;
  }
}

இந்த எடுத்துக்காட்டில், `.card-container` குறைந்தபட்சம் 500 பிக்சல்கள் அகலமாக இருக்கும்போது, `.card` உறுப்பு ஒரு கிடைமட்ட லேஅவுட்டிற்கு மாறும், மேலும் `.card-title` இன் அளவு அதிகரிக்கும்.

கன்டெய்னர் பெயர்கள்

`container-name: my-card;` ஐப் பயன்படுத்தி நீங்கள் கன்டெய்னர்களுக்கு ஒரு பெயரைக் கொடுக்கலாம். இது உங்கள் குவரிகளில் மேலும் குறிப்பாக இருக்க உங்களை அனுமதிக்கிறது, குறிப்பாக உங்களிடம் உள்ளமைக்கப்பட்ட கன்டெய்னர்கள் இருந்தால்.

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

@container my-card (min-width: 500px) {
  /* "my-card" என பெயரிடப்பட்ட கன்டெய்னர் குறைந்தபட்சம் 500px அகலமாக இருக்கும்போது பயன்படுத்தப்படும் ஸ்டைல்கள் */
}

ஒரு பக்கத்தில் பல கன்டெய்னர்கள் இருக்கும்போது, ​​உங்கள் குவரிகளுடன் ஒரு குறிப்பிட்ட ஒன்றை நீங்கள் குறிவைக்க விரும்பும்போது இது குறிப்பாக பயனுள்ளதாக இருக்கும்.

கன்டெய்னர் குவரி அலகுகள்

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

• `cqw`: கன்டெய்னரின் அகலத்தில் 1%.
• `cqh`: கன்டெய்னரின் உயரத்தில் 1%.
• `cqi`: கன்டெய்னரின் இன்லைன் அளவில் 1% (கிடைமட்ட எழுத்து முறைகளில் அகலம்).
• `cqb`: கன்டெய்னரின் பிளாக் அளவில் 1% (கிடைமட்ட எழுத்து முறைகளில் உயரம்).
• `cqmin`: `cqi` அல்லது `cqb` இல் சிறியது.
• `cqmax`: `cqi` அல்லது `cqb` இல் பெரியது.

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

.element {
  width: 50cqw;
  font-size: 2cqmin;
}

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

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

1. ரெஸ்பான்சிவ் வழிசெலுத்தல் மெனு

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

2. தகவமைப்பு தயாரிப்பு பட்டியல்

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

3. நெகிழ்வான கட்டுரை கார்டு

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

4. டைனமிக் படிவ உறுப்புகள்

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

5. டாஷ்போர்டு விட்ஜெட்டுகள்

டாஷ்போர்டு விட்ஜெட்டுகள் அவற்றின் கன்டெய்னரின் அளவின் அடிப்படையில் அவற்றின் உள்ளடக்கம் மற்றும் விளக்கக்காட்சியை சரிசெய்ய முடியும். ஒரு வரைபட விட்ஜெட் ஒரு பெரிய கன்டெய்னரில் அதிக தரவு புள்ளிகளைக் காட்டக்கூடும் மற்றும் ஒரு சிறிய கன்டெய்னரில் குறைவான தரவு புள்ளிகளைக் காட்டக்கூடும்.

உலகளாவிய பரிசீலனைகள்

கன்டெய்னர் குவரிகளைப் பயன்படுத்தும்போது, ​​உங்கள் வடிவமைப்புத் தேர்வுகளின் உலகளாவிய தாக்கங்களைக் கருத்தில் கொள்வது அவசியம்.

• உள்ளூர்மயமாக்கல்: உங்கள் லேஅவுட்கள் வெவ்வேறு மொழிகள் மற்றும் உரை திசைகளுக்கு அழகாக மாற்றியமைக்கப்படுவதை உறுதிசெய்க. சில மொழிகளுக்கு மற்றவர்களை விட அதிக இடம் தேவைப்படலாம், எனவே மாறுபடும் உரை நீளங்களுக்கு இடமளிக்கக்கூடிய நெகிழ்வான லேஅவுட்களை வடிவமைப்பது முக்கியம்.
• அணுகல்தன்மை: உங்கள் கன்டெய்னர் குவரிகள் அணுகல்தன்மையை எதிர்மறையாக பாதிக்கவில்லை என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். உங்கள் லேஅவுட்கள் மாற்றுத்திறனாளிகளுக்குப் பயன்படுத்தக்கூடியதாக இருப்பதை உறுதிசெய்ய, உதவி தொழில்நுட்பங்களுடன் அவற்றைச் சோதிக்கவும்.
• செயல்திறன்: கன்டெய்னர் குவரிகள் குறிப்பிடத்தக்க நெகிழ்வுத்தன்மையை வழங்கினாலும், அவற்றை நியாயமான முறையில் பயன்படுத்துவது முக்கியம். கன்டெய்னர் குவரிகளை அதிகமாகப் பயன்படுத்துவது செயல்திறனை பாதிக்கக்கூடும், குறிப்பாக சிக்கலான லேஅவுட்களில்.
• வலமிருந்து இடமாக (RTL) மொழிகள்: அரபு அல்லது ஹீப்ரு போன்ற RTL மொழிகளுக்காக வடிவமைக்கும்போது, ​​உங்கள் கன்டெய்னர் குவரிகள் லேஅவுட் மிரரிங்கை சரியாகக் கையாள்வதை உறுதிசெய்க. `margin-left` மற்றும் `margin-right` போன்ற பண்புகளை மாறும் வகையில் சரிசெய்ய வேண்டியிருக்கலாம்.

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

கன்டெய்னர் குவரிகள் Chrome, Firefox, Safari மற்றும் Edge உள்ளிட்ட நவீன பிரவுசர்களில் நல்ல ஆதரவைக் கொண்டுள்ளன. இருப்பினும், நீங்கள் பழைய பிரவுசர்களை ஆதரிக்க வேண்டும் என்றால், @container-style/container-query போன்ற ஒரு பாலிஃபில்லைப் பயன்படுத்தலாம். இந்த பாலிஃபில், கன்டெய்னர் குவரிகளை இயல்பாக ஆதரிக்காத பிரவுசர்களுக்கு ஆதரவைச் சேர்க்கிறது.

ஒரு தயாரிப்பு சூழலில் கன்டெய்னர் குவரிகளைப் பயன்படுத்துவதற்கு முன்பு, தற்போதைய பிரவுசர் ஆதரவைச் சரிபார்த்து, தேவைப்பட்டால் ஒரு பாலிஃபில்லைப் பயன்படுத்துவதைக் கருத்தில் கொள்வது எப்போதும் ஒரு நல்ல யோசனையாகும்.

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

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

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

கன்டெய்னர் குவரிகள் vs. மீடியா குவரிகள்: ஒரு ஒப்பீடு

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

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

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

CSS லேஅவுட்களின் எதிர்காலம்

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

முடிவுரை

கன்டெய்னர் குவரிகள் CSS நிலப்பரப்பில் ஒரு சக்திவாய்ந்த সংযোজন ஆகும், இது ரெஸ்பான்சிவ் வடிவமைப்பிற்கு ஒரு கூறு-மைய அணுகுமுறையை வழங்குகிறது. அவை எவ்வாறு செயல்படுகின்றன மற்றும் அவற்றை எவ்வாறு திறம்படப் பயன்படுத்துவது என்பதைப் புரிந்துகொள்வதன் மூலம், நீங்கள் மேலும் மாற்றியமைக்கக்கூடிய, மீண்டும் பயன்படுத்தக்கூடிய மற்றும் பராமரிக்கக்கூடிய வலைப் பயன்பாடுகளை உருவாக்கலாம். கன்டெய்னர் குவரிகளைத் தழுவி, உங்கள் CSS லேஅவுட்களில் ஒரு புதிய நிலை நெகிழ்வுத்தன்மையைத் திறக்கவும்!