पिछले साल, हमने सीएसएस लेआउट और सोर्स ऑर्डर डिसकनेक्ट करने की समस्या को हल करना ब्लॉग पोस्ट पब्लिश की थी.
इस लेख में, 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;
}
row-reverse के साथ फ़्लेक्स आइटम का डिफ़ॉल्ट फ़्लो.flex-flow: visual जोड़ें. इसके बाद, पढ़ने का फ़्लो, अंग्रेज़ी में विज़ुअल के क्रम में, बाईं से दाईं ओर होगा.
.flex {
display: flex;
flex-direction: row-reverse;
reading-flow: flex-visual;
}
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; }
reading-flow: grid-rows की मदद से.इसे आज़माएं
फ़िलहाल, यह सीएसएस प्रॉपर्टी एक्सपेरिमेंट के तौर पर उपलब्ध है. हालांकि, इसे जांच के लिए चालू किया जा सकता है. इसे आज़माने के लिए, 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 पर कोई डेमो बनाया जा सकता है, तो यह बहुत मददगार होगा. इससे हम इस समस्या पर ग्रुप के तौर पर चर्चा कर पाएंगे. अगर आपको लगता है कि क्या हो सकता है, तो हमें बताएं. हालांकि, सबसे अहम बात यह है कि इस्तेमाल के असल उदाहरण देखें.