कंटेनर स्टाइल प्रश्नों में गहराई से खुदाई

मैंने कुछ लिखा कंटेनर शैली प्रश्नों पर प्रारंभिक विचार थोड़ी देर पहले। अभी शुरुआती दिन हैं। वे पहले से ही में परिभाषित हैं सीएसएस कंटेनमेंट मॉड्यूल स्तर 1 विनिर्देश (वर्तमान में संपादक की ड्राफ्ट स्थिति में) लेकिन अभी भी कुछ उत्कृष्ट चर्चाएँ हो रही हैं।

मूल विचार यह है कि हम एक कंटेनर को परिभाषित कर सकते हैं और फिर इसकी गणना की गई स्टाइल के आधार पर इसके वंश के लिए सशर्त रूप से शैलियों को लागू कर सकते हैं।

@container ?  {
  /* conditional styles */
}

मैंने अब तक जो सबसे अच्छा उदाहरण देखा है, वह कुछ इस तरह से इटैलिक हटा रहा है , , तथा जब उनका उपयोग ऐसे संदर्भ में किया जाता है जहां सामग्री पहले से ही इटैलिकाइज़ की गई हो:

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

यह सामान्य विचार है। लेकिन अगर आप इसे नहीं जानते हैं, मरियम सुज़ैन, जो कल्पना के संपादक हैं, का एक सतत और संपूर्ण सेट रखते हैं कंटेनर शैली प्रश्नों पर व्यक्तिगत नोट्स जो सार्वजनिक रूप से उपलब्ध है। इसे दूसरे दिन अपडेट किया गया था और मैंने वहां कुछ समय बिताया और स्टाइल प्रश्नों के अधिक सूक्ष्म पहलुओं के बारे में अपने सिर को लपेटने की कोशिश की। यह अनौपचारिक चीजें हैं, लेकिन मैंने सोचा कि मैं कुछ चीजें लिखूंगा जो मेरे लिए अलग थीं। कौन जाने? शायद यह वह सामान है जिसकी हम अंततः प्रतीक्षा कर सकते हैं!

प्रत्येक तत्व एक स्टाइल कंटेनर है

हमें स्पष्ट रूप से असाइन करने की भी आवश्यकता नहीं है container-name or container-type स्टाइल कंटेनर को परिभाषित करने के लिए क्योंकि सब कुछ डिफ़ॉल्ट रूप से एक स्टाइल कंटेनर है।

तो, आप उस उदाहरण को ऊपर देखते हैं जो इटैलिक को हटा देता है? ध्यान दें कि यह एक कंटेनर की पहचान नहीं करता है। यह सीधे क्वेरी का उपयोग करके कूदता है style() समारोह। तो, किस कंटेनर से पूछताछ की जा रही है? यह होने जा रहा है तत्वों का प्रत्यक्ष जनक लागू शैलियों को प्राप्त करना। और अगर ऐसा नहीं है, तो है अगला निकटतम रिश्तेदार कंटेनर जो पूर्वता लेता है।

मुझे वह पसंद है। किसी मैच के लिए खोज करने के लिए क्वेरी के लिए यह बहुत CSS-y है, फिर तब तक बुलबुला करना जारी रखें जब तक कि उसे मिलान की स्थिति न मिल जाए।

मेरे छोटे से दिमाग के लिए यह समझना कठिन था कि हम शैलियों के आधार पर एक अंतर्निहित कंटेनर से दूर क्यों हो सकते हैं लेकिन इतना नहीं जब हम आयामी प्रश्नों से निपट रहे हों, जैसे size और inline-size. मरियम इसे अच्छी तरह से समझाती है:

आयामी प्रश्नों के लिए css की आवश्यकता होती है रोकथाम लेआउट लूप को रोकने के लिए कंटेनर के आकार, लेआउट और शैली पर। व्यापक रूप से लागू करने के लिए रोकथाम एक आक्रामक चीज है, इसलिए यह महत्वपूर्ण था कि लेखकों का इस बात पर सावधानीपूर्वक नियंत्रण हो कि कौन से तत्व आकार के कंटेनर हैं (या नहीं हैं)।

शैली-आधारित प्रश्नों की समान सीमाएँ नहीं हैं। पूर्वजों की गणना की गई शैलियों पर प्रभाव डालने के लिए वंशज शैलियों के लिए सीएसएस में पहले से ही कोई रास्ता नहीं है। इसलिए किसी नियंत्रण की आवश्यकता नहीं है, और किसी तत्व को एक के रूप में स्थापित करने में कोई आक्रामक या अप्रत्याशित दुष्प्रभाव नहीं हैं शैली क्वेरी कंटेनर.

(जोर मेरा)

यह सब परिणामों के लिए नीचे आता है - जिनमें से कुछ भी नहीं है जहाँ तक सब कुछ बॉक्स के ठीक बाहर एक स्टाइल क्वेरी कंटेनर है।

