कंटेनर शैली संबंधी प्रश्नों के शुरुआती दिन

कंटेनर प्रश्नों के साथ हम अभी भी शुरुआती दिनों में हैं। व्यापक ब्राउज़र समर्थन के लिए बहुत जल्दी, लेकिन क्रोमियम पहले से ही इसका समर्थन करता है, सफारी संस्करण 16 . में इसका समर्थन करना शुरू किया, और फ़ायरफ़ॉक्स संभवतः है बहुत पीछे नहीं.

कंटेनर प्रश्नों के इर्द-गिर्द घूमने वाले अधिकांश शुरुआती दिनों की बातचीत में आमतौर पर सिंटैक्स की तुलना मीडिया क्वेरी से की जाती है।

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

इन दोनों के लिए पूछताछ कर रहे हैं min-width: 600. अंतर यह है कि मीडिया क्वेरी उन शैली परिवर्तनों को ट्रिगर करने के लिए व्यूपोर्ट की चौड़ाई को देख रही है जबकि कंटेनर क्वेरी की गणना की गई चौड़ाई को देख रही है .posts तत्व। मीठा!

लेकिन सुनने के बाद सीएसएस पॉडकास्ट एपिसोड 59, ऊना और एडम ने कंटेनर प्रश्नों के भविष्य पर विचार किया: शैली संबंधी प्रश्न! CSS कंटेनमेंट मॉड्यूल लेवल 3 स्पेक का वर्तमान वर्किंग ड्राफ्ट कंटेनर शैली प्रश्नों को परिभाषित करता है:

A कंटेनर शैली क्वेरी क्वेरी करने की अनुमति देता है परिकलित मान का क्वेरी कंटेनर. यह व्यक्ति का एक बूलियन संयोजन है शैली की विशेषताएं () कि प्रत्येक क्वेरी कंटेनर की एकल, विशिष्ट संपत्ति को क्वेरी करता है।

लेकिन सिंटैक्स पर अभी तक कोई उदाहरण नहीं - केवल एक संक्षिप्त विवरण:

a . का सिंटैक्स  a . के समान है घोषणा, और इसकी क्वेरी सत्य है यदि क्वेरी कंटेनर पर दी गई संपत्ति का परिकलित मूल्य दिए गए मान से मेल खाता है (जिसे क्वेरी कंटेनर के संबंध में भी गणना की जाती है), अज्ञात यदि संपत्ति या उसका मूल्य अमान्य या असमर्थित है, और अन्यथा गलत है . बूलियन सिंटैक्स और तर्क संयोजन शैली की विशेषताएं एक में शैली क्वेरी के लिए ही है सीएसएस सुविधा प्रश्न. (देखें @ मुख्य.)

तो, हाँ, दिए गए समय में हमें कुछ इस तरह की उम्मीद करनी चाहिए:

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

यह एक बहुत ही गूंगा उदाहरण है। एक बात ध्यान देने वाली है कि container-type अब कंटेनर पर आधारित नहीं है inline-size लेकिन द्वारा style. हम इसे इस तरह से हटा सकते हैं:

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

…परंतु सभी कंटेनर प्रश्न हैं style डिफ़ॉल्ट रूप से प्रश्न. कुंआ। कम से कम आज के रूप में खड़ा है। मिरियम सुज़ैन के पास एक अच्छा है संभावित मुद्दों की रूपरेखा जो पॉप अप हो सकती है उस के साथ।

कंटेनर की शैलियों को क्वेरी करना कहां काम आ सकता है? मैं अभी नहीं जानता! लेकिन मेरा दिमाग कुछ जगहों पर जाता है:

• कस्टम प्रॉपर्टी मान: हमने राज्य संकेतकों की तरह उपयोग किए जाने वाले कस्टम गुण देखे हैं, जैसे कि DRY-स्विचिंग विधि एना ने कुछ समय पहले कवर किया था. मान बदलता है, और इसलिए शैलियाँ।
• वैकल्पिक डार्क मोड दृष्टिकोण: यह सब एक बॉडी क्लास परिवर्तन पर आधारित करने के बजाय, जो कस्टम प्रॉपर्टी वैल्यू को फिर से असाइन करता है, हो सकता है कि हम पूरे रंग पैलेट को बदल सकें, अगर कहें, बॉडी बैकग्राउंड रंग बदलता है।
• अधिक जटिल क्वेरी शर्तें: जैसे, मान लीजिए, हम शैलियों को तब लागू करना चाहते हैं जब size और style कंटेनर के लिए शर्तें पूरी की जाती हैं।

ऊना ने सीएसएस पॉडकास्ट में यह भी उल्लेख किया है कि कंटेनर शैली के प्रश्न कुछ अजीब स्टाइलिंग स्थितियों को रोकने में मदद कर सकते हैं, जैसे कि अगर हमारे पास पहले से ही इटैलिकाइज़्ड टेक्स्ट में इटैलिकाइज़्ड टेक्स्ट है blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}