रीडिंग-फ़्लो और डिसप्ले: कॉन्टेंट वाले एलिमेंट के बारे में डेवलपर के सुझाव, शिकायत या राय के लिए अनुरोध करें

Rachel Andrew

हमने पिछले साल, सीएसएस लेआउट और सोर्स ऑर्डर के बीच के अंतर को ठीक करना ब्लॉग पोस्ट पब्लिश की थी. इसमें CSS वर्किंग ग्रुप में चर्चा किए जा रहे एक प्रपोज़ल के बारे में बताया गया है. इसका मकसद, उस समस्या को हल करना है जिसमें फ़्लेक्सबॉक्स और ग्रिड में आइटम का क्रम बदलने से, टैब करने की सुविधा ठीक से काम नहीं करती. पोस्ट के शुरुआती सेक्शन में, उस समस्या के बारे में बताया गया है जिसे वर्किंग ग्रुप हल करने की कोशिश कर रहा है. तब से लेकर अब तक, कई बदलाव हुए हैं. इस पोस्ट में, मौजूदा स्थिति के बारे में खास जानकारी दी गई है. हमें एक खास क्षेत्र में भी आपकी राय चाहिए—हम display-contents वाले आइटम को कैसे मैनेज करें?

प्रस्ताव में किए गए अपडेट

सीएसएस डिसप्ले लेवल 4 के स्पेसिफ़िकेशन में अब ड्राफ़्ट स्पेसिफ़िकेशन टेक्स्ट मौजूद है. इस अपडेट में, reading-flow नाम की एक नई प्रॉपर्टी जोड़ी गई है. इस प्रॉपर्टी को फ़्लेक्स या ग्रिड लेआउट वाले कंटेनिंग एलिमेंट में जोड़ा जाता है. यह display: grid या display: flex वाला एलिमेंट होता है.

इस प्रॉपर्टी के लिए ये वैल्यू इस्तेमाल की जा सकती हैं:

• normal: डीओएम में मौजूद एलिमेंट के क्रम का पालन करें. यह मौजूदा व्यवहार है.
• flex-visual: इसका असर सिर्फ़ फ़्लेक्स कंटेनर पर पड़ता है. यह फ़्लेक्स आइटम के विज़ुअल रीडिंग ऑर्डर को फ़ॉलो करता है. साथ ही, राइटिंग मोड को ध्यान में रखता है.
• flex-flow: इसका असर सिर्फ़ फ़्लेक्स कंटेनर पर पड़ता है. यह फ़्लेक्स-फ़्लो की दिशा के हिसाब से काम करता है.
• grid-rows: इसका असर सिर्फ़ ग्रिड कंटेनर पर पड़ता है. यह ग्रिड आइटम को लाइन के हिसाब से विज़ुअल क्रम में दिखाता है. इसमें राइटिंग मोड को ध्यान में रखा जाता है.
• grid-columns: इसका असर सिर्फ़ ग्रिड कंटेनर पर पड़ता है. यह कॉलम के हिसाब से ग्रिड आइटम के विज़ुअल क्रम का पालन करता है. इसमें लिखने के मोड को ध्यान में रखा जाता है.
• grid-order: इसका असर सिर्फ़ ग्रिड कंटेनर पर पड़ता है. यह order प्रॉपर्टी को ध्यान में रखता है. हालांकि, यह normal की तरह काम करता है.

उदाहरण के लिए, अगर आपके पास किसी कंटेनर में तीन फ़्लेक्स आइटम हैं और आपने उनके flex-direction को row-reverse पर सेट किया है, तो वे फ़्लेक्स कंटेनर के आखिर में लाइन अप हो जाते हैं. साथ ही, टैब का क्रम दाईं से बाईं ओर चला जाता है.

.flex {
  display: flex;
  flex-direction: row-reverse;
}

flex-flow: visual जोड़ने पर, पढ़ने का क्रम अंग्रेज़ी के विज़ुअल ऑर्डर के हिसाब से होगा. इसलिए, यह क्रम बाईं से दाईं ओर होगा.

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

