CSS கண்டெய்னர் ஸ்டைல் வினவல்கள்: உலகளாவிய பயன்பாடுகளுக்கான ஸ்டைல்-அடிப்படையிலான ரெஸ்பான்சிவ் வடிவமைப்பு

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

CSS கண்டெய்னர் ஸ்டைல் வினவல்கள் என்றால் என்ன?

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

இதை இப்படி யோசித்துப் பாருங்கள்: "வியூபோர்ட் 768px விட அகலமாக உள்ளதா?" என்று கேட்பதற்குப் பதிலாக, "இந்த கண்டெய்னரில் --theme: dark; என்ற கஸ்டம் ப்ராப்பர்ட்டி அமைக்கப்பட்டுள்ளதா?" என்று கேட்கலாம். இது உங்கள் வலைத்தளம் அல்லது பயன்பாடு முழுவதும் வெவ்வேறு தீம்கள், லேஅவுட்கள் அல்லது பிராண்டிங் மாறுபாடுகளுக்கு ஏற்ப தடையின்றி மாற்றியமைக்கக்கூடிய நெகிழ்வான மற்றும் மீண்டும் பயன்படுத்தக்கூடிய கூறுகளை உருவாக்குவதற்கான ஒரு புதிய உலகத்தைத் திறக்கிறது.

கண்டெய்னர் ஸ்டைல் வினவல்களின் நன்மைகள்

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

CSS கண்டெய்னர் ஸ்டைல் வினவல்களை எவ்வாறு பயன்படுத்துவது

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

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

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

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

inline-size மதிப்பு மிகவும் பொதுவானது மற்றும் பயனுள்ளது, ஏனெனில் இது கண்டெய்னர் அதன் இன்லைன் (கிடைமட்ட) அளவை வினவ அனுமதிக்கிறது. நீங்கள் size ஐயும் பயன்படுத்தலாம், இது இன்லைன் மற்றும் பிளாக் அளவு இரண்டையும் வினவுகிறது. நீங்கள் கவனமாக இல்லையென்றால், size ஐ மட்டும் பயன்படுத்துவது செயல்திறன் தாக்கங்களை ஏற்படுத்தக்கூடும்.

மாற்றாக, ஸ்டைல் வினவல்களுக்கு மட்டும் ஒரு கண்டெய்னரைப் பயன்படுத்த container-type: style ஐப் பயன்படுத்தவும், அளவு வினவல்களுக்கு அல்ல, அல்லது இரண்டையும் பயன்படுத்த container-type: size style ஐப் பயன்படுத்தவும். கண்டெய்னர் பெயரைக் கட்டுப்படுத்த, container-name: my-container ஐப் பயன்படுத்தி, பின்னர் அதை @container my-container (...) மூலம் இலக்கு வைக்கவும்.

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

இப்போது, ஒரு குறிப்பிட்ட நிபந்தனை பூர்த்தி செய்யப்படும்போது பொருந்தும் ஸ்டைல்களை வரையறுக்க @container style() at-rule-ஐப் பயன்படுத்தலாம்:

@container style(--theme: dark) {
  .component {
    background-color: #333;
    color: #fff;
  }
}

இந்த எடுத்துக்காட்டில், @container விதிக்குள் உள்ள ஸ்டைல்கள், அதன் கண்டெய்னர் உறுப்பில் --theme கஸ்டம் ப்ராப்பர்ட்டி dark என அமைக்கப்பட்டிருந்தால் மட்டுமே .component உறுப்புக்கு பயன்படுத்தப்படும்.

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

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

<div class="container" style="--theme: dark;">
  <div class="component">இது ஒரு கூறு. </div>
</div>

இந்த எடுத்துக்காட்டில், .component ஒரு இருண்ட பின்னணி மற்றும் வெள்ளை உரையைக் கொண்டிருக்கும், ஏனெனில் அதன் கண்டெய்னரில் --theme: dark; ஸ்டைல் நேரடியாக HTML இல் (எளிமைக்காக) பயன்படுத்தப்பட்டுள்ளது. CSS வகுப்புகள் வழியாக ஸ்டைல்களைப் பயன்படுத்துவதே சிறந்த நடைமுறை. கண்டெய்னரில் உள்ள ஸ்டைல்களை மாறும் வகையில் மாற்ற JavaScript-ஐப் பயன்படுத்தலாம், இது ஸ்டைல் வினவல் புதுப்பிப்புகளைத் தூண்டும்.

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

