इंटरऑप 2022: डेवलपर के लिए वेब को बेहतर बनाने के लिए साथ मिलकर काम करने वाले ब्राउज़र

फ़िलिप जेगेन्स्टेड
फ़िलिप जेगेनस्टेड
रॉबर्ट निमैन
रॉबर्ट निमन

ऐसा पहली बार हुआ है कि सभी प्रमुख ब्राउज़र वेंडर और अन्य हिस्सेदार, मिलकर उन टॉप ब्राउज़र के साथ काम करने की समस्याओं को हल कर रहे हैं जिनकी पहचान वेब डेवलपर ने की है. इंटरऑप 2022, 15 मुख्य क्षेत्रों में वेब के लिए डेवलप करने के अनुभव को बेहतर बनाएगा. इस लेख में बताया गया है कि हम यहां कैसे पहुंचे, इसका मकसद किस पर है, सफलता को कैसे मापा जाएगा, और प्रोग्रेस को ट्रैक करने का तरीका बताया जाएगा.

इसकी शुरुआत 2019 में हुई थी

साल 2019 में, Mozilla, Google, और अन्य लोगों ने डेवलपर की मुश्किलों को समझने के लिए एक बड़ी कोशिश शुरू की थी. इसके लिए, उन्होंने MDN डेवलपर की ज़रूरत के आकलन से जुड़े सर्वे और ब्राउज़र कम्पैटिबिलिटी रिपोर्ट का इस्तेमाल किया. इन रिपोर्ट से, हमें डेवलपर को मिलने वाली बड़ी चुनौतियों का सामना करने के लिए ज़्यादा जानकारी और कार्रवाई करने की सुविधा मिली. इससे, डेवलपर को वेब प्लैटफ़ॉर्म के लिए मुख्य समस्याओं का सामना करना पड़ा. साथ ही, हमने 2021 में किए जाने वाले बदलावों को लागू करने की दिशा में भी काम किया.

अन्य चीज़ों के अलावा, Compat 2021 ने बेहतरीन सुविधाओं को बढ़ावा दिया, जैसे कि सीएसएस ग्रिड (12% इस्तेमाल और लगातार बढ़ रहे) और सीएसएस फ़्लेक्सबॉक्स (77% इस्तेमाल), इनमें gap प्रॉपर्टी फ़्लेक्सबॉक्स शामिल है, जो नए लेआउट के तरीकों को अपनाने में डेवलपर की सबसे बड़ी समस्या हल करती है.

हमें साल 2021 के आखिर में, सभी ऐप्लिकेशन के लिए 90%से ज़्यादा का स्कोर हासिल करने में खुशी हुई!

इंटरऑप 2022 क्या है?

इंटरऑप 2022 एक मानदंड है, जिस पर ब्राउज़र को लागू करने के तीन मुख्य प्रतिनिधियों के प्रतिनिधियों ने सहमति दी है. इसे सार्वजनिक नॉमिनेशन की प्रक्रिया के ज़रिए बनाया गया है. साथ ही, इसे समाज Apple, Bocoup, Google, Igalia, Microsoft, और Mozilla से मिले इनपुट के आधार पर समीक्षा के लिए तैयार किया गया है.

मानदंड उन 15 चीज़ों पर फ़ोकस करता है जिनकी डेवलपर पहचान करता है. ये खास तौर पर तब परेशानी के तौर पर होते हैं, जब वे मौजूद नहीं होते या सभी ब्राउज़र में साथ काम करने से जुड़ी समस्याएं होती हैं. सभी ब्राउज़र वेंडर ने इन क्षेत्रों पर ध्यान देने के लिए सहमति दी है और इसमें शामिल सभी लोग वेब के लिए डेवलप करने के अनुभव को और बेहतर बनाने के लिए उत्साहित हैं.

फ़ोकस के 15 क्षेत्र

इंटरऑप 2022 में इन सुविधाओं पर फ़ोकस किया जाएगा. इसमें 10 नए इलाके शामिल हैं. साथ ही, Compat 2021 के पांच एरिया को भी शामिल किया गया है. हमारा फ़ोकस इन नए विषयों पर है:

लेयर कैस्केड करें

कैस्केड लेयर से, वेब डेवलपर को कैस्केड पर ज़्यादा कंट्रोल मिलता है. इनसे सिलेक्टर को लेयर में ग्रुप करने का विकल्प मिलता है. हर लेयर की अपनी खासियत है. इसका मतलब है कि आपको बेस सीएसएस नियमों को ओवरराइट करने के लिए, अलग-अलग सिलेक्टर को क्रम से लगाने या बहुत ज़्यादा सिलेक्टर बनाने की ज़रूरत नहीं है.

कलर स्पेस और सीएसएस कलर फ़ंक्शन

