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