Interop 2025: वेब प्लैटफ़ॉर्म में सुधार का एक और साल

Rachel Andrew

पब्लिश होने की तारीख: 13 फ़रवरी, 2025

Interop 2024 की ज़बरदस्त सफलता के बाद, यह प्रोजेक्ट 2025 के लिए, फ़ोकस किए जाने वाले नए विषयों के साथ आज वापस आ गया है. इस साल हमें मिले हर सुझाव को शामिल नहीं किया जा सका. हालांकि, फ़ाइनल सूची में वेब प्लैटफ़ॉर्म से जुड़ी सभी चीज़ें शामिल हैं. जैसे, सीएसएस से लेकर परफ़ॉर्मेंस से जुड़ी सुविधाएं.

साल 2025 के लिए फ़ोकस एरिया

• ऐंकर की पोज़िशनिंग
• backdrop-filter
• Core Web Vitals
• <details> एलिमेंट
• लेआउट
• मॉड्यूल
• Navigation API
• पॉइंटर और माउस इवेंट
• म्यूटेशन इवेंट हटाना
• @scope
• scrollend इवेंट
• Storage Access API
• text-decoration
• URLPattern
• View Transition API
• WebAssembly
• वेब के साथ काम करना
• WebRTC
• लिखने के मोड

इसके अलावा, पिछले सालों की तरह ही, जांच के लिए कुछ क्षेत्रों को चुना गया है. इन विषयों के बारे में हमारे पास ज़रूरत के मुताबिक जानकारी या जांच नहीं है, ताकि इन्हें फ़ोकस के तौर पर शामिल किया जा सके. हालांकि, ग्रुप को लगता है कि इन्हें इस लेवल पर लाने के लिए कुछ काम किए जाने चाहिए, ताकि इन्हें शामिल किया जा सके.

• सुलभता की जांच करना
• Gamepad API की जांच
• मोबाइल टेस्टिंग
• निजता की जांच
• WebVTT

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

wpt.fyi/interop-2025 पर जाकर, Interop 2025 के डैशबोर्ड पर इस प्रोसेस को देखा जा सकता है. साथ ही, जब कोई सुविधा 'बेसलाइन के तौर पर नई सुविधा' के तौर पर उपलब्ध हो जाएगी, तो वह webstatus.dev पर मौजूद, बेसलाइन 2025 की सूची में भी दिखेगी.

सीएसएस और यूज़र इंटरफ़ेस (यूआई)

Interop 2025 में शामिल कई सुविधाएं ऐसी हैं जिन्हें आपने सीएसएस की स्थिति से जुड़े 2024 के सर्वे में, अहम के तौर पर फ़्लैग किया था. इनसे आपको बेहतर और शानदार उपयोगकर्ता अनुभव देने में मदद मिलेगी.

ऐंकर की पोज़िशनिंग

इस सुविधा की मदद से, किसी एलिमेंट को ऐंकर पर ऐंकर किया जा सकता है. यह सुविधा, पॉपओवर दिखाते समय खास तौर पर काम की होती है.

इस सुविधा को Baseline का हिस्सा बनाने से, उपयोगकर्ता इंटरफ़ेस बनाना बहुत आसान हो जाएगा. इसके लिए, तीसरे पक्ष की लाइब्रेरी का इस्तेमाल करने की ज़रूरत नहीं होगी. ऐंकर पोज़िशनिंग के दस्तावेज़ में और MDN—सीएसएस ऐंकर पोज़िशनिंग पर ज़्यादा जानें.

एक ही दस्तावेज़ के व्यू के बीच ट्रांज़िशन

इस साल, व्यू ट्रांज़िशन भी शामिल किए गए हैं. खास तौर पर, एक ही दस्तावेज़ के व्यू ट्रांज़िशन और view-transition-class सीएसएस प्रॉपर्टी.

व्यू ट्रांज़िशन के बारे में ज़्यादा जानने के लिए, एक पेज वाले ऐप्लिकेशन के लिए, एक ही दस्तावेज़ के व्यू ट्रांज़िशन और व्यू ट्रांज़िशन के लिए MDN दस्तावेज़ देखें.