• यदि एक कंटेनर पाया जाता है: उस कंटेनर के विरुद्ध शर्तों का समाधान किया जाता है।
• यदि एकाधिक कंटेनर मेल खाते हैं: निकटतम रिश्तेदार कंटेनर को प्राथमिकता दी जाती है।
• यदि कोई मिलान नहीं मिलता है: unknown लौटा हुआ।

वही है शेष सीएसएस के रूप में "क्षमा करने" की भावना.

एक कंटेनर आयामी और शैली दोनों प्रश्नों का समर्थन कर सकता है

मान लीजिए कि हम बिना किसी स्पष्ट शैली की क्वेरी को परिभाषित करना चाहते हैं container-name:

@container style(font-style: italic) {
  em {
    font-style: normal;
  }
}

यह काम करता है क्योंकि सभी तत्व स्टाइल कंटेनर हैंकोई बात नहीं container-type. यही वह है जो हमें निहित रूप से क्वेरी शैलियों और निकटतम मैच पर भरोसा करने की अनुमति देता है। और यह पूरी तरह से ठीक है, फिर से, स्टाइल कंटेनर स्थापित करते समय कोई प्रतिकूल दुष्प्रभाव नहीं होते हैं।

हमें एक स्पष्ट का उपयोग करना होगा container-type आयामी प्रश्नों के लिए, लेकिन शैली प्रश्नों के लिए इतना नहीं, क्योंकि प्रत्येक तत्व एक शैली क्वेरी है। इसका मतलब यह भी है कि यह कंटेनर दोनों ही एक स्टाइल है और आयामी क्वेरी:

.card-container {
  container: card / inline-size; /* implictly a style query container as well */
}

एक कंटेनर को पूछताछ से बाहर करना

शायद हम नहीं चाहते कि कोई कंटेनर मिलान प्रक्रिया में भाग ले। यहीं पर सेट करना संभव हो सकता है container-type: none एक तत्व पर।

.some-element {
  container-type: none;
}

स्पष्ट शैली के क्वेरी कंटेनर क्वेरी किए जाने पर अधिक नियंत्रण प्रदान करते हैं

अगर, कहें, तो हमें स्टाइल क्वेरी लिखनी थी padding , सर्वोत्तम मेल खाने वाले कंटेनर का निर्धारण करने का कोई विश्वसनीय तरीका नहीं है, भले ही हम स्पष्ट रूप से नामित कंटेनर या निकटतम प्रत्यक्ष माता-पिता के साथ काम कर रहे हों। ऐसा है क्योंकि padding विरासत में मिली संपत्ति नहीं है।

इसलिए, उन मामलों में, हमें उपयोग करना चाहिए container-name ब्राउजर को स्पष्ट रूप से सूचित करने के लिए कि वे किस कंटेनर से खींच सकते हैं। हम एक कंटेनर को कई स्पष्ट नाम भी दे सकते हैं ताकि यह और अधिक शर्तों से मेल खा सके:

.card {
  container-name: card layout theme;
}

ओह, और container-name वैकल्पिक और की किसी भी संख्या को स्वीकार करता है पुन: प्रयोज्य एक कंटेनर के लिए नाम! जब मिलानों की खोज करते समय ब्राउज़र को चुनाव करने में मदद करने की बात आती है तो यह और भी अधिक लचीला होता है।

.theme {
  container-name: theme;
}
.grid {
  container-name: layout;
}
.card {
  container-name: card layout theme;
}

मुझे आश्चर्य है कि अगर एक कंटेनर को पार कर जाने की स्थिति में इसे "फॉलबैक" भी माना जा सकता है।

शैली प्रश्नों को जोड़ा जा सकता है

RSI or और and ऑपरेटर हमें चीजों को सूखा रखने के लिए वूरीज़ को संयोजित करने की अनुमति देते हैं:

@container bubble style(--arrow-position: start start) or style(--arrow-position: end start) {
  .bubble::after {
    border-block-end-color: inherit;
    inset-block-end: 100%;
  }
}

/* is the same as... */
@container bubble style(--arrow-position: start start) {
  /* etc. */
}
@container bubble style(--arrow-position: end start) {
  /* etc. */
}

टॉगल करने वाली शैलियाँ

कंटेनर शैली प्रश्नों और के बीच थोड़ा ओवरलैप है क को परिभाषित करने का कार्य किया जा रहा है toggle() समारोह. उदाहरण के लिए, हम दो के माध्यम से साइकिल चला सकते हैं font-style मूल्य, कहते हैं italic और normal:

em, i, q {
  font-style: italic;
}

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

ठंडा। लेकिन सीएसएस टॉगल के प्रस्ताव से पता चलता है कि toggle() कार्य एक सरल दृष्टिकोण होगा:

