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

अक्टूबर 2026 के दौरान, स्टेबल और बीटा वेब ब्राउज़र में जोड़ी गई कुछ दिलचस्प सुविधाओं के बारे में जानें.

Rachel Andrew

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

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

Chrome 155, Chrome 156, Firefox 158, Firefox 159, Safari 27.1, और Safari 27.2 को अक्टूबर 2026 के दौरान स्टेबल वर्शन के तौर पर रिलीज़ किया गया. इस पोस्ट में, इस महीने सभी ब्राउज़र पर लॉन्च होने वाली नई सुविधाओं के बारे में बताया गया है. इनमें से कई मुख्य सुविधाएं, Baseline Newly available के तौर पर उपलब्ध होंगी.

स्क्रोल-ड्रिवन ऐनिमेशन, Baseline का हिस्सा बन गए हैं

Firefox 159 में, स्क्रोल-ड्रिवन ऐनिमेशन की सुविधा डिफ़ॉल्ट रूप से चालू होती है.

स्क्रोल-ड्रिवन ऐनिमेशन की मदद से, सीएसएस ऐनिमेशन या Web Animations API ऐनिमेशन की प्रोग्रेस को स्क्रोल कंटेनर के स्क्रोल ऑफ़सेट से लिंक किया जा सकता है. इसके लिए, scroll-timeline और scroll() फ़ंक्शन का इस्तेमाल किया जाता है. इसके अलावा, view-timeline और view() फ़ंक्शन का इस्तेमाल करके, स्क्रोलपोर्ट में मौजूद किसी एलिमेंट की विज़िबिलिटी से भी लिंक किया जा सकता है. इसके लिए, animation-timeline असाइन किया जाता है:

Chrome, Safari, और अब Firefox 159 में स्क्रोल-ड्रिवन ऐनिमेशन की सुविधा उपलब्ध है. यह सुविधा, Baseline की नई सुविधाओं में शामिल है.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 159.
  • Safari: 26.

Source

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

स्कोप वाली कस्टम एलिमेंट रजिस्ट्री, Baseline की सुविधा बन गई हैं

Firefox 159 में, स्कोप वाले कस्टम एलिमेंट की रजिस्ट्री के लिए सहायता जोड़ी गई है.

पहले, सभी कस्टम एलिमेंट को एक ही ग्लोबल window.customElements रजिस्ट्री में रजिस्टर करना पड़ता था. इसकी वजह से, अलग-अलग लाइब्रेरी या टीमों के कॉम्पोनेंट को जोड़ते समय, नाम से जुड़ी समस्याएं हो सकती थीं. अब CustomElementRegistry() कंस्ट्रक्टर का इस्तेमाल करके, एक अलग CustomElementRegistry इंस्टेंस बनाया जा सकता है. साथ ही, इसकी डेफ़िनिशन को किसी खास शैडो ट्री तक सीमित किया जा सकता है. customElementRegistry प्रॉपर्टी, Document, Element, और ShadowRoot पर भी उपलब्ध है.

Chrome, Safari, और Firefox 159 पर काम करने वाली, स्कोप की गई कस्टम एलिमेंट रजिस्ट्री, अब Baseline की नई सुविधाओं के तौर पर उपलब्ध हैं.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: 159.
  • Safari: 26.

Source

JPEG XL इमेज फ़ॉर्मैट के लिए सहायता

Chrome 155 और Firefox 158, दोनों में JPEG XL (image/jxl) इमेज फ़ॉर्मैट के लिए, डिफ़ॉल्ट रूप से सहायता उपलब्ध है.

JPEG XL, रॉयल्टी-फ़्री रास्टर इमेज फ़ॉर्मैट है. इसे आईएसओ/आईईसी 18181 के तौर पर स्टैंडर्डाइज़ किया गया है. यह लॉसी और लॉसलेस कंप्रेशन, प्रोग्रेसिव डिकोडिंग, वाइड कलर गैमट, हाई डाइनैमिक रेंज (एचडीआर), हाई बिट डेप्थ, ट्रांसपेरेंसी, और ऐनिमेशन के साथ-साथ, मौजूदा JPEG फ़ाइलों की लॉसलेस ट्रांसकोडिंग के साथ काम करता है. Firefox 158, इमेज के अनुरोधों के लिए डिफ़ॉल्ट एचटीटीपी Accept हेडर को भी अपडेट करता है, ताकि image/jxl को शामिल किया जा सके.

