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 ను ఉపయోగించండి. ఉదాహరణకు, మీరు పేజీలోని ఒక నిర్దిష్ట సెక్షన్‌లో ఉన్న కంటైనర్‌లు తప్ప అన్ని కంటైనర్‌లకు ఒక నిర్దిష్ట స్టైల్‌ను వర్తింపజేయవచ్చు.

సంక్లిష్ట పరిస్థితుల కోసం లాజికల్ ఆపరేటర్లను కలపడం

కంటైనర్ క్వెరీ లాజికల్ ఆపరేటర్ల యొక్క నిజమైన శక్తి సంక్లిష్ట పరిస్థితులను సృష్టించడానికి వాటిని కలపడం నుండి వస్తుంది. జావాస్క్రిప్ట్ లేదా ఇతర ప్రోగ్రామింగ్ భాషలలో మీరు చేసే విధంగానే, షరతులను సమూహపరచడానికి మరియు మూల్యాంకన క్రమాన్ని నియంత్రించడానికి మీరు కుండలీకరణాలను (parentheses) ఉపయోగించవచ్చు.

ఉదాహరణ: ఒక కంటైనర్ 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 కంటైనర్ క్వెరీలలో, and కు or కంటే ఎక్కువ ప్రాధాన్యత ఉంటుంది. అంటే (A or B) and C అనేది A or (B and C) నుండి భిన్నంగా ఉంటుంది. మూల్యాంకన క్రమాన్ని స్పష్టంగా నిర్వచించడానికి మరియు అస్పష్టతను నివారించడానికి కుండలీకరణాలను ఉపయోగించండి.
• చదవడానికి అనువుగా ఉండటం: సంక్లిష్ట పరిస్థితులు చదవడానికి మరియు అర్థం చేసుకోవడానికి కష్టంగా మారవచ్చు. చదవడానికి మరియు నిర్వహించడానికి అనువుగా ఉండేలా సంక్లిష్ట పరిస్థితులను కుండలీకరణాలు మరియు వ్యాఖ్యలను ఉపయోగించి చిన్న, మరింత నిర్వహించదగిన భాగాలుగా విభజించండి.
• పరీక్షించడం: మీ కంటైనర్ క్వెరీలు ఊహించిన విధంగా ప్రవర్తిస్తున్నాయని నిర్ధారించుకోవడానికి విభిన్న కంటైనర్ పరిమాణాలు మరియు స్థితులతో వాటిని క్షుణ్ణంగా పరీక్షించండి. వర్తింపజేయబడిన స్టైల్స్‌ను తనిఖీ చేయడానికి మరియు సరైన నియమాలు వర్తిస్తున్నాయో లేదో ధృవీకరించడానికి బ్రౌజర్ డెవలపర్ టూల్స్‌ను ఉపయోగించండి.

నిజ-ప్రపంచ ఉదాహరణలు మరియు వినియోగ సందర్భాలు

అనుకూల మరియు రెస్పాన్సివ్ లేఅవుట్‌లను సృష్టించడానికి మీరు కంటైనర్ క్వెరీ లాజికల్ ఆపరేటర్లను ఎలా ఉపయోగించవచ్చో కొన్ని నిజ-ప్రపంచ ఉదాహరణలను పరిశీలిద్దాం.

ఉదాహరణ 1: ఒక ఫ్లెక్సిబుల్ కార్డ్ కాంపోనెంట్

దాని వెడల్పును బట్టి విభిన్న మార్గాల్లో సమాచారాన్ని ప్రదర్శించే ఒక కార్డ్ కాంపోనెంట్‌ను పరిగణించండి. కార్డ్ యొక్క లేఅవుట్ మరియు రూపాన్ని నియంత్రించడానికి మనం లాజికల్ ఆపరేటర్లతో కంటైనర్ క్వెరీలను ఉపయోగించవచ్చు.

            
<div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Image">
    <h3>Card Title</h3>
    <p>Card Description</p>
    <a href="#">Learn More</a>
  </div>
</div>

            

              
                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: ఒక రెస్పాన్సివ్ నావిగేషన్ మెనూ

మరొక ఆచరణాత్మక ఉదాహరణ అందుబాటులో ఉన్న స్థలం ఆధారంగా అనుగుణంగా ఉండే రెస్పాన్సివ్ నావిగేషన్ మెనూ. ఒక కాంపాక్ట్, ఐకాన్-ఆధారిత మెనూ మరియు పూర్తి టెక్స్ట్-ఆధారిత మెనూ మధ్య మారడానికి మనం కంటైనర్ క్వెరీలను ఉపయోగించవచ్చు.

            
<nav class="nav-container">
  <ul>
    <li><a href="#home"><i class="fa fa-home"></i> <span>Home</span></a></li>
    <li><a href="#about"><i class="fa fa-info-circle"></i> <span>About</span></a></li>
    <li><a href="#services"><i class="fa fa-wrench"></i> <span>Services</span></a></li>
    <li><a href="#contact"><i class="fa fa-envelope"></i> <span>Contact</span></a></li>
  </ul>
</nav>

            

              
                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) వ్రాసే భాషలకు మద్దతు ఇచ్చే అంతర్జాతీయ వెబ్‌సైట్‌లకు ఇది ప్రత్యేకంగా ముఖ్యం.

            
<div class="article-container" dir="ltr">
  <article class="article">
    <h1>Article Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
  </article>
</div>

            

              
                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' లను కలపడం ద్వారా, మీరు నిర్దిష్ట కంటైనర్ స్థితులను టార్గెట్ చేసే సంక్లిష్ట పరిస్థితులను సృష్టించవచ్చు మరియు తదనుగుణంగా స్టైల్స్‌ను వర్తింపజేయవచ్చు. ఇది మీ లేఅవుట్‌లపై మరింత సూక్ష్మమైన నియంత్రణను అనుమతిస్తుంది మరియు నిజంగా కాంపోనెంట్-ఆధారిత రెస్పాన్సివ్ డిజైన్‌ను సాధ్యం చేస్తుంది.

కంటైనర్ క్వెరీ మద్దతు పెరుగుతూనే ఉన్నందున, ఈ టెక్నిక్‌లలో నైపుణ్యం సాధించడం ఫ్రంట్-ఎండ్ డెవలపర్‌లకు మరింత ముఖ్యమవుతుంది. ఈ గైడ్‌లో వివరించిన ఉత్తమ పద్ధతులను అనుసరించడం ద్వారా మరియు విభిన్న వినియోగ సందర్భాలతో ప్రయోగాలు చేయడం ద్వారా, మీరు కంటైనర్ క్వెరీల యొక్క పూర్తి సామర్థ్యాన్ని అన్‌లాక్ చేయవచ్చు మరియు విస్తృత శ్రేణి పరికరాలు మరియు సందర్భాలలో అసాధారణమైన వినియోగదారు అనుభవాలను సృష్టించవచ్చు.

కంటైనర్ క్వెరీ లాజిక్ యొక్క ఫ్లెక్సిబిలిటీని స్వీకరించండి మరియు మీ రెస్పాన్సివ్ డిజైన్ నైపుణ్యాలను తదుపరి స్థాయికి తీసుకెళ్లండి!