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