1. தீம் செய்யப்பட்ட கூறுகள்

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

/* CSS */
.app-container {
  --theme: light;
}

@container style(--theme: dark) {
  .card {
    background-color: #333;
    color: #fff;
  }
}

@container style(--theme: light) {
  .card {
    background-color: #f0f0f0;
    color: #333;
  }
}

/* HTML */
<div class="app-container" style="--theme: dark;">
  <div class="card">
    <h2>அட்டை தலைப்பு</h2>
    <p>அட்டை உள்ளடக்கம்.</p>
  </div>
</div>

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

2. லேஅவுட் மாறுபாடுகள்

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

/* CSS */
.navigation {
  --layout: compact;
}

.footer {
  --layout: expanded;
}

@container style(--layout: compact) {
  .language-selector {
    /* சிறிய டிராப்டவுனுக்கான ஸ்டைல்கள் */
  }
}

@container style(--layout: expanded) {
  .language-selector {
    /* மொழிகளின் முழு பட்டியலுக்கான ஸ்டைல்கள் */
  }
}

/* HTML */
<nav class="navigation" style="--layout: compact;">
  <div class="language-selector">...

<footer class="footer" style="--layout: expanded;">
  <div class="language-selector">...

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

3. உள்ளடக்க வகைக்கு ஏற்ப மாற்றுதல்

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

/* CSS */
.article-summary {
  --has-image: false;
}