Chrome में JPEG XL फ़ॉर्मैट में इमेज सेव करने की सुविधा के बारे में ज़्यादा जानें.

Browser Support

  • Chrome: 155.
  • Edge: not supported.
  • Firefox: 158.
  • Safari: 17.

Source

सीएसएस टाइप्ड अरिथमेटिक, Baseline की सुविधा बन गई है

Firefox 158 में, calc() जैसे मैथ फ़ंक्शन में सीएसएस टाइप किए गए अंकगणित के लिए सहायता जोड़ी गई है.

सीएसएस टाइप किए गए अंकगणित की मदद से, एक ही डेटा टाइप की दो वैल्यू को बांटा जा सकता है. भले ही, वे अलग-अलग यूनिट का इस्तेमाल करती हों. इससे बिना यूनिट वाला <number> भागफल मिलता है. बिना यूनिट वाले इस नतीजे का इस्तेमाल, सीधे तौर पर उन प्रॉपर्टी में किया जा सकता है जो संख्याओं को स्वीकार करती हैं. जैसे, opacity या line-height. इसके अलावा, टाइप के बीच कन्वर्ज़न के लिए, इसे किसी दूसरी यूनिट से गुणा किया जा सकता है:.

Chrome और Safari के साथ-साथ, अब Firefox 158 में भी सीएसएस टाइप किए गए अंकगणित की सुविधा उपलब्ध है. यह सुविधा, Baseline के तहत अब सभी के लिए उपलब्ध है.

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: 158.
  • Safari: 26.

PerformanceResourceTiming.deliveryType

Firefox 158 में, PerformanceResourceTiming.deliveryType प्रॉपर्टी के लिए सहायता जोड़ी गई है.

इस प्रॉपर्टी से पता चलता है कि संसाधन को कैसे डिलीवर किया गया. उदाहरण के लिए, जब किसी संसाधन को कैश मेमोरी से डिलीवर किया जाता है, तो "cache" दिखता है.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 158.
  • Safari: 26.4.

Source

random() सीएसएस फ़ंक्शन

Chrome 156 में, random() सीएसएस फ़ंक्शन के लिए सहायता जोड़ी गई है.

random() फ़ंक्शन, तय की गई कम से कम और ज़्यादा से ज़्यादा रेंज के अंदर, बिना किसी क्रम के एक न्यूमेरिक वैल्यू जनरेट करता है. इसमें, स्टेप इंटरवल का विकल्प भी होता है. डिफ़ॉल्ट रूप से, हर random() कॉल, किसी अलग रैंडम वैल्यू को रिज़ॉल्व करता है. इसके अलावा, प्रॉपर्टी या एलिमेंट के बीच रैंडम वैल्यू शेयर करने के लिए, पहले आर्ग्युमेंट के तौर पर <random-key> को पास किया जा सकता है:

Smashing Magazine पर मौजूद, Embracing playful imperfection with the CSS random() function लेख में उदाहरण देखें.

Browser Support

  • Chrome: 156.
  • Edge: 156.
  • Firefox Technology Preview: supported.
  • Safari: 26.2.

Source

margin-trim सीएसएस प्रॉपर्टी

Chrome 155 में, ब्लॉक कंटेनर और मल्टी-कॉलम कंटेनर पर margin-trim सीएसएस प्रॉपर्टी के लिए सहायता जोड़ी गई है.

किसी कंटेनर पर margin-trim का इस्तेमाल करके, उसके चाइल्ड एलिमेंट के मार्जिन को हटाया जा सकता है. ऐसा तब किया जा सकता है, जब वे कंटेनर के किनारों से मिलते हों. इससे पहले चाइल्ड एलिमेंट से पहले या आखिरी चाइल्ड एलिमेंट के बाद, ज़्यादा स्पेस नहीं बचता. इसके लिए, :first-child या :last-child को बदलने की ज़रूरत नहीं पड़ती.