ग्रिड लेआउट में, सोर्स के क्रम के बजाय विज़ुअल रो या कॉलम को फ़ॉलो करने के लिए, reading-flow का इस्तेमाल करें. यहां दिए गए उदाहरण में, पढ़ने का क्रम लाइनों के हिसाब से है.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-areas: "d b b"
                       "c c a";
  reading-flow: grid-rows;
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }

इसे आज़माएं

फ़िलहाल, इस सीएसएस प्रॉपर्टी पर एक्सपेरिमेंट किया जा रहा है. हालांकि, इसे टेस्टिंग के लिए चालू किया जा सकता है. इसे आज़माने के लिए, Chrome Dev या Canary के 128 या इसके बाद वाले वर्शन को इंस्टॉल करें. इसके बाद, रनटाइम फ़्लैग CSSReadingFlow को चालू करें. इस्तेमाल शुरू करने के लिए कुछ उदाहरण दिए गए हैं. ये सभी उदाहरण, फ़्लैग चालू होने पर Canary में काम करते हैं.

display: contents के मामलों में, एआई के काम करने के तरीके को बेहतर बनाने का काम अब भी जारी है. इस पोस्ट का यह सेक्शन पढ़ने के बाद, आपके दिए गए सुझाव के आधार पर इसमें बदलाव किया जा सकता है.

display: contents और वेब कॉम्पोनेंट वाले एलिमेंट

सीएसएस वर्किंग ग्रुप को एक समस्या हल करनी है. इसमें यह तय करना है कि अगर रीडिंग-फ़्लो वाले किसी एलिमेंट के बच्चे में display: contents है, तो क्या किया जाए. इसी तरह, अगर आइटम <slot> है, तो क्या किया जाए.

यहां दिए गए उदाहरण में, <div> एलिमेंट में display: contents है. इस वजह से, सभी <button> एलिमेंट को फ़्लेक्स लेआउट में शामिल होने के लिए प्रमोट किया जाता है. इसलिए, reading-flow उनके क्रम का ध्यान रखता है.

 .wrapper {
   display: flex;
   reading-flow: flex-visual;
 }

<div class="wrapper">
   <div style="display: contents" id="contents1">
     <button style="order: 3" id="o3">3</button>
     <button style="order: 1" id="o1">1</button>
     <div style="display: contents" id=contents2>
       <button style="order: 4" id="o4">4</button>
       <button style="order: 2" id=o2>2</button>
     </div>
   </div>
 </div>

हम जानना चाहते हैं कि क्या आपके पास असल दुनिया के ऐसे उदाहरण हैं जिनकी वजह से, इस उदाहरण में दिखाई गई स्थिति पैदा हुई हो. क्या आपको कभी ऐसे आइटम का क्रम बदलना पड़ता है जो किसी ऐसे एलिमेंट के अंदर मौजूद हैं जिसमें display: contents है? ऐसा तब होता है, जब आइटम ऐसे आइटम के साथ मौजूद होते हैं जो एक-दूसरे के सिबलिंग नहीं होते. इसकी वजह यह है कि वे आइटम, display: contents वाले आइटम के सिबलिंग होते हैं.

इसके अलावा, हम display: contents से जुड़ी समस्याओं को हल करने की कोशिश कर रहे हैं. ऐसे में, अगर आपको display: contents प्रॉपर्टी के साथ display: contents का इस्तेमाल करना है, तो हमें कुछ उदाहरण दिखाएं.reading-flow आपके पास मौजूद असल दुनिया के इस्तेमाल के उदाहरणों को समझने से, हमें आपकी ज़रूरतों के हिसाब से समाधान डिज़ाइन करने में मदद मिलेगी.

सीएसएस वर्किंग ग्रुप की समस्या में इस्तेमाल के उदाहरण जोड़ें. अगर आपके पास लाइव साइटों के उदाहरण हैं या CodePen या JSFiddle पर कोई डेमो बनाया जा सकता है, तो इससे हमें इस समस्या पर ग्रुप में चर्चा करने में बहुत मदद मिलेगी. अगर आपको लगता है कि इस समस्या को ठीक करने के लिए क्या किया जाना चाहिए, तो हमें बताएं. हालांकि, सबसे ज़रूरी बात यह है कि हम इसके इस्तेमाल के असली उदाहरण देखें.