इंटरऑप 2023: डेवलपर के लिए वेब को बेहतर बनाने का काम जारी रखना

साल 2023 में भी सभी बड़े ब्राउज़र वेंडर और अन्य हिस्सेदार, साथ मिलकर काम कर रहे थे, ताकि टॉप ब्राउज़र के साथ काम करने से जुड़ी समस्याओं को हल किया जा सके.

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

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

इंटरऑप 2023 से जुड़े अहम विषय

इस समय, हमारे पास 26 से कम फ़ोकस एरिया नहीं हैं. इनके बारे में, प्रोजेक्ट के दस्तावेज़ में ज़्यादा जानकारी दी गई है. इन्हें वर्णमाला के क्रम में रखा गया है:

आपको MDN वेब दस्तावेज़ पर आधारित वेब प्लैटफ़ॉर्म टेस्ट में जाकर, अपनी ज़रूरत के हिसाब से सभी काम की जानकारी मिल सकती है. हालांकि, यहां कुछ ऐसे विषय दिए गए हैं जो आपको पसंद आ सकते हैं.

कंटेनर क्वेरी

डेवलपर कई सालों से, कंटेनर की क्वेरी के लिए मुख्य अनुरोध करते आ रहे हैं. साल 2022 में, Chrome और Safari ने इसे शिप कर दिया है. Firefox को उम्मीद है कि वह Firefox 110 में कंटेनर क्वेरी को शिप करेगा. साथ ही, फ़ोकस क्षेत्र के टेस्ट से यह पक्का करने में मदद मिलती है कि कंटेनर क्वेरी, क्रॉस-ब्राउज़र और ज़रूरत के हिसाब से सही तरीके से काम करती हैं.

:has(...)

डेवलपर लंबे समय से, सीएसएस में पैरंट सिलेक्टर के लिए अनुरोध कर रहे हैं. :has() स्यूडो-क्लास की मदद से, पैरंट सिलेक्टर के इस्तेमाल के कई उदाहरण दिए जा सकते हैं. साथ ही, रेफ़रंस एलिमेंट के हिसाब से पिछले सिबलिंग एलिमेंट को चुना जा सकता है. उदाहरण के लिए, इससे किसी ऐसी इमेज का स्टाइल तय किया जा सकता है जिसमें कैप्शन मौजूद है और जिसका कैप्शन नहीं है. has() के इस्तेमाल के उदाहरणों के बारे में ज़्यादा जानने के लिए, :has(), फ़ैमिली सिलेक्टर में जाएं.

कस्टम प्रॉपर्टी

सीएसएस कस्टम प्रॉपर्टी को सीएसएस वैरिएबल भी कहा जाता है. इनकी मदद से, किसी स्टाइलशीट में एक बार वैल्यू तय की जा सकती है. साथ ही, कई जगहों पर उसका फिर से इस्तेमाल किया जा सकता है. इससे दोहराव कम होता है. उदाहरण के लिए, किसी स्टाइलशीट में एक बार सामान्य रंग या फ़ॉन्ट साइज़ तय किया जा सकता है और इसे सभी कॉम्पोनेंट में इस्तेमाल किया जा सकता है. ब्राउज़र में, कस्टम प्रॉपर्टी के लिए बुनियादी सहायता लंबे समय से मौजूद है. इंटरऑप 2023, @property के नियम पर फ़ोकस करता है. @property, स्टाइलशीट में कस्टम प्रॉपर्टी रजिस्ट्रेशन को दिखाता है. इससे प्रॉपर्टी के टाइप की जांच की जा सकती है और डिफ़ॉल्ट वैल्यू सेट की जा सकती है. साथ ही, यह भी तय किया जा सकता है कि प्रॉपर्टी पर वैल्यू इनहेरिट होनी चाहिए या नहीं. ज़्यादा जानकारी के लिए, @property: सीएसएस वैरिएबल को सुपरपावर देना पर जाएं.

सीएसएस मास्किंग

