पब्लिश होने की तारीख: 1 मई, 2025
सीएसएस reading-flow और reading-order प्रॉपर्टी, Chrome 137 से उपलब्ध हैं.
इस पोस्ट में, इन प्रॉपर्टी के डिज़ाइन की वजहों के बारे में बताया गया है. साथ ही, इनका इस्तेमाल शुरू करने के लिए कुछ जानकारी भी दी गई है.
ग्रिड और फ़्लेक्स जैसे लेआउट के तरीकों ने फ़्रंटएंड डेवलपमेंट को बदल दिया है. हालांकि, इनकी सुविधाओं की वजह से कुछ उपयोगकर्ताओं को समस्या हो सकती है. ऐसा बहुत आसानी से हो सकता है कि विज़ुअल का क्रम, डीओएम ट्री में सोर्स के क्रम से मेल न खाए. जब कीबोर्ड का इस्तेमाल करके साइट पर नेविगेट किया जाता है, तो ब्राउज़र इस सोर्स के क्रम का पालन करता है. इसलिए, कुछ उपयोगकर्ताओं को किसी पेज पर नेविगेट करते समय, अनचाहे तरीके से पेज के एक से दूसरे हिस्से पर जाने की समस्या आ सकती है.
reading-flow और reading-order प्रॉपर्टी को डिज़ाइन करके, सीएसएस डिसप्ले स्पेसिफ़िकेशन में जोड़ा गया है. ऐसा इसलिए किया गया है, ताकि इस पुरानी समस्या को हल किया जा सके.
reading-flow
reading-flow सीएसएस प्रॉपर्टी से यह तय होता है कि फ़्लेक्स, ग्रिड या ब्लॉक लेआउट में मौजूद एलिमेंट, सुलभता टूल के लिए किस क्रम में दिखें. साथ ही, यह भी तय होता है कि लीनियर क्रम के नेविगेशन के तरीकों का इस्तेमाल करके, उन पर फ़ोकस कैसे किया जाए.
यह एक कीवर्ड वैल्यू लेता है, जिसकी डिफ़ॉल्ट वैल्यू normal होती है. इससे, एलिमेंट को डीओएम के क्रम में क्रम से लगाने की सुविधा काम करती रहती है.
इसे फ़्लेक्स कंटेनर में इस्तेमाल करने के लिए, इसकी वैल्यू को flex-visual या
flex-flow पर सेट करें. ग्रिड कंटेनर में इसका इस्तेमाल करने के लिए, इसकी वैल्यू को grid-rows, grid-columns या grid-order पर सेट करें.
reading-order
reading-order सीएसएस प्रॉपर्टी की मदद से, रीडिंग फ़्लो कंटेनर में आइटम के क्रम को मैन्युअल तरीके से बदला जा सकता है. ग्रिड, फ़्लेक्स या ब्लॉक कंटेनर में इस प्रॉपर्टी का इस्तेमाल करने के लिए, कंटेनर पर reading-flow वैल्यू को source-order पर सेट करें. साथ ही, अलग-अलग आइटम के reading-order को किसी पूर्णांक वैल्यू पर सेट करें.
फ़्लेक्सबॉक्स में उदाहरण
उदाहरण के लिए, आपके पास ऐसा फ़्लेक्स लेआउट कंटेनर हो सकता है जिसमें तीन एलिमेंट, पंक्ति के उलटे क्रम में हों. साथ ही, आपको उस क्रम को फिर से व्यवस्थित करने के लिए, ऑर्डर प्रॉपर्टी का इस्तेमाल करना हो.
<div class="box">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</div>
.box {
display: flex;
flex-direction: row-reverse;
}
.box :nth-child(1) {
order: 2;
}
फ़ोकस किए जा सकने वाले अगले एलिमेंट पर जाने के लिए, Tab बटन का इस्तेमाल करें. साथ ही, फ़ोकस किए जा सकने वाले पिछले एलिमेंट पर जाने के लिए, Tab+Shift बटन का इस्तेमाल करें. यह सोर्स के क्रम में आइटम दिखाता है: एक, दो, तीन.
असली उपयोगकर्ता के हिसाब से, यह काम का नहीं है और बहुत उलझन भरा हो सकता है. पेज पर नेविगेट करने के लिए, सुलभता के लिए उपलब्ध स्पेस नेविगेशन टूल का इस्तेमाल करने पर भी यही होता है.
इसे ठीक करने के लिए, reading-flow प्रॉपर्टी को सेट करें:
.box {
reading-flow: flex-visual;
}
फ़ोकस का क्रम अब यह है: एक, तीन, दो. यह वही विज़ुअल क्रम है जो आपको अंग्रेज़ी में बाईं से दाईं ओर पढ़ने पर दिखेगा.
अगर आपको फ़ोकस के क्रम को मूल क्रम में रखना है, तो इसके लिए इन विकल्पों में से कोई एक विकल्प चुनें:
.box {
reading-flow: flex-flow;
}
फ़ोकस का क्रम अब फ़्लेक्स के क्रम के उलट है: दो, तीन, एक. दोनों मामलों में, सीएसएस order प्रॉपर्टी का हिसाब रखा जाता है.
ग्रिड लेआउट का उदाहरण
यह देखने के लिए कि यह ग्रिड में कैसे काम करता है, कल्पना करें कि आपने सीएसएस ग्रिड के साथ एक लेआउट बनाया है, जिसमें अपने-आप प्लेस होने वाले आइटम हैं और जिन पर फ़ोकस किया जा सकता है.
<div class="wrapper">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>
<a href="#">Five</a>
<a href="#">Six</a>
<a href="#">Seven</a>
<a href="#">Eight</a>
<a href="#">Nine</a>
<a href="#">Ten</a>
<a href="#">Eleven</a>
<a href="#">Twelve</a>
</div>
आपको पांचवें बच्चे को सबसे ऊपर सबसे बड़ा स्पेस देना है. इसके बाद, दूसरे बच्चे को ग्रिड के बीच में रखना है. कॉलम टेंप्लेट के हिसाब से, अन्य सभी चाइल्ड अपने-आप ग्रिड में दिख सकते हैं.
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
}
.wrapper a:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
}
.wrapper a:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
फ़ोकस किए जा सकने वाले अगले एलिमेंट को ढूंढने के लिए, Tab बटन का इस्तेमाल करके इन एलिमेंट पर जाएं. साथ ही, फ़ोकस किए जा सकने वाले पिछले एलिमेंट को ढूंढने के लिए, Tab+Shift बटन का इस्तेमाल करें. यह सोर्स के क्रम में आइटम दिखाता है: एक से बारह.
इसे ठीक करने के लिए, reading-flow प्रॉपर्टी को सेट करें:
.wrapper {
reading-flow: grid-rows;
}
फ़ोकस का क्रम अब यह है: पांच, एक, तीन, दो, चार, छह, सात, आठ, नौ, दस, ग्यारह, बारह. यह विज़ुअल के क्रम में, पंक्ति के हिसाब से चलता है.
अगर आपको रीडिंग फ़्लो को कॉलम के क्रम में फ़ॉलो करना है, तो grid-columns कीवर्ड वैल्यू का इस्तेमाल किया जा सकता है. इसके बाद, फ़ोकस का क्रम पांच,
छह, नौ, सात, दस, एक, दो, ग्यारह, तीन, चार, आठ, बारह हो जाता है.
.wrapper {
reading-flow: grid-columns;
}
grid-order का इस्तेमाल भी किया जा सकता है. फ़ोकस का क्रम एक से बारह तक ही रहता है.
ऐसा इसलिए हुआ, क्योंकि किसी भी आइटम पर सीएसएस ऑर्डर सेट नहीं किया गया था.
reading-order का इस्तेमाल करके ब्लॉक किया गया कंटेनर
reading-order प्रॉपर्टी की मदद से, यह तय किया जा सकता है कि पढ़ने के फ़्लो में किसी आइटम पर कब विज़िट किया जाना चाहिए. इससे, reading-flow प्रॉपर्टी से सेट किए गए क्रम को बदला जा सकता है. यह सिर्फ़ मान्य रीडिंग फ़्लो कंटेनर पर तब लागू होता है, जब reading-flow प्रॉपर्टी normal न हो.
.wrapper {
display: block;
reading-flow: source-order;
}
.top {
reading-order: -1;
inset-inline-start: 50px;
inset-block-start: 50px;
}
नीचे दिए गए ब्लॉक कंटेनर में पांच आइटम हैं. ऐसे कोई लेआउट नियम नहीं हैं जो सोर्स के क्रम से एलिमेंट का क्रम बदलते हैं. हालांकि, एक ऐसा आइटम है जिसे सबसे पहले देखा जाना चाहिए.
<div class="wrapper">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
<a class="top" href="#">Item 5</a>
</div>
इस आइटम के reading-order को -1 पर सेट करने पर, फ़ोकस ऑर्डर सबसे पहले उस पर जाता है. इसके बाद, वह रीडिंग फ़्लो के बाकी आइटम के लिए सोर्स ऑर्डर पर वापस जाता है.
chrome.dev साइट पर आपको और उदाहरण मिल सकते हैं.
tabindex के साथ इंटरैक्शन
अब तक, डेवलपर ने एचटीएमएल एलिमेंट को फ़ोकस करने लायक बनाने और क्रम से फ़ोकस नेविगेशन के लिए, एचटीएमएल tabindex ग्लोबल एट्रिब्यूट का इस्तेमाल किया है. हालांकि, इस एट्रिब्यूट के इस्तेमाल से कई समस्याएं आती हैं. साथ ही, यह सुलभता के लिहाज़ से भी सही नहीं है. मुख्य समस्या यह है कि tabindex का इस्तेमाल करके बनाया गया, tabindex के क्रम में फ़ोकस नेविगेशन, सुलभता ट्री के ज़रिए नहीं पहचाना जाता. गलत तरीके से इस्तेमाल करने पर, फ़ोकस का क्रम अचानक बदल सकता है. इससे स्क्रीन रीडर पर मिलने वाले अनुभव में फ़र्क़ पड़ सकता है. इसे ठीक करने के लिए, aria-owns एचटीएमएल एट्रिब्यूट का इस्तेमाल करके ऑर्डर को ट्रैक करें.
पिछले फ़्लेक्स उदाहरण में, reading-flow: flex-visual का इस्तेमाल करने जैसा ही नतीजा पाने के लिए, ये काम किए जा सकते हैं.
<div class="box" aria-owns="one three two">
<a href="#" tabindex="1" id="one">One</a>
<a href="#" tabindex="3" id="two">Two</a>
<a href="#" tabindex="2" id="three">Three</a>
</div>
हालांकि, अगर कंटेनर के बाहर मौजूद किसी दूसरे एलिमेंट में भी tabindex=1 है, तो क्या होगा?
इसके बाद, अगली बढ़ी हुई tabindex वैल्यू पर जाने से पहले, tabindex=1 वाले सभी एलिमेंट एक साथ विज़िट किए जाएंगे. इस तरह के नेविगेशन से, उपयोगकर्ता को खराब अनुभव मिलता है. इसलिए, सुलभता विशेषज्ञ पॉज़िटिव टैब इंडेक्स का इस्तेमाल करने से बचने का सुझाव देते हैं. हमने reading-flow को डिज़ाइन करते समय, इसे ठीक करने की कोशिश की थी.
reading-flow प्रॉपर्टी सेट वाला कंटेनर, फ़ोकस स्कोप का मालिक बन जाता है.
इसका मतलब है कि यह वेब दस्तावेज़ में फ़ोकस किए जा सकने वाले अगले एलिमेंट पर जाने से पहले, कंटेनर में मौजूद हर एलिमेंट पर जाने के लिए, क्रम से फ़ोकस नेविगेशन का दायरा तय करता है. इसके अलावा, इसके डायरेक्ट चाइल्ड को reading-flow प्रॉपर्टी का इस्तेमाल करके क्रम में लगाया जाता है. साथ ही, क्रम तय करने के लिए, पॉज़िटिव tabindex को अनदेखा कर दिया जाता है. हालांकि, अब भी रीडिंग-फ़्लो आइटम के वंशजों पर पॉज़िटिव टैब इंडेक्स सेट किया जा सकता है.
ध्यान दें कि display: contents वाला ऐसा एलिमेंट जो अपने लेआउट पैरंट से reading-flow प्रॉपर्टी को इनहेरिट करता है वह भी एक मान्य रीडिंग फ़्लो कंटेनर होगा. अपनी साइट डिज़ाइन करते समय, इस बात का ध्यान रखें. इस बारे में ज़्यादा जानने के लिए, reading-flow और display: contents के बारे में सुझाव/राय देने या शिकायत करने के लिए किए गए हमारे अनुरोध पर जाएं.
हमें बताएं
इस पोस्ट और reading-flow chrome.dev पर दिए गए उदाहरणों को आज़माएं. साथ ही, अपनी साइटों पर इन सीएसएस प्रॉपर्टी का इस्तेमाल करें. अगर आपका कोई सुझाव, राय या शिकायत है, तो सीएसएस वर्किंग ग्रुप के GitHub repo पर समस्या के तौर पर बताएं. अगर आपको खास तौर पर tabindex और फ़ोकस स्कोपिंग के व्यवहार के बारे में सुझाव/राय/शिकायत देनी है, तो HTML WHATNOT GitHub रेपो पर समस्या के तौर पर बताएं. हमें इस सुविधा के बारे में आपका सुझाव/राय पाकर बेहद खुशी होगी.