TablesNG को Chromium 91 में लॉन्च किया गया है. यह कई गड़बड़ियों को ठीक करता है, जो सालों से इस वेब प्लैटफ़ॉर्म का हिस्सा हैं. इन अपडेट से, #Compat2021 प्रोग्राम के तहत ब्राउज़र के साथ काम करने की सुविधा बेहतर होगी. साथ ही, वेब प्लैटफ़ॉर्म पर टेबल का इस्तेमाल करने की सुविधा भी बेहतर होगी. सबसे ज़्यादा स्टार के निशान वाली कुछ समस्याओं में, लाइनों में position:
sticky,
सब-पिक्सल की ज्यामिति,
और बॉर्डर का सही तरह से छोटा होना जैसी समस्याएं शामिल हैं.
TablesNG की कोशिश
TablesNG को बनाने में कई साल लगे हैं. इसकी अगुवाई Chrome डेवलपर अलेक्स टोटिक ने की है. इसकी मदद से, वेब पर टेबल को रेंडर करने के तरीके को पूरी तरह से फिर से तैयार किया गया है. वेब डेवलपमेंट में टेबल का इस्तेमाल करना मुश्किल होता है. इसकी एक वजह, टेबल के इतिहास से जुड़ी समस्याएं हैं.
टेबल को एचटीएमएल में 1994 में जोड़ा गया था. इसके बाद, कई सालों तक पेज के जटिल लेआउट बनाने के लिए, टेबल का इस्तेमाल मुख्य तरीके के तौर पर किया गया. ये अब भी पूरे वेब पर मौजूद हैं. हालांकि, आम तौर पर इनका इस्तेमाल टेबल के तौर पर डेटा दिखाने के लिए किया जाता है.
हालांकि, अलग-अलग ब्राउज़र में टेबल के काम करने के तरीके में बड़े अंतर होते हैं. इनमें से कई वजहें, टेबल की खास बातों के अधूरे होने और उनमें जानकारी कम होने की वजह से आई हैं.
टेबल, सीएसएस की कई सुविधाओं से पहले ब्राउज़र में लागू की गई थीं:
ऑर्थोगोनल राइटिंग मोड, position:relative, box-sizing, फ़्लेक्सबॉक्स कंटेनर वगैरह. इसलिए, इनमें से कई सुविधाओं के लिए सहायता मिलना मुश्किल था.
सीएसएस टेबल मॉड्यूल लेवल 3, नई खास जानकारी को 2018 में Edge के लिए टेबल फिर से लागू करने के बाद लिखा गया था. TablesNG, टेबल के लिए नए तरीके से तैयार किया गया है. इसका मकसद, न सिर्फ़ इस नई सुविधा का पालन करना है, बल्कि टेबल में मौजूद कई तरह की गड़बड़ियों को ठीक करना भी है. इस बदलाव के बाद, आपको ये बदलाव दिखेंगे:
- स्क्रोल की जा सकने वाली लंबी टेबल के लिए, पंक्तियों में स्टिकी पोज़िशनिंग की सुविधा चालू करना.
- सब-पिक्सल ज्यामिति और टेबल बॉर्डर के हिसाब से अलाइनमेंट ठीक करना.
- बैकग्राउंड और बॉर्डर के लिए बेहतर पेंटिंग.
position: sticky पंक्तियों में
टेबल को स्टाइल करने के लिए, पहले position: sticky को लाइनों में इस्तेमाल करने की सुविधा उपलब्ध नहीं थी. यह एक बड़ी समस्या थी और लोगों को इससे परेशानी होती थी. इस सुविधा से, स्क्रोल करने के दौरान पेज पर टेबल हेडर मौजूद रहेगा. साथ ही, लंबी डेटा टेबल को कॉन्टेक्स्ट दिया जा सकेगा. जब तक आप हेडर को व्यू से बाहर की ओर स्क्रोल करते हैं और नंबर से भरी टेबल
देखते हैं, तब तक यह भूलना आसान हो जाता है कि उन संख्याओं का क्या मतलब है.
<thead> पर position: sticky लागू होने के बावजूद, टेबल का हेडर स्टिक वाली पोज़िशन में नहीं रह रहा है.हमें यह गड़बड़ी लंबे समय तक इसलिए आती रही, क्योंकि एचटीएमएल टेबल के आने के बाद position: sticky को सही से तय किया गया था. इस समस्या को ठीक करने से पहले, position: sticky वाले हेडर को सिर्फ़ position: static में बदल दिया जाता था. हालांकि, अब टेबल में कहीं भी position: sticky का इस्तेमाल किया जा सकता है: हेडर (<thead>) या वर्टिकल ऐक्सिस लेबल पर.
बॉर्डर और बैकग्राउंड पेंटिंग की सुविधा को बेहतर बनाया गया
टेबल से जुड़ा सबसे पुराना बग सितंबर 2008 का है. यह समस्या, Chrome के रिलीज़ होने के तुरंत बाद दर्ज की गई थी. हालांकि, टेबल के पुराने आर्किटेक्चर की वजह से, इसे कभी ठीक नहीं किया जा सका. यह समस्या, टेबल पेंटिंग और छोटा किए गए बॉर्डर से जुड़ी है.
टेबल को z-index के क्रम में पेंट करने का तरीका इस तरह है: सेल > पंक्तियां > सेक्शन > टेबल. इसके बाद, उन्हें उसी क्रम में पेंट किया जाता है जिस क्रम में वे डीओएम (डॉक्यूमेंट ऑब्जेक्ट मॉडल) में दिखते हैं. हालांकि, सेल उलटे DOM क्रम में होती हैं, जहां टेबल का पहला सेल सबसे ऊपर होता है.
इसलिए, यहां समस्या यह है कि बॉर्डर, सेल के बजाय टेबल से जुड़े होते हैं. ऐसा इसलिए है, क्योंकि टेबल को पहले जिस तरह से पेंट किया जाता था वह अब नहीं किया जा सकता. जब टेबल के फ़ोरग्राउंड पर पेंट किया जाता है, तब छोटे बॉर्डर पेंट किए जाते हैं. इसका मतलब है कि किसी टेबल सेल में एक से ज़्यादा बॉर्डर नहीं हो सकते:
ऊपर दिए गए उदाहरण में, आप देख सकते हैं कि सबसे बाईं ओर के नीले सेल को नारंगी रंग के सबसे नीचे दाईं ओर मौजूद सेल पर गलत तरीके से पेंट किया जा रहा था, क्योंकि उसमें कई बॉर्डर नहीं हो सकते. फिर से डिज़ाइन किए गए वर्शन में, इस समस्या को ठीक कर दिया गया है. साथ ही, नारंगी रंग की बॉर्डर वाली सेल, नीले रंग की सेल के ऊपर सही तरीके से दिखती है. इससे टेबल के दूसरे गैप में, नीले और नारंगी रंग की बॉर्डर लाइन दोनों दिख सकती हैं.
इस गड़बड़ी को अब Chromium और Firefox में ठीक कर दिया गया है.
सब-पिक्सल जियोमेट्री (टेबल अलाइनमेंट)
टेबल में Pixel का अलाइनमेंट, इंटरऑपरेबिलिटी (दूसरे सिस्टम के साथ काम करना) से जुड़ी एक और समस्या है. इसे TablesNG की मदद से ठीक किया गया है. पहले, पुराना इंजन हमेशा ग्राफ़िक वैल्यू को पिक्सल के हिसाब से राउंड करता था. इसका मतलब है कि पेज को ज़ूम इन और ज़ूम आउट करने पर, चीज़ें बदल जाती हैं. इससे अलाइनमेंट से जुड़ी समस्याएं आती हैं. TablesNG, अलाइनमेंट से जुड़ी इन समस्याओं को ठीक करता है.
वेब को फिर से डिज़ाइन करना
Chrome टीम ने न सिर्फ़ वेब कॉन्टेंट लिखने की प्रोसेस को बेहतर बनाने के लिए नई सुविधाएं शुरू की हैं, बल्कि वे मौजूदा एपीआई और उनके साथ काम करने की सुविधा को बेहतर बनाने के लिए भी कड़ी मेहनत कर रही हैं. असल में, TablesNG, उन कई प्रोजेक्ट में से एक है जिनमें इस टीम ने पिछले आठ सालों में, एप्लिकेशन को फिर से डिज़ाइन करने की प्रोसेस को पूरा किया है. हालांकि, सभी प्रोजेक्ट में ये शामिल नहीं हैं:
- LayoutNG: सभी लेआउट एल्गोरिदम को फिर से लिखा गया है, ताकि भरोसेमंदता और परफ़ॉर्मेंस को बेहतर बनाया जा सके.
- BlinkNG: Blink रेंडरिंग इंजन को व्यवस्थित तरीके से साफ़ करना और उसे अलग-अलग चरणों वाली पाइपलाइन में फिर से बनाना. इससे बेहतर तरीके से कैश मेमोरी में कॉन्टेंट सेव किया जा सकता है, कॉन्टेंट पर ज़्यादा भरोसा किया जा सकता है, और कॉन्टेंट-विज़िबिलिटी और कंटेनर क्वेरी जैसी फिर से एंट्री करने वाली / देर से रेंडर करने वाली सुविधाओं का इस्तेमाल किया जा सकता है.
- हर जगह जीपीयू रेस्टर: यह लंबे समय से चलने वाला एक प्रोजेक्ट है. इसका मकसद, सभी प्लैटफ़ॉर्म पर जीपीयू रेस्टराइज़ेशन को रोल आउट करना है.
- थ्रेड वाला स्क्रोलिंग और ऐनिमेशन: यह लंबे समय से चल रहा एक ऐसा प्रयास है जिसका मकसद, सभी स्क्रोलिंग और ऐसे ऐनिमेशन को कंपोज़िटर थ्रेड में ले जाना है जिनसे लेआउट में बदलाव नहीं होता.
इन सुधारों और अन्य अपडेट के बारे में ज़्यादा जानने के लिए, हमारे साथ बने रहें!