अक्टूबर में वेब प्लैटफ़ॉर्म पर नई सुविधाएं

अक्टूबर 2025 में, स्टेबल और बीटा वर्शन वाले वेब ब्राउज़र में उपलब्ध हुई कुछ दिलचस्प सुविधाओं के बारे में जानें.

Rachel Andrew

पब्लिश होने की तारीख: 30 अक्टूबर, 2025

ब्राउज़र के स्टेबल वर्शन की रिलीज़

अक्टूबर में, Chrome 142 और Firefox 144 के स्टेबल वर्शन रिलीज़ किए गए थे. इस पोस्ट में बताया गया है कि वेब प्लैटफ़ॉर्म के लिए इसका क्या मतलब है.

सिंगल-पेज ऐप्लिकेशन के लिए व्यू ट्रांज़िशन एपीआई

Firefox 144 में, एक ही दस्तावेज़ में व्यू ट्रांज़िशन की सुविधा काम करती है. इसमें इनके लिए सहायता शामिल है:

• :active-view-transition स्यूडो-क्लास
• view-transition-class प्रॉपर्टी
• view-transition-name प्रॉपर्टी
• ::view-transition सूडो-एलिमेंट
• ::view-transition-group() सूडो-एलिमेंट
• ::view-transition-image-pair() सूडो-एलिमेंट
• ::view-transition-new() सूडो-एलिमेंट
• ::view-transition-old() सूडो-एलिमेंट

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

<button> एलिमेंट पर मौजूद command और commandfor एट्रिब्यूट

Firefox 144, command और commandfor के साथ काम करता है. इन एट्रिब्यूट के बारे में ज़्यादा जानने के लिए, command और commandfor के बारे में जानकारी लेख पढ़ें.

moveBefore() तरीका

moveBefore() मेथड अब Firefox पर Element, DocumentFragment, और Document इंटरफ़ेस पर काम करता है. इसकी मदद से, ऑब्जेक्ट के किसी चाइल्ड एलिमेंट को उसके दूसरे चाइल्ड एलिमेंट से पहले ले जाया जा सकता है. इस दौरान, दोनों एलिमेंट अपनी स्थिति में बने रहते हैं.

moveBefore() की मदद से, DOM में बदलाव के दौरान स्थिति बनाए रखना लेख में इसके बारे में ज़्यादा जानें.

:target-before और :target-after सूडो-क्लास

Chrome 142 में ऐसे सूडो-क्लास जोड़े गए हैं जो एक ही स्क्रोल मार्कर ग्रुप में, ऐक्टिव मार्कर (:target-current से मैच करने वाले) से पहले या बाद में मौजूद स्क्रोल मार्कर से मैच करते हैं. इन्हें फ़्लैट ट्री के क्रम के हिसाब से तय किया जाता है:

• :target-before: यह ग्रुप में फ़्लैट ट्री के क्रम में, चालू मार्कर से पहले आने वाले सभी स्क्रोल मार्कर से मेल खाता है.
• :target-after: यह ग्रुप में फ़्लैट ट्री के क्रम में, चालू मार्कर के बाद आने वाले सभी स्क्रोल मार्कर से मेल खाता है.

स्टाइल कंटेनर क्वेरी और if() के लिए रेंज सिंटैक्स

Chrome 142, सीएसएस स्टाइल क्वेरी और if() फ़ंक्शन को बेहतर बनाता है. इसके लिए, इसमें रेंज सिंटैक्स का इस्तेमाल किया जाता है.

यह स्टाइल क्वेरी को, वैल्यू के सटीक मिलान से आगे बढ़ाता है. उदाहरण के लिए, style(--theme: dark). डेवलपर, तुलना ऑपरेटर (जैसे कि > और <) का इस्तेमाल करके, कस्टम प्रॉपर्टी, लिटरल वैल्यू (उदाहरण के लिए, 10 पिक्सल या 25%) की तुलना कर सकते हैं. साथ ही, attr() और env() जैसे सब्स्टिट्यूशन फ़ंक्शन से मिली वैल्यू की तुलना कर सकते हैं. तुलना सही तरीके से करने के लिए, दोनों तरफ़ के डेटा का टाइप एक जैसा होना चाहिए. यह सिर्फ़ इन संख्यात्मक टाइप के लिए उपलब्ध है: <length>, <number>, <percentage>, <angle>, <time>, <frequency>, और <resolution>.

दिलचस्पी बढ़ाने वाले (interestfor एट्रिब्यूट)

Chrome 142, <button> और <a> एलिमेंट में interestfor एट्रिब्यूट भी जोड़ता है. इस एट्रिब्यूट से, एलिमेंट में "दिलचस्पी" से जुड़ी गतिविधियां जोड़ी जाती हैं. जब कोई उपयोगकर्ता एलिमेंट में दिलचस्पी दिखाता है, तो टारगेट एलिमेंट पर कार्रवाइयां ट्रिगर होती हैं. उदाहरण के लिए, पॉपओवर दिखाना.

उपयोगकर्ता एजेंट यह पता लगाता है कि उपयोगकर्ता ने एलिमेंट में दिलचस्पी दिखाई है या नहीं. इसके लिए, वह इन तरीकों का इस्तेमाल करता है: एलिमेंट पर पॉइंटर को रोकना, कीबोर्ड पर खास हॉटकी दबाना या टचस्क्रीन पर एलिमेंट को दबाकर रखना. जब दिलचस्पी दिखाई जाती है या कम हो जाती है, तो टारगेट पर InterestEvent फ़ायर होता है. इसमें पॉपओवर के लिए डिफ़ॉल्ट कार्रवाइयां होती हैं. जैसे, पॉपओवर दिखाना और छिपाना.

ब्राउज़र के बीटा वर्शन की रिलीज़

ब्राउज़र के बीटा वर्शन में, आपको उन सुविधाओं की झलक मिलती है जो ब्राउज़र के अगले स्टेबल वर्शन में शामिल होंगी. यह नई सुविधाओं को आज़माने या उन्हें हटाने का सही समय है. इससे, दुनिया भर में रिलीज़ होने से पहले ही आपकी साइट पर पड़ने वाले असर का पता चल जाएगा. इस महीने के नए बीटा वर्शन ये हैं: Firefox 145 और Chrome 143. साथ ही, Safari 26.1 का बीटा वर्शन पहले से उपलब्ध है.

Firefox 145 में, ToggleEvent इंटरफ़ेस की source प्रॉपर्टी और Atomics.waitAsync() स्टैटिक तरीके को शामिल किया गया है.

Chrome 145 में, सीएसएस ऐंकर्ड फ़ॉलबैक कंटेनर क्वेरी शामिल हैं. इस सुविधा की मदद से, ऐंकर की गई पोज़िशन वाले एलिमेंट के डिसेंडेंट को स्टाइल करने के लिए @container anchored(fallback) का इस्तेमाल किया जा सकता है. यह इस बात पर निर्भर करता है कि position-try-fallbacks की कौनसी वैल्यू लागू की गई है.