सीएसएस मास्किंग, इमेज इफ़ेक्ट लागू करने के तरीके बताता है, जैसा कि आपको सीएसएस का इस्तेमाल करके किसी ग्राफ़िक ऐप्लिकेशन में दिख सकता है. मास्किंग की कई प्रॉपर्टी एक-दूसरे से जुड़ी हुई हैं. इस वजह से, मास्किंग की सुविधा को इस्तेमाल करना थोड़ा मुश्किल हो रहा है. इस तरीके से, डेवलपर को क्रॉस-ब्राउज़र में क्रिएटिव इफ़ेक्ट का इस्तेमाल करने में मदद मिलेगी. इमेज पर इफ़ेक्ट लागू करने के बारे में ज़्यादा जानने के लिए, इमेज को मास्क करने से जुड़ा यह लेख पढ़ें.

OffscreenCanvas

<canvas> एलिमेंट और Canvas API की मदद से, स्क्रिप्ट के हिसाब से स्क्रीन पर ग्राफ़िक बनाए जा सकते हैं. हालांकि, इससे परफ़ॉर्मेंस से जुड़ी समस्याएं हो सकती हैं, क्योंकि काम उसी थ्रेड पर पूरा होता है जिस पर उपयोगकर्ता इंटरैक्शन करता है. OffscreenCanvas की मदद से डेवलपर को एक कैनवस मिलता है. इसे DOM और Canvas API से अलग किया जाता है. डेवलपर, मुख्य थ्रेड से अलग किसी वेब वर्कर में भी रेंडरिंग टास्क चला सकते हैं. offscreenCanvas की परफ़ॉर्मेंस के फ़ायदों के बारे में ज़्यादा जानें.

पॉइंटर और माउस इवेंट

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

WebCodecs

WebCodecs API की मदद से डेवलपर, वीडियो के अलग-अलग फ़्रेम और ऑडियो के अलग-अलग हिस्सों को ऐक्सेस कर सकते हैं. यह ब्राउज़र में पहले से मौजूद कोडेक और उनसे इंटरैक्ट करने के लिए, अलग-अलग इंटरफ़ेस का ऐक्सेस देता है. WebCodecs के साथ वीडियो प्रोसेसिंग लेख में, अलग-अलग फ़्रेम को कैनवस पर डिकोड करने और रेंडर करने के लिए, एपीआई का इस्तेमाल करने का तरीका बताया गया है.

वेब कॉम्पोनेंट

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

डैशबोर्ड

इंटरऑप 2023 डैशबोर्ड पर पूरे साल की प्रोग्रेस को फ़ॉलो करें. यहां आपको मौजूदा स्कोर और सभी मुख्य ब्राउज़र इंजन में जिन क्षेत्रों में ध्यान देने की ज़रूरत है, उनकी स्थिति दिखेगी.

इंटरऑप के लिए कुल स्कोर: 62, जांच: 0 और हर ब्राउज़र के लिए स्कोर - Chrome और Edge के लिए 86, Firefox के लिए 74, Safari टेक्नोलॉजी प्रीव्यू के लिए 86.
इंटरऑप 2023 डैशबोर्ड (स्क्रीनशॉट 31 जनवरी, 2023 को लिया गया).

फ़ोकस एरिया में मौजूद स्कोर, टेस्ट पास करने की दरों के आधार पर तय किए जाते हैं. अगर आपका कोई सुझाव, राय या शिकायत है या आपको डब्ल्यूपीटी को बेहतर बनाने में अपना योगदान देना है, तो कृपया स्कोरिंग के लिए इस्तेमाल किए जाने वाले टेस्ट के सेट को अपडेट करने का अनुरोध करें.

ब्राउज़र स्कोर और कुल इंटरऑप स्कोर के साथ सभी एक्टिव फ़ोकस क्षेत्रों की सूची
सभी ऐक्टिव फ़ोकस एरिया और उनका कुल इंटरऑप स्कोर.

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