Compat 2021 के बारे में साल का आखिरी अपडेट. इसके ज़रिए, ब्राउज़र के साथ काम करने से जुड़ी समस्याओं को खत्म करने के लिए, सीएसएस Flexbox, CSS Grid, पोज़िशन: स्टिकी, आसपेक्ट रेशियो, और सीएसएस ट्रांसफ़ॉर्म का इस्तेमाल किया गया है.
साल खत्म होने वाला है और अब Compat 2021 को अपडेट करने का समय आ गया है. इसके लिए, हम पांच मुख्य क्षेत्रों में, ब्राउज़र के साथ काम करने से जुड़ी समस्याओं को खत्म करने की कोशिश कर रहे हैं.
90% से ज़्यादा
सभी ब्राउज़र में स्कोर करें
हमारे पिछले अपडेट के बाद से, हम सभी ब्राउज़र में सुधार देख रहे हैं. साल की शुरुआत में सभी ब्राउज़र के टेस्ट स्कोर काफ़ी कम हो गए थे, लेकिन अब सभी ब्राउज़र 90% से ज़्यादा हो गए हैं! इसका मतलब है कि वेब प्लैटफ़ॉर्म ने पांच अहम क्षेत्रों की इंटरऑपरेबिलिटी में काफ़ी सुधार किया है.
ब्राउज़र इंजन में योगदान सिर्फ़ ब्राउज़र वेंडर ही नहीं, बल्कि वेब समुदाय के अन्य लोग भी देते हैं. इस प्रोजेक्ट के लिए, हम खास तौर पर इगालिया को उनकी भागीदारी के लिए धन्यवाद देना चाहते हैं और स्कोर को बेहतर बनाने के लिए लगातार काम करना चाहते हैं. इगालिया ने Compat 2021 के सभी पांच मुख्य क्षेत्रों को बेहतर बनाने में अपना योगदान दिया है.
wpt.fyi के लिए, जांच के नतीजों का डैशबोर्ड, पर अब जांच के नतीजों का फ़िल्टर किया गया व्यू दिखेगा. इसमें Compat 2021 में शामिल किए गए सभी टेस्ट दिखेंगे. साथ ही, Chrome, Firefox, और Safari के व्यू भी दिखेंगे. इनमें जुलाई में हमारे पिछले अपडेट के नतीजे शामिल होंगे.
आइए, हर क्षेत्र में होने वाले सुधार पर एक नज़र डालें!
सीएसएस फ़्लेक्सबॉक्स
flex-basis: content अब सभी ब्राउज़र पर
Chromium और
WebKit पर लागू होने वाला है. (content वैल्यू पहले से ही
Gecko पर काम करती थी.)
Chromium में, फ़्लेक्सबॉक्स के साइज़ की समस्या को ठीक किया गया है. यह गड़बड़ी और गेको के व्यवहार से मेल खाती है. Gecko में, Comat 2021 पर असर डालने वाली कई समस्याओं को ठीक किया गया. इनमें फ़्लेक्स आइटम पर लंबाई के प्रतिशत से जुड़ी समस्या भी शामिल है. आखिर में, WebKit में, अलाइनमेंट प्रॉपर्टी की ज़्यादा वैल्यू (लेफ़्ट, राइट, self-start, Self-end, start, end) अब जोड़ दी गई है. साथ ही, सटीक पोज़िशनिंग के लिए भी कई सुधार किए गए हैं. इससे Compat 2021 में, फ़्लेक्सबॉक्स टेस्ट के नतीजों को भी बेहतर बनाया गया है.
सीएसएस ग्रिड
वेब पर सीएसएस ग्रिड का इस्तेमाल लगातार बढ़ रहा है. जैसा कि 2021 के वेब कैलेंडर और Chrome की इस्तेमाल से जुड़ी मेट्रिक, दोनों में देखा जा सकता है.
Chrome और Edge 93 में GridNG को लॉन्च किया गया. इससे ग्रिड से जुड़ी, लंबे समय से चल रही कई समस्याओं को हल किया गया. इससे Chromium के बग ट्रैकर में मौजूद 38 समस्याओं को हल किया गया. कई छोटे सुधारों के साथ-साथ, Chromium में ग्रिड के लिए Compat 2021 स्कोर में 3% से 97% तक का सुधार हुआ. इस काम को Microsoft की Edge टीम करती है.
Gecko में, ग्रिड को प्रभावित करने वाली सटीक पोज़िशनिंग की गड़बड़ी को ठीक किया गया. वहीं, WebKit में कई सुधार लागू हुए. इससे Firefox के लिए 1% और ग्रिड टेस्ट पर Safari के लिए 3% सुधार हुआ.
सीएसएस position: sticky
पिछले अपडेट में, हमने बताया कि position: sticky वह पहला एरिया था जहां किसी भी ब्राउज़र (इस मामले में, Chrome और Edge) को 100% टेस्ट पास हुए. अब, WebKit के लागू होने पर कई सुधारों के बाद, Safari इन जांचों में भी 100% स्कोर करता है. इनमें से ज़्यादातर सुधार Safari 15
में शामिल किए गए थे.
सीएसएस aspect-ratio प्रॉपर्टी
एलिमेंट के आसपेक्ट रेशियो (चौड़ाई-से-ऊंचाई का अनुपात) तय करने के लिए, क्रॉस-ब्राउज़र सपोर्ट लगातार बेहतर हो रहा है. Compat 2021 में Chrome/Edge, Firefox, और Safari के लिए स्कोर 99%, 97%, और 95% रहा. ज़्यादातर सुधार, aspect-ratio प्रॉपर्टी के साथ नहीं, बल्कि इस बात पर आधारित हैं कि एलिमेंट के लिए, width और height एट्रिब्यूट को डिफ़ॉल्ट aspect-ratio वैल्यू पर कैसे मैप किया जाता है. इसे WebKit में एक से ज़्यादा एलिमेंट और Chromium
के लिए <canvas> के लिए लागू किया गया था.
सीएसएस ट्रांसफ़ॉर्म
transform: perspective(none) के लिए अब
Chromium,
Gecko, और
WebKit में सहायता उपलब्ध है. इससे किसी नज़रिए और नज़रिए के बीच
ऐनिमेट करना आसान हो जाएगा.
Chromium में, transform-style: preserve-3d (जिसकी मदद से चाइल्ड एलिमेंट एक ही 3D सीन में हिस्सा ले सकते हैं) और perspective प्रॉपर्टी (इससे चाइल्ड एलिमेंट में पर्सपेक्टिव ट्रांसफ़ॉर्मेशन को लागू किया जाता है) को अब खास जानकारी के हिसाब से अलाइन किया गया है. ऐसा इसलिए किया गया है, ताकि ये सिर्फ़ चाइल्ड एलिमेंट पर लागू हों.
सभी ब्राउज़र के लिए सीएसएस के स्कोर में बड़ी बढ़ोतरी की मुख्य वजह टेस्ट सुइट में किए गए सुधारों की वजह से है, जिनमें गलत जांच को ठीक किया गया है या उन्हें हटा दिया गया है. इससे इंटरऑपरेबिलिटी से जुड़ी बाकी समस्याओं को समझना आसान हो जाता है और आने वाले समय में रिग्रेशन से बचा जा सकता है.
नतीजा
इस साल के आखिर में, स्कोर और टेस्ट इन्फ़्रास्ट्रक्चर में कई सुधार करने के लिए, सभी लोगों ने जो काम किया उसके लिए हम उनके शुक्रगुज़ार हैं. aspect-ratio एक ऐसी सुविधा थी जिसके लिए वेब डेवलपर ने लंबे समय से अनुरोध किया था. अब यह सभी ब्राउज़र पर काम करती है. फ़्लेक्सबॉक्स, ग्रिड, और position: sticky का इस्तेमाल तेज़ी से बढ़ रहा है. साल 2021 में किए गए कई सुधारों की वजह से, अब ये सुविधाएं सभी ब्राउज़र पर बेहतर तरीके से काम करती हैं.
आगे क्या करना है? हम ब्राउज़र के अन्य वेंडर और ज़्यादा लोगों के साथ मिलकर काम करने के लिए उत्साहित हैं. हम इस कोशिश को और बेहतर बनाने की दिशा में आगे बढ़ रहे हैं. हमने 2022 के लिए जिन इलाकों के अहम क्षेत्रों पर रिसर्च की है और उन पर चर्चा की है. जल्द ही आने वाले एलान पर नज़र रखें.
अगर आपका कोई सुझाव, राय या सवाल है, तो कृपया @ChromiumDev पर हमसे Twitter पर संपर्क करें.