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

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

Rachel Andrew

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

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

मई के दौरान, Chrome 148, Firefox 151, और Safari 26.5 के स्टेबल वर्शन रिलीज़ किए गए. इस पोस्ट में, इस महीने की कई नई सुविधाओं के बारे में बताया गया है.

:open सीएसएस सूडो-क्लास, बेसलाइन बन जाती है

Safari 26.5 में, मुख्य रूप से मौजूदा सुविधाओं से जुड़ी समस्याओं को ठीक किया गया है. हालांकि, इसमें :open स्यूडो-क्लास के लिए भी सहायता शामिल है. इससे यह सुविधा, Baseline Newly available बन जाती है.

:open सूडो-क्लास की मदद से, उन एलिमेंट को स्टाइल किया जा सकता है जो खुले होने पर "खुले" और "बंद" होते हैं. यह <details> और <dialog> जैसे एलिमेंट पर तब लागू होता है, जब वे खुले हों. साथ ही, <select> और <input> एलिमेंट (जैसे, कलर या तारीख चुनने वाले टूल) पर तब लागू होता है, जब उनके पिकर इंटरफ़ेस दिख रहे हों. यह details[open] जैसे एट्रिब्यूट का इस्तेमाल करके स्टाइलिंग करने का बेहतर और सिमैंटिक विकल्प देता है.

सीएसएस के सिर्फ़ नाम वाली कंटेनर क्वेरी, बेसलाइन बन जाती हैं

Chrome 148 इस महीने लॉन्च हो रहा है. इसमें सिर्फ़ नाम वाले कंटेनर क्वेरी अब नए वर्शन के साथ उपलब्ध हैं.

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

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

कस्टम प्रॉपर्टी के लिए कंटेनर स्टाइल क्वेरी, बेसलाइन बन जाती हैं

Firefox 151 में, style() पर @container क्वेरी के लिए सहायता उपलब्ध कराई गई है. इससे कस्टम प्रॉपर्टी के लिए कंटेनर स्टाइल क्वेरी, Baseline Newly available बन गई हैं.

कंटेनर स्टाइल क्वेरी की मदद से, पैरंट कंटेनर की सीएसएस प्रॉपर्टी के आधार पर, एलिमेंट पर स्टाइल लागू की जा सकती हैं. साइज़ क्वेरी बहुत काम की होती हैं. हालांकि, स्टाइल क्वेरी की मदद से, साइज़ से जुड़ी सुविधाओं के अलावा अन्य सुविधाओं के बारे में भी क्वेरी की जा सकती है. खास तौर पर, इस रिलीज़ में कस्टम प्रॉपर्टी के लिए क्वेरी करने की सुविधा, सभी ब्राउज़र पर उपलब्ध है. उदाहरण के लिए, यह देखा जा सकता है कि पैरंट कंटेनर पर कस्टम प्रॉपर्टी --theme को dark पर सेट किया गया है या नहीं:

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

वीडियो और ऑडियो एलिमेंट के लिए लेज़ी लोडिंग

Chrome 148 में, loading="lazy" एट्रिब्यूट के साथ <video> और <audio> एलिमेंट के लिए, नेटिव लेज़ी लोडिंग की सुविधा लॉन्च की गई है.

<img> और <iframe> एलिमेंट की तरह ही, अब ब्राउज़र को यह निर्देश दिया जा सकता है कि मीडिया संसाधनों को तब तक लोड न किया जाए, जब तक वे व्यूपोर्ट के करीब न आ जाएं. इससे पेज लोड होने की परफ़ॉर्मेंस को बेहतर बनाने, बैंडविथ को सेव करने, और उपयोगकर्ताओं के लिए डेटा के इस्तेमाल को कम करने में मदद मिलती है. इस सुविधा को लागू करने वाली टीम से इसके बारे में ज़्यादा जानें. इसके लिए, How To Use Standard HTML Video and Audio Lazy-Loading on the Web Today लेख पढ़ें.