किसी डिज़ाइन सिस्टम में कलर फ़ंक्शन का इस्तेमाल करने के लिए, आपको फ़िलहाल एचएसएल वैल्यू पर Sass, PostCSS या calc() पर भरोसा करना होगा. सीएसएस में पहले से मौजूद कलर फ़ंक्शन का मतलब है कि रंगों को डाइनैमिक तौर पर अपडेट किया जा सकता है. साथ ही, नए कलर स्पेस, एसआरजीबी गैमट और एचएसएल से जुड़ी सीमाओं को हटा देते हैं.

सीएसएस कलर लेवल 5 में दो फ़ंक्शन हैं, जो वेब प्लैटफ़ॉर्म पर ज़्यादा डाइनैमिक थीमिंग की सुविधा देते हैं:

  • color-mix(): दो रंग लेता है और उन्हें किसी खास कलर स्पेस में, तय मात्रा से मिला देने का नतीजा दिखाता है.
  • color-contrast(): रंगों की सूची में से किसी एक रंग के लिए सबसे ज़्यादा कंट्रास्ट वाले रंग को चुनता है.

ये फ़ंक्शन, बड़े किए गए कलर स्पेस (LAB, LCH, और P3) के साथ काम करते हैं. साथ ही, एचएसएल और एसआरजीबी के अलावा, ये डिफ़ॉल्ट रूप से एलसीएच कलर स्पेस पर काम करते हैं.

व्यूपोर्ट की नई इकाइयां

एमडीएन ब्राउज़र के साथ काम करने की रिपोर्ट 2020 और सीएसएस की नई स्थिति 2021, दोनों में व्यूपोर्ट का साइज़ तय करने में होने वाली समस्याएं अहम हैं. सीएसएस वैल्यू और यूनिट लेवल 4, बड़े, सबसे छोटे, और डाइनैमिक व्यूपोर्ट साइज़, lv*, sv*, और dv* के लिए नई यूनिट जोड़ता है. इन यूनिट की मदद से ऐसे लेआउट बनाने में आसानी होगी जो पता बार को ध्यान में रखते हुए, मोबाइल डिवाइसों पर दिखने वाला व्यूपोर्ट भर सकते हैं.

हर तरह की व्यूपोर्ट यूनिट के लिए, व्यूपोर्ट के अलग-अलग हिस्से.

इसके अलावा, इंटरऑप 2022 से जुड़ी क्रॉस वेंडर टीम, मौजूदा vh यूनिट के साथ-साथ, व्यूपोर्ट मेज़रमेंट की मौजूदा सुविधाओं की इंटरऑपरेबिलिटी (दूसरे सिस्टम के साथ काम करना) की स्थिति पर रिसर्च करने और उन्हें बेहतर बनाने पर मिलकर काम करेगी.

स्क्रोल करना

स्क्रोल करने के बारे में सर्वे 2021 की रिपोर्ट से इस बात की पुष्टि होती है कि स्क्रोल करने की सुविधाओं और स्क्रोल करने की सुविधा को लागू करना मुश्किल है. साथ ही, इसमें कई सुधार करने की ज़रूरत है. सभी प्लैटफ़ॉर्म पर स्क्रोल करना एक जैसा और आसान बनाने के लिए, हम स्क्रोल स्नैप, स्क्रोल-व्यवहार, और ओवरस्क्रोल-व्यवहार पर फ़ोकस करेंगे.

हम स्नैप के लिए स्क्रोल करने की सुविधा के नए प्रस्ताव भी एक्सप्लोर कर रहे हैं.

सबग्रिड

grid-template-columns और grid-template-rows की subgrid वैल्यू का मतलब है कि जिस ग्रिड आइटम में display: grid लागू किया गया है वह पैरंट ग्रिड के हिस्से से ट्रैक की परिभाषा को इनहेरिट कर सकता है.

उदाहरण के लिए, नीचे दिए गए तीन कार्ड कॉम्पोनेंट के हेडर और फ़ुटर, पास के कार्ड के हेडर और फ़ुटर के साथ अलाइन होते हैं. भले ही, हर कार्ड का ग्रिड अलग हो. यह पैटर्न इसलिए काम करता है, क्योंकि हर कार्ड एक ऐसा आइटम है जो पैरंट ग्रिड की तीन लाइनों में फैला होता है. इसके बाद, उन लाइनों को कार्ड में शामिल करने के लिए, सबग्रिड का इस्तेमाल करता है.

तीन कार्ड कॉम्पोनेंट, जहां हेडर और फ़ुटर कार्ड के बीच अलाइन होते हैं.
इसे CodePen पर देखें.

ये भी शामिल हैं

  • सीएसएस कंटेनमेंट (contain प्रॉपर्टी)
  • <dialog> एलिमेंट
  • फ़ॉर्म से जुड़े कंट्रोल
  • टाइपोग्राफ़ी और एन्कोडिंग: इनमें font-variant-alternates, font-variant-position, ic यूनिट, और CJK टेक्स्ट एन्कोडिंग शामिल हैं
  • Web Compat, उन ब्राउज़र के बीच के अंतर पर ध्यान देता है जिनकी वजह से, साइट के साथ काम करने में आने वाली समस्याओं ने असली उपयोगकर्ताओं को प्रभावित किया है

