लेआउट के तरीकों से आइटम को उस क्रम में व्यवस्थित करने की समस्या के लिए, सुझाए गए समाधान के बारे में हमें आपका सुझाव, राय या शिकायत चाहिए जो दस्तावेज़ के सोर्स से अलग हो.
सीएसएस वर्किंग ग्रुप, इस समस्या का हल ढूंढ रहा है. इस समस्या में, लेआउट का तरीका आइटम को ऐसे क्रम में व्यवस्थित कर सकता है जो सोर्स से अलग हो. इसलिए, यह दस्तावेज़ को पढ़ने और फ़ोकस करने के क्रम से भी अलग हो सकता है. इस लेख में समस्या और सुझाए गए समाधान के बारे में बताया गया है. हमें आपकी राय जानकर खुशी होगी.
समस्या
एचटीएमएल दस्तावेज़ को पढ़ने का क्रम, सोर्स के क्रम के हिसाब से होता है. इसका मतलब है कि स्क्रीन रीडर, दस्तावेज़ को उसी क्रम में पढ़ेगा जिस क्रम में उसे सोर्स में रखा गया है. साथ ही, दस्तावेज़ में टैब करने के लिए कीबोर्ड का इस्तेमाल करने वाला व्यक्ति भी उसी क्रम का पालन करेगा. आम तौर पर, यह सही होता है. साथ ही, कॉन्टेंट, स्क्रीन रीडर, और सीमित सीएसएस वाले किसी भी डिवाइस के रीडिंग मोड प्रज़ेंटेशन के लिए, दस्तावेज़ के सोर्स का सही क्रम ज़रूरी है. हालांकि, सीएसएस और खास तौर पर फ़्लेक्सबॉक्स और ग्रिड, ऐसे लेआउट बना सकते हैं जिनमें लेआउट, विज़ुअल पढ़ने का ऐसा क्रम तय करता है जो सोर्स से अलग होता है.
उदाहरण के लिए, फ़्लेक्स आइटम पर 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;
}
क्या इसका मतलब है कि सोर्स के क्रम से कोई फ़र्क़ नहीं पड़ता?
नहीं, सोर्स के क्रम का अब भी फ़र्क़ पड़ता है. इस सुविधा का इस्तेमाल सिर्फ़ उन खास स्थितियों में करना चाहिए जहां पढ़ने का क्रम, सोर्स से अलग हो सकता है. उदाहरण के लिए, जब लेआउट के ऐसे तरीकों का इस्तेमाल किया जाता है जिनकी वजह से यह डिसकनेक्ट हो सकता है, जैसे कि घनी ग्रिड पैकिंग या जब किसी ब्रेकपॉइंट पर लेआउट का कोई दूसरा क्रम सही लगता है.
इन प्रॉपर्टी का इस्तेमाल करते समय, किसी ऐसे क्रम का इस्तेमाल करके सोर्स दस्तावेज़ बनाएं जो पेज को बिना सीएसएस के रेंडर करने पर काम का हो. इन प्रॉपर्टी को सिर्फ़ उन जगहों और ब्रेकपॉइंट पर जोड़ें जहां इनकी ज़रूरत है.
क्या लेखन टूल को ये प्रॉपर्टी लागू करनी चाहिए?
एलिमेंट को खींचकर छोड़कर ग्रिड लेआउट बनाने की सुविधा देने वाले लेखन टूल, लोगों को अब भी सही सोर्स दस्तावेज़ बनाने के लिए बढ़ावा देते रहेंगे. इसलिए, ज़्यादातर मामलों में सोर्स को लेआउट के क्रम के आधार पर फिर से क्रम में लगाना ज़्यादा सही होगा. ऐसा करने से, डिसकनेक्ट की समस्या को हल करने के लिए, इन प्रॉपर्टी का इस्तेमाल करने की ज़रूरत नहीं पड़ेगी.
कृपया इस प्रस्ताव के बारे में अपना सुझाव/राय दें या शिकायत करें
हमें इस बारे में आपका सुझाव, राय या शिकायत चाहिए. खास तौर पर, अगर आपको लगता है कि इस तरीके से किसी खास मामले को हल नहीं किया जा सकता या इस तरीके से, ऐक्सेस करने में कोई समस्या आ सकती है, तो कृपया सीएसएस वर्किंग ग्रुप को बताएं.
इस बारे में एक थ्रेड चल रही है. इसमें, इस तरीके के इस्तेमाल के कई उदाहरण और इस पर विचार शामिल हैं. इस थ्रेड में टिप्पणियां की जा सकती हैं और इस प्रस्ताव से जुड़ी संभावित समस्याओं को हाइलाइट किया जा सकता है. ध्यान दें कि मौजूदा प्रस्ताव, थ्रेड शुरू करने वाले मेरे शुरुआती प्रस्ताव से काफ़ी अलग है. जिन लोगों को इस बारे में जानना है उन्हें इस बातचीत में दिलचस्पी हो सकती है. इस बातचीत से पता चलता है कि CSS वर्किंग ग्रुप में, ब्राउज़र में लागू किए जा सकने वाले प्रस्तावों को कैसे तैयार किया जाता है.
पैट्रिक टोमासो की थंबनेल इमेज. सुझाव और राय देने के लिए, क्रिस हर्रलसन, टैब अटकिंस, और इयान किल्पैट्रिक का धन्यवाद.