Document Picture-in-Picture API

Firefox 151 में, डेस्कटॉप प्लैटफ़ॉर्म पर Document Picture-in-Picture API का इस्तेमाल किया जा सकता है.

स्टैंडर्ड Picture-in-Picture API की मदद से, <video>एलिमेंट को हमेशा सबसे ऊपर दिखने वाली विंडो में देखा जा सकता है. हालांकि, Document Picture-in-Picture API की मदद से, हमेशा सबसे ऊपर दिखने वाली ऐसी विंडो खोली जा सकती है जिसमें कोई भी एचटीएमएल कॉन्टेंट मौजूद हो. इससे वीडियो कॉन्फ़्रेंस में हिस्सा लेने वाले लोगों की ग्रिड, इंटरैक्टिव स्टॉक टिकर या टाइमर जैसे रिच इंटरैक्टिव ओवरले चालू हो जाते हैं. ये ओवरले, पेज से नेविगेट करने पर भी बने रहते हैं.

Web Serial API की मदद से, प्लैटफ़ॉर्म पर काम करने की सुविधा को बेहतर बनाया गया है

Firefox 151 में, डेस्कटॉप प्लैटफ़ॉर्म पर Web Serial API के साथ काम करने की सुविधा जोड़ी गई है. साथ ही, Chrome 148 में, Android पर इसके साथ काम करने की सुविधा जोड़ी गई है.

Web Serial API की मदद से, वेबसाइटें सीरियल डिवाइसों से डेटा पढ़ सकती हैं और उन पर डेटा लिख सकती हैं. जैसे, माइक्रोकंट्रोलर, 3D प्रिंटर, डेवलपमेंट बोर्ड, और पेरिफ़ेरल हार्डवेयर. Firefox में, Web Serial API का इस्तेमाल करने के लिए, उपयोगकर्ताओं को साइट की अनुमति देने वाला ऐड-ऑन इंस्टॉल करना होगा. यह ऐड-ऑन, सुरक्षित तरीके से और कंट्रोल किए गए तरीके से ऐक्सेस मैनेज करने की सुविधा देता है.

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

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

Chrome 149 के बीटा वर्शन में, सीएसएस से जुड़े कुछ बेहतरीन अपडेट शामिल हैं. जैसे, सीएसएस गैप डेकोरेशन. इससे आपको फ़्लेक्स और ग्रिड आइटम के बीच के खाली हिस्से (गैप) को स्टाइल करने की सुविधा मिलती है. यह path() और shape() के साथ-साथ shape-outside प्रॉपर्टी में rect() और xywh() बेसिक शेप फ़ंक्शन और path-length को सीएसएस प्रॉपर्टी के तौर पर भी इस्तेमाल किया जा सकता है. एपीआई के लिए, प्रोग्राम के हिसाब से स्क्रोल करने के तरीके जैसे कि scrollTo(), scrollBy(), और scrollIntoView() अब प्रॉमिस दिखाते हैं. ये प्रॉमिस, स्मूद स्क्रोलिंग पूरी होने पर रिज़ॉल्व होते हैं. साथ ही, WebSocket कनेक्शन वाले पेज अब बैक/फ़ॉरवर्ड कैश मेमोरी (बीएफ़कैश) के लिए ज़रूरी शर्तें पूरी कर सकते हैं.

Firefox 152 के बीटा वर्शन में, field-sizing प्रॉपर्टी के लिए पूरी तरह से काम करने की सुविधा जोड़ी गई है. इसकी मदद से, फ़ॉर्म कंट्रोल अपने कॉन्टेंट के हिसाब से अपने साइज़ को अपने-आप अडजस्ट कर सकते हैं. इससे Notification इंटरफ़ेस में actions और maxActions प्रॉपर्टी भी जुड़ जाती हैं. साथ ही, Element.getAnimations() में options.pseudoElement का इस्तेमाल किया जा सकता है.