जून में वेब प्लैटफ़ॉर्म पर नई सुविधाएं जोड़ी गई हैं

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

Rachel Andrew

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

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

Chrome 149, Chrome 150, और Firefox 152 को जून में स्टेबल वर्शन के तौर पर रिलीज़ किया गया. इस महीने, Safari का स्टेबल वर्शन रिलीज़ नहीं किया गया. इस पोस्ट में, वेब ब्राउज़र में उपलब्ध नई सुविधाओं के बारे में बताया गया है.

field-sizing की मदद से फ़ॉर्म कंट्रोल का साइज़ बदलने की सुविधा, बेसलाइन बन जाती है

Firefox 152 में field-sizing सीएसएस प्रॉपर्टी के लिए सहायता उपलब्ध कराई गई है. इससे, फ़ॉर्म कंट्रोल के साइज़ को अपने-आप बदलने की सुविधा, सभी मुख्य ब्राउज़र इंजन पर उपलब्ध हो गई है.

field-sizing प्रॉपर्टी की मदद से, फ़ॉर्म कंट्रोल जैसे कि <textarea>, <input>, और <select> को अपने कॉन्टेंट (field-sizing: content) के हिसाब से छोटा या बड़ा किया जा सकता है. इसके बजाय, वे डिफ़ॉल्ट साइज़ (field-sizing: fixed) पर बने रहते हैं. इससे, टेक्स्ट इनपुट या टेक्स्ट एरिया बनाते समय JavaScript के वर्कअराउंड की ज़रूरत नहीं पड़ती. ये टेक्स्ट एरिया, उपयोगकर्ताओं के टाइप करने पर अपने-आप रीसाइज़ हो जाते हैं.

textarea {
  field-sizing: content;
}

shape-outside में मौजूद बेसिक शेप rect() और xywh(), बेसलाइन बन जाते हैं

Chrome 149 में, shape-outside प्रॉपर्टी में rect() और xywh() शेप फ़ंक्शन के लिए शिपिंग की सुविधा उपलब्ध है. इसलिए, ये बुनियादी शेप अब Baseline में शामिल हो गए हैं. साथ ही, ये मुख्य ब्राउज़र पर उपलब्ध हैं.

rect() और xywh() फ़ंक्शन की मदद से, आयताकार फ़्लोट एक्सक्लूज़न एरिया तय किए जा सकते हैं. इसके लिए, सटीक इंसर्ट कोऑर्डिनेट या ओरिजिन-एंड-डाइमेंशन सिंटैक्स का इस्तेमाल किया जाता है. यह रेक्टैंगुलर फ़्लोट रैपिंग शेप के लिए, polygon() का इस्तेमाल करने के मुकाबले ज़्यादा आसान और पढ़ने में आसान सिंटैक्स देता है.

सीएसएस text-fit की मदद से फ़ॉन्ट का साइज़ अपने-आप बदलना

Chrome 150 में text-fit सीएसएस प्रॉपर्टी जोड़ी गई है. इससे डेवलपर, फ़ॉन्ट के साइज़ को अपने-आप स्केल कर सकते हैं, ताकि वे कंटेनर बॉक्स की चौड़ाई के हिसाब से फ़िट हो जाएं.

.headline {
  text-fit: grow;
}

सीएसएस गैप डेकोरेशन

Chrome 149 में, ग्रिड और फ़्लेक्सबॉक्स लेआउट में सीएसएस गैप डेकोरेशन के लिए सहायता उपलब्ध कराई गई है. गैप डेकोरेशन की मदद से, ग्रिड और फ़्लेक्स आइटम के बीच की जगह में सीधे तौर पर लाइनें और स्टाइलिंग जोड़ी जा सकती हैं. यह मल्टी-कॉलम लेआउट में column-rule जोड़ने जैसा है.

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

Gap decorations: Now in Chromium में इसके बारे में ज़्यादा जानें.

सीएसएस background-clip: border-area

Chrome 150 में, CSS Backgrounds Level 4 से background-clip: border-area के लिए सहायता जोड़ी गई है.

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