@container style(--has-image: true) {
  .article-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

/* HTML (படத்துடன்) */
<div class="article-summary" style="--has-image: true;">
  <img src="..." alt="..." />
  <div>...
</div>

/* HTML (படம் இல்லாமல்) */
<div class="article-summary" style="--has-image: false;">
  <div>...
</div>

இது கட்டுரைச் சுருக்கங்களின் மிகவும் கவர்ச்சிகரமான மற்றும் தகவல் நிறைந்த தோற்றத்தை செயல்படுத்துகிறது, பயனர் அனுபவத்தை மேம்படுத்துகிறது. HTML இல் நேரடியாக `--has-image` பண்பை அமைப்பது சிறந்ததல்ல என்பதை நினைவில் கொள்க. ஒரு படம் இருப்பதைக் கண்டறிந்து, `.article-summary` உறுப்புக்கு ஒரு வகுப்பை (`.has-image` போன்றவை) மாறும் வகையில் சேர்க்க அல்லது அகற்ற JavaScript-ஐப் பயன்படுத்துவது ஒரு சிறந்த அணுகுமுறையாக இருக்கும், பின்னர் `.has-image` வகுப்பிற்கான CSS விதிக்குள் `--has-image` கஸ்டம் ப்ராப்பர்ட்டியை அமைக்கலாம்.

4. உள்ளூர்மயமாக்கப்பட்ட ஸ்டைலிங்

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

/* CSS */
.locale-container {
  --language: en;
}

@container style(--language: ja) {
  .text {
    font-size: 1.1em;
    letter-spacing: 0.05em;
  }
}

@container style(--language: ar) {
  .text {
    direction: rtl;
  }
}

/* HTML */
<div class="locale-container" style="--language: ja;">
  <p class="text">...</p>
</div>

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

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

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

/* CSS */
body {
  --high-contrast: false;
}

@media (prefers-contrast: more) {
  body {
    --high-contrast: true;
  }
}

@container style(--high-contrast: true) {
  .component {
    background-color: black;
    color: white;
  }
}

/* HTML */
<div class="component">...

இது உங்கள் வலைத்தளம் அனைவருக்கும், அவர்களின் திறன்களைப் பொருட்படுத்தாமல், பயன்படுத்தக்கூடியதாகவும் அணுகக்கூடியதாகவும் இருப்பதை உறுதி செய்கிறது. இயக்க முறைமை மட்டத்தில் உயர் கான்ட்ராஸ்ட் பயன்முறையைக் கண்டறிய `@media (prefers-contrast: more)` மீடியா வினவல் பயன்படுத்தப்படுவதைக் கவனியுங்கள், பின்னர் `--high-contrast` கஸ்டம் ப்ராப்பர்ட்டி அமைக்கப்படுகிறது. இது பயனரின் கணினி அமைப்புகளின் அடிப்படையில் ஸ்டைல் வினவலைப் பயன்படுத்தி ஸ்டைல் மாற்றங்களைத் தூண்ட உங்களை அனுமதிக்கிறது.

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

• விளக்கமான கஸ்டம் ப்ராப்பர்ட்டி பெயர்களைப் பயன்படுத்தவும்: பண்பின் நோக்கத்தைத் தெளிவாகக் குறிக்கும் பெயர்களைத் தேர்வுசெய்யவும் (எ.கா., --t என்பதற்குப் பதிலாக --theme).
• ஸ்டைல் வினவல்களை எளிமையாக வைக்கவும்: வாசிப்புத்திறன் மற்றும் செயல்திறனைப் பராமரிக்க ஸ்டைல் வினவல்களுக்குள் சிக்கலான தர்க்கத்தைத் தவிர்க்கவும்.
• ஒரு திடமான அடித்தளத்துடன் தொடங்கவும்: அடிப்படை லேஅவுட் மற்றும் ஸ்டைலிங்கிற்காக பாரம்பரிய CSS மற்றும் மீடியா வினவல்களைப் பயன்படுத்தவும். கண்டெய்னர் ஸ்டைல் வினவல்கள் உங்கள் தற்போதைய CSS-ஐ மேம்படுத்த வேண்டுமே தவிர, மாற்றக்கூடாது.
• செயல்திறனைக் கருத்தில் கொள்ளுங்கள்: கண்டெய்னர் ஸ்டைல் வினவல்கள் பொதுவாக திறமையானவை என்றாலும், நீங்கள் பயன்படுத்தும் வினவல்களின் எண்ணிக்கை மற்றும் அவை தூண்டும் ஸ்டைல்களின் சிக்கலான தன்மை குறித்து கவனமாக இருங்கள். அவற்றை அதிகமாகப் பயன்படுத்துவது செயல்திறனைப் பாதிக்கலாம், குறிப்பாக பழைய சாதனங்களில்.
• முழுமையாகச் சோதிக்கவும்: உங்கள் கூறுகள் சரியாக மாற்றியமைக்கின்றனவா என்பதை உறுதிப்படுத்த பல்வேறு சூழல்களிலும் உலாவிகளிலும் அவற்றைச் சோதிக்கவும்.
• ஃபால்பேக்குகளைப் பயன்படுத்தவும்: கண்டெய்னர் ஸ்டைல் வினவல்களை இன்னும் முழுமையாக ஆதரிக்காத உலாவிகளுக்கு ஃபால்பேக் ஸ்டைல்களை வழங்கவும். ஸ்டைல் வினவல் குறியீட்டை நிபந்தனையுடன் பயன்படுத்த ஃபீச்சர் வினவல்கள் (`@supports`) பயன்படுத்தப்படலாம்.
• உங்கள் கூறுகளை ஆவணப்படுத்தவும்: ஒவ்வொரு கூறின் நோக்கம் மற்றும் அது சார்ந்திருக்கும் கஸ்டம் ப்ராப்பர்ட்டிகளை தெளிவாக ஆவணப்படுத்தவும்.
• காஸ்கேடை கருத்தில் கொள்ளுங்கள்: கண்டெய்னர் ஸ்டைல் வினவல்களுக்குள் காஸ்கேட் இன்னும் பொருந்தும் என்பதை நினைவில் கொள்ளுங்கள். உங்கள் ஸ்டைல்களை வரையறுக்கும்போது தனித்தன்மை மற்றும் மரபுரிமை குறித்து அறிந்திருங்கள்.
• JavaScript-ஐ குறைவாகப் பயன்படுத்தவும்: கண்டெய்னரில் ஸ்டைல்களை மாறும் வகையில் மாற்ற JavaScript-ஐப் பயன்படுத்தலாம் என்றாலும், அதன் பயன்பாட்டைக் குறைக்க முயற்சிக்கவும். ஸ்டைலிங் மாற்றங்களுக்கு முடிந்தவரை CSS-ஐ நம்பியிருங்கள்.

உலாவி ஆதரவு

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

முடிவுரை

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

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

ஆதாரங்கள்

• MDN வலை ஆவணங்கள்: CSS கண்டெய்னர் வினவல்கள்
• CSS கண்டெய்னர் ஸ்டைல் வினவல்கள் – ஒரு முதல் பார்வை
• கண்டெய்னர் ஸ்டைல் வினவல்கள் பாலிஃபில்ஸ்