आइटम को एक क्रम में व्यवस्थित करने के लेआउट के तरीकों से जुड़ी समस्या के समाधान के लिए, आपका सुझाव चाहिए. यह समस्या, दस्तावेज़ के सोर्स से डिसकनेक्ट हो जाती है.
सीएसएस वर्किंग ग्रुप, ऐसी स्थिति को हल करने के लिए काम कर रहा है जिसमें लेआउट वाला तरीका, आइटम को ऐसे क्रम में व्यवस्थित कर सकता है जो सोर्स से डिसकनेक्ट हो. इसका मतलब है कि दस्तावेज़ के रीडिंग और फ़ोकस ऑर्डर से ऐसा हो सकता है. इस लेख में समस्या और सुझाए गए समाधान के बारे में बताया गया है. हमें आपकी राय जानकर खुशी होगी.
समस्या
एचटीएमएल दस्तावेज़ को पढ़ने का क्रम, सोर्स के क्रम के हिसाब से होता है. इसका मतलब है कि स्क्रीन रीडर, दस्तावेज़ को उसी क्रम में पढ़ेगा जिस क्रम में उसे सोर्स में रखा गया है. साथ ही, दस्तावेज़ में टैब करने के लिए कीबोर्ड का इस्तेमाल करने वाला व्यक्ति भी उसी क्रम का पालन करेगा. आम तौर पर, यह सही होता है. साथ ही, कॉन्टेंट, स्क्रीन रीडर, और सीमित सीएसएस वाले किसी भी डिवाइस के रीडिंग मोड प्रज़ेंटेशन के लिए, दस्तावेज़ के सोर्स का सही क्रम ज़रूरी है. हालांकि, सीएसएस और खास तौर पर फ़्लेक्सबॉक्स और ग्रिड, ऐसे लेआउट बना सकते हैं जिनमें लेआउट, विज़ुअल पढ़ने का ऐसा क्रम तय करता है जो सोर्स से अलग होता है.
उदाहरण के लिए, फ़्लेक्स आइटम पर order प्रॉपर्टी का इस्तेमाल करने से लेआउट का क्रम बदल जाता है, लेकिन सोर्स का क्रम नहीं बदलता.
ग्रिड लेआउट का इस्तेमाल करने पर, चुने गए लेआउट के तरीके से टैब के क्रम में गड़बड़ी हो सकती है. उदाहरण के लिए, grid-auto-flow: dense का इस्तेमाल करने पर, आइटम का लेआउट क्रम बदल जाता है.
डेवलपर, ग्रिड पर आइटम को सोर्स में तय किए गए क्रम से अलग क्रम में रखकर भी डिसकनेक्ट कर सकता है.
प्रस्तावित समाधान
सीएसएस वर्किंग ग्रुप, इस समस्या का समाधान पेश कर रहा है. साथ ही, वह डेवलपर और सुलभता समुदाय से इस तरीके के बारे में सुझाव, राय या टिप्पणी पाने के लिए उत्साहित है.
reading-order: auto के साथ, रैंडमाइज़ किए गए लेआउट फ़ॉलो करना
ऐसी स्थितियां जिनमें लेआउट का कोई भी क्रम बनाया जा सकता है, जैसे कि ग्रिड लेआउट में सघन पैकिंग का इस्तेमाल करते समय, हो सकता है कि ब्राउज़र, सोर्स के क्रम के बजाय लेआउट का पालन करे. ऐसा करने के लिए, फ़्लेक्स या ग्रिड आइटम में reading-order प्रॉपर्टी होनी चाहिए, जिसकी वैल्यू auto हो.
नीचे दी गई सीएसएस की वजह से, grid-auto-flow: dense की वजह से ज़्यादा पैक किए गए आइटम, पढ़ने के क्रम में पहले दिखेंगे.
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
reading-order-items की मदद से, बिना रैंडमाइज़ किए गए लेआउट देखना
कुछ ग्रिड और फ़्लेक्स लेआउट में, लेआउट का क्रम आसानी से समझा जा सकता है. उदाहरण के लिए, आइटम का क्रम बदलने के लिए order प्रॉपर्टी का इस्तेमाल करने वाले फ़्लेक्स लेआउट में, order प्रॉपर्टी के हिसाब से लेआउट का क्रम तय होता है. अन्य लेआउट में यह साफ़ तौर पर नहीं पता चलता कि लेआउट का सही क्रम क्या है. इसके लिए, एक से ज़्यादा विकल्प हो सकते हैं. इसलिए, बिना रैंडमाइज़ किए गए लेआउट का इस्तेमाल करते समय, आपको कंटेनर में grid-order-items प्रॉपर्टी जोड़नी होगी. साथ ही, कीवर्ड वैल्यू जोड़नी होंगी, ताकि लेआउट के क्रम के लिए आपके इंटेंट के बारे में पता चल सके.
यहां दिए गए उदाहरण में, row-reverse का इस्तेमाल करके बनाया गया फ़्लेक्स लेआउट दिखाया गया है. फ़्लेक्स आइटम में reading-order: auto और फ़्लेक्स कंटेनर में reading-order-items: flex flow है. इससे पता चलता है कि हमें पढ़ने के क्रम में भी flex-flow दिशा का पालन करना है, न कि विज़ुअल क्रम का. विज़ुअल क्रम का पालन करने के लिए, flex visual का इस्तेमाल किया जा सकता है.
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
इस अगले उदाहरण में, grid-template-areas का इस्तेमाल करके ग्रिड लेआउट बनाया गया है. साथ ही, आइटम को सोर्स के क्रम से अलग लेआउट में रखा गया है. reading-order-items प्रॉपर्टी का इस्तेमाल यह बताने के लिए किया जाता है कि हमें लेआउट के क्रम को फ़ॉलो करना चाहिए. इसके बाद, अगली लाइन पर जाना चाहिए. (grid column से विपरीत दिशा का पता चलता है).
.wrapper {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-areas:
"a a b b b b"
"c c d d e e"
"f f g g h h";
reading-order-items: grid rows;
}
.a {
grid-area: a;
reading-order: auto;
}
क्या इसका मतलब यह है कि सोर्स के क्रम से कोई फ़र्क़ नहीं पड़ता?
नहीं, सोर्स के क्रम का अब भी फ़र्क़ पड़ता है. इस सुविधा का इस्तेमाल सिर्फ़ उन खास स्थितियों में करना चाहिए जहां पढ़ने का क्रम, सोर्स से अलग हो सकता है. उदाहरण के लिए, जब लेआउट के ऐसे तरीकों का इस्तेमाल किया जाता है जिनकी वजह से यह डिसकनेक्ट हो सकता है. जैसे, घने ग्रिड पैकिंग या जब किसी ब्रेकपॉइंट पर लेआउट का कोई दूसरा क्रम सही लगता है.
इन प्रॉपर्टी का इस्तेमाल करते समय, किसी ऐसे क्रम का इस्तेमाल करके सोर्स दस्तावेज़ बनाएं जो पेज को बिना सीएसएस के रेंडर करने पर काम का हो. इन प्रॉपर्टी को सिर्फ़ उन जगहों और ब्रेकपॉइंट पर जोड़ें जहां इनकी ज़रूरत होती है.
क्या ऑथरिंग टूल में इन प्रॉपर्टी को लागू करना चाहिए?
एलिमेंट को खींचकर छोड़कर ग्रिड लेआउट बनाने की सुविधा देने वाले लेखन टूल, लोगों को अब भी सही सोर्स दस्तावेज़ बनाने के लिए बढ़ावा देते रहेंगे. इसलिए, ज़्यादातर मामलों में डिसकनेक्ट से निपटने के लिए लेज़ी तरीके के तौर पर इन प्रॉपर्टी का इस्तेमाल करने के बजाय, लेआउट के ऑर्डर के आधार पर सोर्स का क्रम बदलना ज़्यादा सही होगा.
कृपया इस प्रस्ताव के बारे में अपना सुझाव/राय दें या शिकायत करें
हम इस बारे में लोगों की राय जानना चाहते हैं. खास तौर पर, अगर आपको लगता है कि इस तरीके से किसी खास मामले को हल नहीं किया जा सकता या इस तरीके से, ऐक्सेस करने में कोई समस्या आ सकती है, तो कृपया सीएसएस वर्किंग ग्रुप को बताएं.
इस बारे में एक थ्रेड चल रही है. इसमें, इस तरीके के इस्तेमाल के कई उदाहरण और इस पर विचार शामिल हैं. इस थ्रेड में टिप्पणियां की जा सकती हैं और इस प्रस्ताव से जुड़ी संभावित समस्याओं को हाइलाइट किया जा सकता है. ध्यान दें कि मौजूदा प्रस्ताव, थ्रेड शुरू करने वाले मेरे शुरुआती प्रस्ताव से काफ़ी अलग है. जिन लोगों को इस बारे में जानना है उन्हें इस बातचीत में दिलचस्पी हो सकती है. इस बातचीत से पता चलता है कि सीएसएस वर्किंग ग्रुप में, ब्राउज़र में लागू किए जा सकने वाले प्रस्तावों को कैसे तैयार किया जाता है.
पैट्रिक टोमासो की थंबनेल इमेज. सुझाव और राय देने के लिए, क्रिस हर्रलसन, टैब अटकिंस, और इयान किल्पैट्रिक का धन्यवाद.