backdrop-filter प्रॉपर्टी

backdrop-filter प्रॉपर्टी, सितंबर 2024 से बेसलाइन के तौर पर उपलब्ध है. इससे आपको अपने वीडियो के पीछे इफ़ेक्ट बनाने की सुविधा मिलती है. उदाहरण के लिए, ऐसे इफ़ेक्ट बनाने या धुंधला करने के लिए जो शायद आपके हिसाब से सिर्फ़ ग्राफ़िक ऐप्लिकेशन में उपलब्ध हों.

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

<details> एलिमेंट

<details> एलिमेंट, जानकारी ज़ाहिर करने वाला विजेट है. इसमें ज़्यादा कॉन्टेंट देखने के लिए, उसे बड़ा किया जा सकता है. <details> एलिमेंट, बेसलाइन के तौर पर व्यापक रूप से उपलब्ध है. हालांकि, हाल ही में कई ऐसी सुविधाएं जोड़ी गई हैं जो इस सुविधा से जुड़ी हैं. इनकी मदद से, <details> को ज़्यादा काम का बनाया जा सकता है.

• ::marker और ::details-content सीएसएस सूडो-एलिमेंट.
• कॉन्टेंट को टॉगल करने के लिए, display के बजाय content-visibility का इस्तेमाल करना.
• पेज पर खोजने की सुविधा से मैच होने वाले शब्दों की मदद से, <details> एलिमेंट को अपने-आप बड़ा करना.
• hidden="until-found" एट्रिब्यूट, जो किसी एलिमेंट को तब तक छिपा देता है, जब तक उसे ब्राउज़र के 'पेज में खोजें' सुविधा का इस्तेमाल करके ढूंढा नहीं जाता या सीधे तौर पर किसी यूआरएल फ़्रैगमेंट का इस्तेमाल करके उस पर नेविगेट नहीं किया जाता.

सीएसएस @scope at-rule

@scope at-rule की मदद से, अपने सेलेक्टर को डीओएम के सब-ट्री तक सीमित किया जा सकता है. इसके अलावा, ट्री में ऊपरी और निचली सीमा के बीच भी चुना जा सकता है. उदाहरण के लिए, यहां दी गई सीएसएस, .card क्लास वाले एलिमेंट में सिर्फ़ <img> एलिमेंट चुनती है.

@scope (.card) {
  img {
    border-color: green;
  }
}

अगले उदाहरण में, ऊपरी और निचली सीमा का इस्तेमाल किया गया है. <img> एलिमेंट सिर्फ़ तब चुना जाता है, जब वह .card क्लास वाले एलिमेंट के बीच में हो और .card__content क्लास वाले एलिमेंट के बाहर हो.

@scope (.card) to (.card__content) {
  img {
    border-color: green;
  }
}

सीएसएस @scopeat-rule की मदद से, अपने सिलेक्टर की पहुंच को सीमित करने और MDN पर @scopeदस्तावेज़ में, @scope का इस्तेमाल करने के तरीके के बारे में ज़्यादा जानें.

scrollend इवेंट

scrollend इवेंट के बिना, यह पता लगाने का कोई भरोसेमंद तरीका नहीं है कि स्क्रोल पूरा हो गया है. setTimeout() का इस्तेमाल करके, यह देखा जा सकता है कि स्क्रॉल करना कब बंद हुआ. इससे यह इवेंट, स्क्रोल खत्म होने के बजाय, स्क्रोल रोके जाने के इवेंट की तरह लगता है.

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

scrollend इवेंट की मदद से, ब्राउज़र आपके लिए यह मुश्किल आकलन करता है.

document.onscrollend = event => {
  // ...
}

Scrollend, एक नया JavaScript इवेंट में और scrollend के लिए MDN दस्तावेज़ में भी ज़्यादा उदाहरण देखें.

text-decoration प्रॉपर्टी

text-decoration प्रॉपर्टी, text-decoration-line, text-decoration-color, text-decoration-style, और text-decoration-thickness के लिए शॉर्टहैंड है. इसे बेसलाइन के तौर पर माना जाता है, जो ज़्यादातर ब्राउज़र पर काम करती है. हालांकि, Safari में बिना प्रीफ़िक्स वाली सिर्फ़ text-decoration-line शॉर्टहैंड प्रॉपर्टी काम करती है. इस समस्या को साल 2025 में ठीक किया जाएगा.