margin-trim प्रॉपर्टी की मदद से, स्टार्ट और एंड मार्जिन हटाने के बारे में ज़्यादा जानें.

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: not supported.
  • Safari: 16.4.

Source

symbols() सीएसएस फ़ंक्शन की मदद से, इनलाइन काउंटर स्टाइल

Chrome 155 में, symbols() सीएसएस फ़ंक्शन के लिए सहायता उपलब्ध कराई गई है.

symbols() फ़ंक्शन की मदद से, किसी एनॉनिमस काउंटर स्टाइल को सीधे तौर पर list-style-type, list-style शॉर्टहैंड, counter() या counters() में तय किया जा सकता है. इसके लिए, अलग से नाम वाले @counter-style ऐट-रूल को तय करने की ज़रूरत नहीं होती.

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: 35.
  • Safari Technology Preview: supported.

Source

text-decoration-skip-spaces सीएसएस प्रॉपर्टी

Chrome 155 में text-decoration-skip-spaces सीएसएस प्रॉपर्टी जोड़ी गई है. इससे यह कंट्रोल किया जाता है कि टेक्स्ट को सजाने वाली लाइनें, जैसे कि अंडरलाइन, ओवरलाइन, और लाइन-थ्रू, खाली सफ़ेद जगह वाले वर्णों को छोड़ें या नहीं. इससे, टेक्स्ट के पहले, बाद में या शब्दों के बीच की खाली जगहों में डेकोरेशन को दिखने से रोका जा सकता है.

Browser Support

  • Chrome: 155.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: not supported.

:navigation-source सीएसएस सूडो-क्लास

Chrome 156 में, :navigation-source सीएसएस स्यूडो-क्लास को पेश किया गया है. यह उस लिंक, बटन या फ़ॉर्म एलिमेंट से मैच करता है जिससे नेविगेशन शुरू हुआ था. साथ ही, पूरे नेविगेशन के दौरान उस एलिमेंट को चुने रखता है.

Browser Support

  • Chrome: 156.
  • Edge: 156.
  • Firefox: not supported.
  • Safari: not supported.

JavaScript टेक्स्ट मॉड्यूल इंपोर्ट करना और लोड न हो पाए मॉड्यूल को फिर से लोड करने की कोशिश करना

Chrome 155 में, import ... with { type: "text" } का इस्तेमाल करके टेक्स्ट मॉड्यूल इंपोर्ट करने की सुविधा जोड़ी गई है. यह सुविधा Firefox में पहले से मौजूद है. type: "text" इंपोर्ट एट्रिब्यूट, टारगेट मॉड्यूल के कॉन्टेंट को JavaScript स्ट्रिंग के तौर पर लोड करता है.

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: 153.
  • Safari: not supported.

Source

Chrome 156 में, मॉड्यूल लोड करने के तरीके को भी अपडेट किया गया है. इससे, लोड न हो पाने वाले मॉड्यूल अब हमेशा के लिए कैश मेमोरी में सेव नहीं होते. ऐप्लिकेशन अब उन मॉड्यूल को लोड करने की फिर से कोशिश कर सकते हैं जो लोड नहीं हो पाए थे. उदाहरण के लिए, नेटवर्क में कुछ समय के लिए आई गड़बड़ी के बाद, import() को फिर से कॉल करके.

Chrome और Firefox में WebTransport से जुड़े अपडेट

Firefox 158 और Chrome 156, दोनों को बड़ा करके दिखाया गया है WebTransport:

Firefox 158 में, कनेक्शन और डेटाग्राम के आंकड़े पाने के लिए, WebTransport.getStats() तरीका जोड़ा गया है. साथ ही, स्टैटिक WebTransport.supportsReliableOnly प्रॉपर्टी जोड़ी गई है. इससे पता चलता है कि ब्राउज़र, सिर्फ़ भरोसेमंद ट्रांसपोर्ट पर WebTransport सेशन के साथ काम करता है या नहीं.

Browser Support

  • Chrome: 157.
  • Edge: 157.
  • Firefox: 158.
  • Safari: 26.4.

Source