Compat 2021 प्रोजेक्ट में, इन क्षेत्रों में काफ़ी तरक्की हुई है, लेकिन इसमें अब भी सुधार किया जा सकता है. इसलिए, इन्हें इंटरऑप 2022 में शामिल किया गया है, ताकि बाकी समस्याओं को ठीक किया जा सके.

  • आसपेक्ट रेशियो
  • फ़्लेक्सबॉक्स
  • GRid
  • स्टिकी पोज़िशनिंग (एक तरह का सिस्टम)
  • रूपांतरण

जांच की कोशिशें

इंटरऑप 2022 में 15 अहम क्षेत्रों के अलावा, जांच की तीन कोशिशें शामिल हैं. ये ऐसे क्षेत्र हैं जिनमें समस्याएं हैं और इनमें सुधार की ज़रूरत है, लेकिन टेस्ट के नतीजों का इस्तेमाल करके, मौजूदा स्पेसिफ़िकेशन या जांच की स्थिति इतनी अच्छी नहीं है कि इस वजह से, स्कोर किया जा सके:

  • बदलाव किया जा रहा है, contenteditable और execCommand
  • पॉइंटर और माउस इवेंट
  • व्यूपोर्ट मेज़रमेंट

ब्राउज़र वेंडर और अन्य हिस्सेदार, इन क्षेत्रों के टेस्ट और खास जानकारी को बेहतर बनाने के लिए मिलकर काम करेंगे, ताकि आने वाले समय में होने वाली इस कोशिश में उन्हें भी शामिल किया जा सके.

सफलता को मापना और प्रोग्रेस को ट्रैक करना

हर ब्राउज़र के लिए स्कोर - Chrome और Edge के लिए 71, Firefox के लिए 74, Safari टेक्नोलॉजी झलक के लिए 73.

मौजूदा वेब-प्लैटफ़ॉर्म टेस्ट डैशबोर्ड का इस्तेमाल, 15 अहम क्षेत्रों में प्रोग्रेस को ट्रैक करने के लिए किया जाएगा. हर इलाके के लिए, टेस्ट के एक सेट की पहचान की गई है. इसके बाद ब्राउज़र को इन परीक्षणों के लिए स्कोर दिया जाता है, जिससे प्रत्येक क्षेत्र के लिए स्कोर और सभी 15 क्षेत्रों को कुल स्कोर मिलता है.

गेम की प्रोग्रेस को ट्रैक करने और इसे ट्रैक करने के लिए, इंटरऑप 2022 का डैशबोर्ड देखें. इस साल के दौरान, प्लैटफ़ॉर्म को इस्तेमाल किया जा सकता है और यह देखा जा सकता है कि आपने जो प्लैटफ़ॉर्म बनाया है वह कितना बेहतर हो रहा है.

सभी प्रमुख वेब ब्राउज़र के लिए कई क्षेत्रों के स्कोर के साथ टेबल की इमेज
wpt.fyi/interop-2022 पर हर फ़ोकस एरिया के लिए, सभी ब्राउज़र स्कोर देखें.

डेवलपर पर इन बदलावों का क्या असर होगा?

कई सालों से इंटरऑपरेबिलिटी की इन कोशिशों का मकसद, Compat 2021, इंटरऑप 2022 वगैरह के रूप में, उन समस्याओं को पूरी तरह से स्वीकार करना और उनका हल निकालना है जिनका सामना डेवलपर ने पिछले कई सालों से किया है. यह सिर्फ़ एक ब्राउज़र की कोशिश नहीं है, बल्कि पूरी दुनिया के वेब प्लैटफ़ॉर्म को बेहतर बनाने के लिए सभी बड़े ब्राउज़र वेंडर और दोस्तों के बीच मज़बूत सहयोग है.

संक्षेप में, हमारा लक्ष्य वेब प्लैटफ़ॉर्म को डेवलपर के लिए ज़्यादा उपयोगी और भरोसेमंद बनाना है, ताकि वे ब्राउज़र में अलग-अलग तरह की गड़बड़ियों के बजाय, शानदार वेब अनुभव तैयार करने में ज़्यादा समय लगा सकें.

हमें आपकी राय का इंतज़ार है

अगर कंपैट 2021 के दौरान किए गए सुधारों या इंटरऑप 2022 में शामिल किसी भी सुविधा के बारे में आपका कोई सुझाव, शिकायत या राय है, तो हमें बताएं. इनमें से कौनसी सुविधा आपके काम को बेहतर बनाएगी? आप वास्तव में किस बारे में उत्साहित हैं? GitHub रेपो से जुड़ी फ़ाइल से जुड़ी समस्याएं या हमें Twitter पर बताएं.

इंटरऑप 2022 के बारे में ज़्यादा जानकारी: