पब्लिश होने की तारीख: 1 मई, 2025
सीएसएस reading-flow और reading-order प्रॉपर्टी, Chrome 137 से उपलब्ध हैं.
इस पोस्ट में, इन प्रॉपर्टी के डिज़ाइन की वजहों के बारे में बताया गया है. साथ ही, इनके बारे में कुछ खास जानकारी दी गई है, ताकि आप इनका इस्तेमाल शुरू कर सकें.
ग्रिड और फ़्लेक्स जैसे लेआउट के तरीकों ने फ़्रंटएंड डेवलपमेंट में बदलाव किया है. हालांकि, इनकी फ़्लेक्सिबिलिटी की वजह से कुछ लोगों को समस्या हो सकती है. ऐसी स्थिति बनाना बहुत आसान है जहां विज़ुअल ऑर्डर, DOM ट्री में सोर्स ऑर्डर से मेल नहीं खाता. अगर कीबोर्ड का इस्तेमाल करके साइट पर नेविगेट किया जाता है, तो ब्राउज़र इसी सोर्स ऑर्डर को फ़ॉलो करता है. इसलिए, कुछ उपयोगकर्ताओं को पेज पर नेविगेट करते समय, अनचाहे तरीके से जंपिंग की समस्या आ सकती है.
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 प्रॉपर्टी को ध्यान में रखा जाता है.
ग्रिड लेआउट का उदाहरण
ग्रिड में यह सुविधा कैसे काम करती है, यह देखने के लिए मान लें कि आपको सीएसएस ग्रिड की मदद से, फ़ोकस किए जा सकने वाले 12 एरिया वाला लेआउट बनाना है.
<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=1 वाले सभी एलिमेंट पर एक साथ जाया जाएगा. इसके बाद, हम tabindex की अगली वैल्यू पर जाएंगे. इस तरह से एक के बाद एक नेविगेशन करने से, उपयोगकर्ता को खराब अनुभव मिलेगा. इसलिए, सुलभता विशेषज्ञों का सुझाव है कि पॉज़िटिव tabindex से बचें. reading-flow को डिज़ाइन करते समय, हमने इस समस्या को ठीक करने की कोशिश की है.
जिस कंटेनर में reading-flow प्रॉपर्टी सेट होती है वह फ़ोकस स्कोप का मालिक बन जाता है.
इसका मतलब है कि यह फ़ोकस को क्रम से नेविगेट करने की सुविधा देता है. इससे वेब दस्तावेज़ में, फ़ोकस किए जा सकने वाले अगले एलिमेंट पर जाने से पहले, कंटेनर में मौजूद हर एलिमेंट पर जाया जा सकता है. इसके अलावा, इसके चाइल्ड एलिमेंट को reading-flow प्रॉपर्टी का इस्तेमाल करके क्रम से लगाया जाता है. साथ ही, क्रम से लगाने के लिए पॉज़िटिव tabindex को अनदेखा किया जाता है. रीडिंग-फ़्लो वाले आइटम के डिसेंडेंट पर अब भी पॉज़िटिव tabindex सेट किया जा सकता है.
ध्यान दें कि display: contents एट्रिब्यूट वाला कोई एलिमेंट, लेआउट पैरंट से reading-flow प्रॉपर्टी इनहेरिट करता है. यह भी एक मान्य रीडिंग फ़्लो कंटेनर होगा. अपनी साइट डिज़ाइन करते समय इस बात का ध्यान रखें. इस बारे में ज़्यादा जानने के लिए, reading-flow और display: contents के बारे में सुझाव/राय देने या शिकायत करने के लिए किए गए हमारे अनुरोध पढ़ें.
हमें बताएं
इस पोस्ट और reading-flow chrome.dev पर दिए गए उदाहरणों को आज़माएँ. साथ ही, अपनी साइटों पर सीएसएस की इन प्रॉपर्टी का इस्तेमाल करें. अगर आपको कोई सुझाव/राय देनी है या शिकायत करनी है, तो सीएसएस वर्किंग ग्रुप GitHub repo पर जाकर, इसे समस्या के तौर पर सबमिट करें. अगर आपको tabindex और फ़ोकस स्कोपिंग के व्यवहार के बारे में कोई सुझाव/राय देनी है या शिकायत करनी है, तो इसे HTML WHATNOT GitHub repo में समस्या के तौर पर सबमिट करें. हमें इस सुविधा के बारे में आपके सुझाव/राय का इंतज़ार रहेगा.