Chrome 156 में, WebTransportOptions में कस्टम एचटीटीपी अनुरोध हेडर पास करने की सुविधा जोड़ी गई है. यह सुविधा, शुरुआती CONNECT हैंडशेक के दौरान और WebTransport इंस्टेंस से सर्वर रिस्पॉन्स हेडर को पढ़ने के दौरान काम करती है.

Firefox में Notification navigate विकल्प

Firefox 158 में, Notification() कंस्ट्रक्टर और ServiceWorkerRegistration.showNotification() में navigate विकल्प के लिए सहायता जोड़ी गई है. साथ ही, Notification.navigate प्रॉपर्टी के लिए भी सहायता जोड़ी गई है. यह सुविधा Safari में पहले से उपलब्ध है. इस विकल्प से, ब्राउज़र के लिए एक यूआरएल तय किया जाता है. जब उपयोगकर्ता सिस्टम की सूचना पर क्लिक करता है, तो ब्राउज़र उसे इस यूआरएल पर ले जाता है.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 158.
  • Safari: 18.5.

Source

Firefox में HTML Sanitizer API के अपडेट

Firefox 158 में, HTML Sanitizer API में javascriptURLs कॉन्फ़िगरेशन विकल्प और Sanitizer.setJavascriptURLs() को जोड़ा गया है. इससे यह कंट्रोल किया जा सकता है कि Element.setHTMLUnsafe() जैसे असुरक्षित एचटीएमएल इंसर्शन तरीकों का इस्तेमाल करने पर, javascript: यूआरएल वाले एट्रिब्यूट हटाए जाएं या नहीं.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 158.
  • Safari: not supported.

Firefox 159 में, सैनिटाइज़र के सुरक्षित तरीकों को भी अपडेट किया गया है. जैसे, Element.setHTML(). इससे डीओएम ट्री बनाने के बाद नहीं, बल्कि पार्स करने के दौरान ही अनचाहे एलिमेंट और एट्रिब्यूट हटा दिए जाते हैं. इससे यह पक्का होता है कि आस-पास का टेक्स्ट, एक ही टेक्स्ट नोड में रहे.

Safari में flow-tolerance का नाम बदलकर fit-tolerance किया जा रहा है

Safari 27.2 में, ग्रिड लेन लेआउट (display: grid-lanes) के लिए, flow-tolerance प्रॉपर्टी का नाम बदलकर fit-tolerance कर दिया गया है. हालांकि, flow-tolerance को अब भी इस्तेमाल नहीं किए जा रहे उपनाम के तौर पर रखा गया है.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: 26.4.

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

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

Chrome 157 के बीटा वर्शन में, सीएसएस corner शॉर्टहैंड और एज सब-शॉर्टहैंड शामिल हैं. इनकी मदद से, border-radius और corner-shape को एक साथ सेट किया जा सकता है. साथ ही, text-decoration-inset, text-overflow: <string>, और position-visibility: anchor-valid और anchor-visible को भी सेट किया जा सकता है. इसमें एचटीएमएल-इन-कैनवस रेंडरिंग की सुविधा भी शामिल है. साथ ही, <camera>, <microphone>, और <geolocation> एलिमेंट के लिए, सिर्फ़ आइकॉन वाला displaymode एट्रिब्यूट भी शामिल है.

Chrome 158 के बीटा वर्शन में, डिक्लेरेटिव एचटीएमएल <install> एलिमेंट और Web Install API (navigator.install()) को लॉन्च किया गया है. इससे क्रॉस-ऑरिजिन वेब ऐप्लिकेशन इंस्टॉल किया जा सकता है. सीएसएस और एसवीजी में जोड़े गए नए फ़ीचर में, ::highlight(*) यूनिवर्सल कस्टम हाइलाइट सिलेक्टर, मीडिया एलिमेंट स्टेट स्यूडो-क्लास (:playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked), flow-start और flow-end अलाइनमेंट कीवर्ड, और circle() और ellipse() बेसिक शेप के लिए closest-corner और farthest-corner रेडियस शामिल हैं.

Firefox 160 बीटा, WebExtensions runtime.PlatformInfo एपीआई को अपडेट करता है, ताकि ARM64 प्लैटफ़ॉर्म पर aarch64 के बजाय arch को arm64 के तौर पर दिखाया जा सके. यह Chrome के साथ अलाइन होता है.