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

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 के साथ reading-flow प्रॉपर्टी का इस्तेमाल करना है, तो ऐसे उदाहरण देखें जो आपके काम के हों. असल दुनिया में इस्तेमाल के उदाहरणों को समझने से, हमें आपकी ज़रूरतों के हिसाब से समाधान डिज़ाइन करने में मदद मिलेगी.

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