em, i, q {
  font-style: toggle(italic, normal);
}

लेकिन इस तरह के द्विआधारी उपयोग के मामले से परे कुछ भी है toggle() कम उपयुक्त है। शैली संबंधी प्रश्न, हालांकि, जाने के लिए अच्छे हैं। मरियम तीन उदाहरणों की पहचान करती है जहां शैली संबंधी प्रश्न एक से अधिक उपयुक्त होते हैं toggle():

/* When font-style is italic, apply background color. */
/* Toggles can only handle one property at a time. */
@container style(font-style: italic) {
  em, i, q {
    background: lightpink;
  }
}

/* When font-style is italic and --color-mode equals light */
/* Toggles can only evaluate one condition at a time */
@container style((font-style: italic) and (--color-mode: light)) {
  em, i, q {
    background: lightpink;
  }
}

/* Apply the same query condition to multiple properties */
/* Toggles have to set each one individually as separate toggles */
@container style(font-style: italic) {
  em, i, q {
    /* clipped gradient text */
    background: var(--feature-gradient);
    background-clip: text;
    box-decoration-break: clone;
    color: transparent;
    text-shadow: none;
  }
}

स्टाइल क्वेरीज़ "कस्टम प्रॉपर्टी टॉगल हैक" को हल करती हैं

ध्यान दें कि शैली संबंधी प्रश्न इसके लिए एक औपचारिक समाधान हैं "सीएसएस कस्टम संपत्ति टॉगल चाल". वहां, हम एक खाली कस्टम गुण सेट करते हैं (--foo: ;) और कॉमा-सेपरेटेड फ़ॉलबैक मेथड को "टॉगल" प्रॉपर्टीज को चालू और बंद करने के लिए उपयोग करें, जब कस्टम प्रॉपर्टी को वास्तविक मान पर सेट किया जाता है।

button {
  --is-raised: ; /* off by default */
  
  border: 1px solid var(--is-raised, rgb(0 0 0 / 0.1));
  box-shadow: var(
    --is-raised,
    0 1px hsl(0 0% 100% / 0.8) inset,
    0 0.1em 0.1em -0.1em rgb(0 0 0 / 0.2)
  );
  text-shadow: var(--is-raised, 0 -1px 1px rgb(0 0 0 / 0.3));
}

button:active {
  box-shadow: var(--is-raised, 0 1px 0.2em black inset);
}

#foo {
  --is-raised: initial; /* turned on, all fallbacks take effect. */
}

यह बहुत अच्छा है, बहुत सारे काम भी हैं जो स्टाइल कंटेनर प्रश्नों को तुच्छ बनाते हैं।

शैली संबंधी प्रश्न और सीएसएस उत्पन्न सामग्री

द्वारा उत्पादित सामग्री के लिए content की संपत्ति ::before और ::after छद्म-तत्व, मिलान करने वाला कंटेनर वह तत्व है जिस पर सामग्री उत्पन्न होती है।

.bubble {
  --arrow-position: end end;
  container: bubble;
  border: medium solid green;
  position: relative;
}

.bubble::after {
  content: "";
  border: 1em solid transparent;
  position: absolute;
}

@container bubble style(--arrow-position: end end) {
  .bubble::after {
    border-block-start-color: inherit;
    inset-block-start: 100%;
    inset-inline-end: 1em;
  }
}

शैली संबंधी प्रश्न और वेब घटक

हम एक वेब घटक को एक कंटेनर के रूप में परिभाषित कर सकते हैं और इसे शैली से पूछ सकते हैं। सबसे पहले, हमारे पास है घटक का:

  

    

      …
    
    

      …
      …
    
  

तब हम का उपयोग करते हैं :host एक सेट करने के लिए एक कंटेनर के रूप में छद्म तत्व container-nameतक container-type, और उस पर कुछ उच्च-स्तरीय विशेषताएँ:

:host {
  container: media-host / inline-size;
  --media-location: before;
  --media-style: square;
  --theme: light;
}

अंदर के तत्व के पैरामीटर्स को क्वेरी कर सकता है तत्व:

@container media-host style(--media-style: round) {
  [part='img'] {
    border-radius: 100%;
  }
}

आगे क्या होगा?

दोबारा, मैंने यहां जो कुछ भी लिखा है, वह मरियम के नोटों पर आधारित है, और वे नोट आधिकारिक कल्पना का विकल्प नहीं हैं। लेकिन वे इस बात का संकेत हैं कि क्या चर्चा की जा रही है और भविष्य में चीजें कहां आ सकती हैं। मैं मरियम की सराहना करता हूं कि अभी भी हो रही कुछ उत्कृष्ट चर्चाओं को जोड़ा गया है जिनका पालन करके हम चीजों के शीर्ष पर बने रह सकते हैं: