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