लिखने के मोड

सीएसएस writing-mode प्रॉपर्टी में कई वैल्यू हो सकती हैं. इनमें से कई वैल्यू, वर्टिकल तौर पर दिखने वाली स्क्रिप्ट को लेआउट करने के लिए डिज़ाइन की गई हैं. हालांकि, कभी-कभी आपको भाषा के हिसाब से टेक्स्ट को वर्टिकल तौर पर व्यवस्थित करने के बजाय, डिज़ाइन के हिसाब से ऐसा करना पड़ता है. sideways-lr और sideways-rl वैल्यू को इस काम के लिए डिज़ाइन किया गया है. हालांकि, इनकी वजह से ब्राउज़र के साथ काम करने में समस्या आती है. यह समस्या 2025 में ठीक हो जाएगी.

इसके अलावा, लॉजिकल सीएसएस प्रॉपर्टी overflow-inline और overflow-block भी शामिल हैं. इनकी मदद से यह कंट्रोल किया जा सकता है कि लिखने के मोड के बावजूद, बॉक्स में कॉन्टेंट भर जाने पर क्या करना है.

Core Web Vitals

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

इंटरऑपरेबिलिटी 2025 में, सभी ब्राउज़र पर LargestContentfulPaint API और Event Timing API लागू करके, सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी) और पेज के रिस्पॉन्स में लगने वाला समय (आईएनपी) मेट्रिक शामिल हैं. कुल लेआउट शिफ़्ट (सीएलएस) मेट्रिक का इस्तेमाल नहीं किया जा सकता.

LCP API

इवेंट टाइमिंग एपीआई (INP के लिए)

WebAssembly (Wasm)

WebAssembly API की मदद से, WebAssembly कोड को लोड किया जा सकता है. यह एक ऐसा कोड है जिसे किसी भी डिवाइस पर चलाया जा सकता है. इसकी मदद से, ब्राउज़र में पूरा ब्लॉग ऐप्लिकेशन चलाया जा सकता है. इसमें, सर्वर की सभी ज़रूरी शर्तें भी शामिल हैं!

इस साल, इन सुविधाओं पर काम किया जाएगा:

• JavaScript स्ट्रिंग बिल्ट-इन: WebAssembly के बिल्ट-इन स्ट्रिंग फ़ंक्शन को JavaScript स्ट्रिंग एपीआई के सबसेट को मिरर करने के लिए, ताकि इसे JavaScript ग्लू कोड के बिना कॉल किया जा सके.
• साइज़ बदलने लायक बफ़र इंटिग्रेशन: साइज़ बदलने लायक बफ़र का इस्तेमाल करने वाले JavaScript कोड में, WebAssembly को इंटिग्रेट करने के लिए.

सुविधाएं हटाना

इस साल, प्रोजेक्ट में प्लैटफ़ॉर्म से हटाने की सुविधा भी शामिल है. बदलाव के तौर पर होने वाली इवेंट का इस्तेमाल बंद कर दिया गया है. साथ ही, इन्हें बदलाव के तौर पर होने वाली गतिविधि को मॉनिटर करने वाले एपीआई से बदल दिया गया है. यह एपीआई, बेहतर परफ़ॉर्म करता है और बेसलाइन के तौर पर सभी के लिए उपलब्ध है. Chrome ने इन इवेंट को Chrome 126 में हटा दिया है. हमारा मकसद, इन्हें सभी ब्राउज़र से हटाना है.

इतिहास और इन इवेंट को हटाए जाने की वजह जानने के लिए, Chrome से म्यूटेशन इवेंट हटाए जाएंगे लेख पढ़ें.

ज़्यादा जानें

सुविधाओं की पूरी सूची की जानकारी, प्रोजेक्ट के README में मिल सकती है. साथ ही, Interop 2025 पर काम करने वाली अन्य कंपनियों की पोस्ट भी पढ़ें.

• Apple
• Bocoup
• Igalia
• Microsoft
• Mozilla