स्क्रोल करने पर दिखने वाले प्रोग्रामैटिक विज्ञापन

Chrome 150, प्रोग्राम के हिसाब से स्क्रोल करने के तरीकों (scrollTo(), scrollBy(), और scrollIntoView()) को अपडेट करता है, ताकि Promise वापस मिल सके.

स्मूद स्क्रोलिंग का ऐनिमेशन पूरा होने पर, Promise रिज़ॉल्व हो जाता है. इससे स्क्रोलिंग पूरी होने के बाद, फ़ॉलो-अप कार्रवाइयों को ट्रिगर करने के लिए भरोसेमंद सिग्नल मिलता है.

focusgroup की मदद से कीबोर्ड नेविगेशन को डिक्लेरेटिव तरीके से लागू करना

Chrome 150 में, focusgroup एट्रिब्यूट के लिए सहायता उपलब्ध कराई गई है.

focusgroup एट्रिब्यूट की मदद से डेवलपर, कंपोज़िट यूज़र इंटरफ़ेस (यूआई) कंट्रोल (जैसे कि टूलबार, टैबलिस्ट, और मेन्यू) में ऐरो की नेविगेशन को मैनेज कर सकते हैं. इसके लिए, उन्हें कीबोर्ड इवेंट लिसनर को मैन्युअल तरीके से लिखने की ज़रूरत नहीं होती.

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

फ़ोकसग्रुप के बारे में जानकारी देने वाले लेख से ज़्यादा जानें.

बैक/फ़ॉरवर्ड कैश मेमोरी (bfcache) में WebSockets काम करते हैं

Chrome 149 में, अब WebSocket कनेक्शन वाले पेज, बैक/फ़ॉरवर्ड कैश मेमोरी (bfcache) में सेव किए जा सकते हैं.

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

संसाधन के समय के बारे में जानकारी देने वाली सुविधा में, इंटरिम और हेडर रिस्पॉन्स का समय

Firefox 152 में, PerformanceResourceTiming इंटरफ़ेस पर firstInterimResponseStart और finalResponseHeadersStart के लिए सहायता जोड़ी गई है.

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

सूचनाओं के लिए ऐक्शन बटन

Firefox 152 में, सूचना पर ऐक्शन बटन जोड़ने की सुविधा जोड़ी गई है. इसके लिए, Notification पर actions प्रॉपर्टी और ServiceWorkerRegistration.showNotification() में मौजूद विकल्पों का इस्तेमाल किया जाता है.

अब ओएस की सूचनाओं में ऐक्शन बटन शामिल किए जा सकते हैं. साथ ही, बटन टैप किए जाने पर उपयोगकर्ता के इंटरैक्शन को सुना जा सकता है.

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

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

Firefox 153 बीटा वर्शन में, Error.stackTraceLimit का इस्तेमाल करके ज़्यादा से ज़्यादा कैप्चर किए गए स्टैक ट्रेस डेप्थ को कॉन्फ़िगर करने, IDBObjectStore.getAllRecords() और IDBIndex.getAllRecords() का इस्तेमाल करके इंडेक्स किए गए रिकॉर्ड को वापस पाने, और RTCDtlsTransport.getRemoteCertificates() का इस्तेमाल करके WebRTC की सुरक्षा की जांच करने की सुविधा जोड़ी गई है. ऐड-ऑन डेवलपर को, स्क्रिप्ट को ज़रूरत के हिसाब से इंजेक्ट करने के लिए नया publicSuffix एपीआई और userScripts.execute() तरीका भी मिलता है.

Safari 27 के बीटा वर्शन में, ट्रांसफ़ॉर्म-अवेयर ऐंकर पोज़िशनिंग, हेडिंग एलिमेंट से मैच करने के लिए :heading छद्म क्लास, कैस्केड लेयर को वापस लाने के लिए revert-rule कीवर्ड, बॉक्स साइज़िंग में stretch कीवर्ड के लिए सहायता, और :host:has() कंपाउंड सिलेक्टर की सुविधा दी गई है.