Compat 2021 के मध्य में जारी किया गया अपडेट. यह पांच अहम क्षेत्रों में, ब्राउज़र के साथ काम करने में आने वाली समस्याओं को खत्म करने की एक कोशिश है. सीएसएस flexbox, CSS Grid, पोज़िशन: स्टिकी, आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात), और सीएसएस ट्रांसफ़ॉर्म.
साल के बीच में, Compat 2021 को अपडेट किया जा सकता है. इसके लिए, पांच अहम क्षेत्रों में ब्राउज़र के साथ काम करने से जुड़ी समस्याओं को खत्म करने की कोशिश की जा रही है. #compat2021 के काम के बारे में ज़्यादा जानने और यह जानने के लिए कि हमने जिन क्षेत्रों में फ़ोकस किया है उन चीज़ों पर क्या फ़ैसला लिया गया है, मार्च का एलान देखें.
इस पोस्ट में बताया गया है कि Chromium में जिन सुधारों के बारे में बताया गया है वे Chrome, Edge, और Chromium पर आधारित सभी ब्राउज़र पर उपलब्ध होंगे.
हम प्रोग्रेस का आकलन कैसे करते हैं
web-platform-tests के लिए Compat 2021 डैशबोर्ड पर जाकर, पास होने वाले टेस्ट की संख्या और अलग-अलग ब्राउज़र के लिए ट्रेंडिंग ग्राफ़ देखें.
एक आसान "पास हो चुके टेस्ट" संख्या यह नहीं बताती कि ब्राउज़र कितनी अच्छी तरह काम करता है. हालांकि, यह एक ऐसा सिग्नल है जिसका इस्तेमाल हम यह देखने के लिए करते हैं कि हमारी कोशिश कितनी आगे बढ़ गई है. जांच के नतीजों में अलग-अलग ब्राउज़र के बीच कम अंतर होने का मतलब है कि किसी वेब की सुविधा, कई ब्राउज़र पर बेहतर तरीके से काम कर सकती है.
सीएसएस फ़्लेक्सबॉक्स
सभी तीन ब्राउज़र इंजन में, फ़्लेक्सबॉक्स में सुधार हुए.
Safari 14.1 ने फ़्लेक्सबॉक्स के लिए gap प्रॉपर्टी
शिप की है. gap प्रॉपर्टी की मदद से, एक आइटम के बीच के स्पेस को आसानी से सेट किया जा सकता है. इस प्रॉपर्टी का इस्तेमाल अक्सर ग्रिड लेआउट में किया जाता है. एमडीएन ब्राउज़र कंपैटिबिलिटी रिपोर्ट में, फ़्लेक्सबॉक्स लेआउट की सुविधा सबसे ज़्यादा अनुरोधों में से एक है. इस अपडेट के बाद, फ़्लेक्सिबल लेआउट में gap प्रॉपर्टी सभी मुख्य ब्राउज़र के लिए उपलब्ध हो गई है. साथ ही, टॉप कंपैटबिलिटी से जुड़ी चुनौती भी खत्म हो गई है. Safari 14.1 में फ़्लेक्सबॉक्स में मौजूद इमेज
के लिए कई सुधार भी शामिल हैं. इससे पुराने तरीकों की ज़रूरत नहीं पड़ती.
Firefox ने फ़्लेक्सिबल आइटम के रूप में टेबल की रेंडरिंग को ठीक कर दिया है. इसकी मदद से, Firefox 100% पास होने वाले टेस्ट (फ़िलहाल 98.5%) के करीब पहुंच गया है.
Chromium ने टेबल को फ़्लेक्सिबल आइटम के तौर पर भी ठीक किया है.
Chromium 88 में, कई पुरानी गड़बड़ियों को ठीक करने के लिए, फ़्लेक्सिबल आइटम के तौर पर इमेज को फिर से तैयार किया गया. आखिर में, Chromium ने हाल ही में नए अलाइनमेंट कीवर्ड के लिए सहायता जोड़ी है: start, end, self-start, self-end, left, और right. ये कीवर्ड Chrome कैनरी और
Edge Canary में आज़माने के लिए उपलब्ध हैं.
सीएसएस ग्रिड
सीएसएस ग्रिड का इस्तेमाल लगातार बढ़ रहा है. फ़िलहाल, यह पेज व्यू के 9% हिस्से पर है. सभी तीन मुख्य ब्राउज़र इंजन, सीएसएस ग्रिड को लागू करते हैं और 89% से ज़्यादा मिलते-जुलते वेब प्लैटफ़ॉर्म की जांच पहले ही पास कर चुके हैं. इस सुविधा को लगातार आगे बढ़ाने में मदद करने के लिए, कंपैटिबिलिटी गैप को कम करना ज़रूरी है.
साल 2021 में अब तक, Safari में 89% से 93% पासिंग टेस्ट किए गए हैं. साथ ही, Chromium एक नए आर्किटेक्चर पर काम कर रहा है, ताकि सीएसएस ग्रिड की ज़्यादा समस्याओं को हल किया जा सके. इसे GridNG कहा जाता है. Microsoft की टीम ने इस कोशिश को अंजाम दिया. इससे, हाल ही में टारगेट किए गए ग्रिड टेस्ट में 94% से 97% तक की बढ़ोतरी हुई. आपको जल्द ही Edge ब्लॉग पर GridNG पर अपडेट मिल सकता है.
सीएसएस position: sticky
Chromium में,
टेबल हेडर के लिए position: sticky
को Tables में लॉन्च होने के बाद ठीक कर दिया गया है. टेबल की रेंडरिंग को फिर से दिखाने के लिए, कई सालों तक चलने वाली कोशिश की गई है.
इस बदलाव और कुछ फ़ाइनल
फ़िक्स के साथ-साथ, Chrome और Edge 93 डेवलपर चैनल को 100% टारगेट किए गए टेस्ट पास करने में मदद मिली.
position: sticky के बाद,
TablesNG ने Chromium की 72 गड़बड़ियों को ठीक किया!
सीएसएस aspect-ratio प्रॉपर्टी
aspect-ratio प्रॉपर्टी से, चौड़ाई-ऊंचाई का अनुपात सेट करना आसान हो जाता है. यह रिस्पॉन्सिव वेब डिज़ाइन के लिए ज़रूरी है. यह कुल लेआउट शिफ़्ट को रोकने का भी एक समाधान है.
aspect-ratio प्रॉपर्टी का इस्तेमाल अब Chrome, Edge, और Firefox के स्टेबल वर्शन के साथ-साथ Safari 15 के बीटा वर्शन में भी किया जा सकता है. जैसे-जैसे क्रॉस-ब्राउज़र सहायता बेहतर हो रही है, वैसे-वैसे इस्तेमाल बढ़ रहा है.
हालांकि, किसी भी ब्राउज़र में 100% पासिंग टेस्ट नहीं किए गए हैं, लेकिन Compat 2021 में जिन पांच क्षेत्रों पर फ़ोकस किया गया है उनमें aspect-ratio के साथ काम करने की क्षमता का गैप सबसे कम है. सभी मुख्य ब्राउज़र के लिए, इसकी टेस्टिंग 90% से ज़्यादा पास हो गई है. आने वाले समय में, हम इस टेस्ट सुइट का इस्तेमाल करके प्रोग्रेस को मॉनिटर करते रहेंगे, ताकि इसे बेहद शानदार बनाया जा सके.
web.dev पर aspect-ratio प्रॉपर्टी के इस्तेमाल और फ़ायदों के बारे में ज़्यादा जानें.
सीएसएस ट्रांसफ़ॉर्म
गड़बड़ियों को ठीक करने और जांच में सुधार, दोनों की वजह से सीएसएस ट्रांसफ़ॉर्म के लिए टारगेट किए गए टेस्ट के नतीजों में धीमा और लगातार सुधार हुआ है.
Chromium की टीम, transform-style:
preserve-3d और transform :perspective() की इंटरऑपरेबिलिटी (दूसरे सिस्टम के साथ काम करना) को बेहतर बनाने पर भी काम कर रही है. हम उम्मीद करते हैं कि अगले अपडेट में हम कुछ और प्रोग्रेस शेयर
करेंगे.
कुल स्कोर में सुधार
मार्च में इस एलान के बाद से, तीनों ब्राउज़र इंजन ने Compat 2021 स्कोर को बेहतर बनाया है:
- Chrome और Edge Dev का वर्शन 86 से 92 हो गया है.
- Firefox 83 से 86 तक चला गया.
- Safari 64 से 82 हो गया.
खास तौर पर, WebKit के उपयोगकर्ताओं के काफ़ी काम की वजह से Safari ने कम्पैटिबिलिटी के अंतर को 18 पॉइंट तक कम किया. खास तौर पर, Igalia की टीम ने aspect-ratio प्रॉपर्टी में योगदान दिया. साथ ही, Flexbox और Grid को बेहतर बनाया गया है, जैसे कि flexbox के लिए gap और कई गड़बड़ियां ठीक की गई हैं.
Compat 2021 की प्रोग्रेस को फ़ॉलो करें
Compat 2021 की प्रोग्रेस को फ़ॉलो करने के लिए, डैशबोर्ड पर नज़र रखें, ईमेल पाने वाले लोगों की सूची की सदस्यता लें या हमसे @chromiumdev से संपर्क करें. अगर आपको कोई समस्या आती है, तो उस ब्राउज़र के लिए गड़बड़ी की शिकायत करें.