जून 2026 के लिए, हर महीने मिलने वाला बेसलाइन डाइजेस्ट

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

Baseline के हर महीने के डाइजेस्ट में आपका फिर से स्वागत है. जून 2026 में, field-sizing को Baseline में नई सुविधा के तौर पर जोड़ा गया. इससे फ़ॉर्म कंट्रोल, अपने कॉन्टेंट के हिसाब से अपने-आप अडजस्ट हो सकते हैं. इसके अलावा, सीएसएस, एचटीएमएल, और वेब एपीआई की कई सुविधाएं, Baseline में सभी के लिए उपलब्ध हो गई हैं. साथ ही, डेवलपर कम्यूनिटी से अहम अपडेट भी मिले हैं.

वेब प्लैटफ़ॉर्म की स्थिति के बारे में Baseline की सूचनाएं

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

ज़्यादा जानने के लिए, Baseline की सूचनाएं लॉन्च करने के बारे में पढ़ें.

Baseline में नई सुविधाएं

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

field-sizing

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

field-sizing के लिए, MDN के रेफ़रंस पेज पर ज़्यादा जानें.

Baseline में सभी के लिए उपलब्ध सुविधाएं

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

:has() स्यूडो-क्लास

:has() सीएसएस पैरंट सिलेक्टर की मदद से, किसी एलिमेंट को उसके डिसेंडेंट या उसके बाद के सिबलिंग के आधार पर स्टाइल किया जा सकता है. इस फ़ंक्शनल स्यूडो-क्लास की मदद से, सीएसएस में सीधे तौर पर, लेआउट पैटर्न को शर्तों के हिसाब से सेट किया जा सकता है. इसके लिए, DOM स्ट्रक्चर की जांच करने के लिए JavaScript की ज़रूरत नहीं होती.

:has स्यूडो-क्लास के लिए, MDN पेज पर ज़्यादा पढ़ें.

HTMLIFrameElement.loading

loading प्रॉपर्टी की मदद से, <iframe> एम्बेड किए गए फ़्रेम के लिए लेज़ी लोडिंग की सुविधा चालू की जा सकती है. loading="lazy" तय करने पर, ब्राउज़र ऑफ़स्क्रीन iframe को तब तक लोड नहीं करते, जब तक उन्हें व्यूपोर्ट के पास स्क्रोल न किया जाए. इससे नेटवर्क बैंडविथ और शुरुआती पेज लोड ओवरहेड की बचत होती है.

HTMLIFrameElement.loading के लिए, MDN के रेफ़रंस पर ज़्यादा जानकारी देखें.

CanvasRenderingContext2D.reset()

2D कैनवस कॉन्टेक्स्ट पर मौजूद reset() तरीके से, ड्रॉइंग कॉन्टेक्स्ट की स्थिति साफ़ हो जाती है. इससे, ट्रांसफ़ॉर्मेशन, क्लिपिंग पाथ, लाइन स्टाइल, और फ़िल स्टाइल जैसी प्रॉपर्टी, अपनी डिफ़ॉल्ट वैल्यू पर रीसेट हो जाती हैं. इससे, कैनवस कॉन्टेक्स्ट को मैन्युअल तरीके से प्रॉपर्टी साफ़ किए बिना, फिर से इस्तेमाल किया जा सकता है.

CanvasRenderingContext2D.reset के लिए, MDN के दस्तावेज़ में ज़्यादा जानें.

cap लेंथ यूनिट

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

लेंथ यूनिट के लिए, MDN के रेफ़रंस में ज़्यादा जानें.

counter-set प्रॉपर्टी

counter-set सीएसएस प्रॉपर्टी, सीएसएस काउंटर को तय की गई वैल्यू पर सेट करती है. यह counter-reset और counter-increment के साथ काम करती है. इससे, नंबर वाली सूचियों, दस्तावेज़ के आउटलाइन या पसंद के मुताबिक काउंटर सीक्वेंस को मैनेज किया जा सकता है.

counter-set के लिए, MDN पेज पर ज़्यादा जानकारी पढ़ें.

createImageBitmap()

createImageBitmap() स्टैटिक तरीके से, अलग-अलग इमेज सोर्स से एसिंक्रोनस बिटमैप इमेज बनाई जाती है. इनमें <img>, <canvas>, Blob, या ImageData शामिल हैं. यह मुख्य थ्रेड से अलग इमेज को डिकोड करता है. इसलिए, कैनवस के जटिल ग्राफ़िक्स को मैनेज करते समय, यूज़र इंटरफ़ेस (यूआई) की परफ़ॉर्मेंस में रुकावट नहीं आती.

createImageBitmap के लिए, MDN के दस्तावेज़ में लागू करने से जुड़ी जानकारी देखें

<easing-function> डेटा टाइप

<easing-function> सीएसएस डेटा टाइप, ट्रांज़िशन और एनिमेशन के लिए, रेट-ऑफ़-चेंज कर्व के बारे में बताता है. यह ease-in या cubic-bezier() जैसे स्टैंडर्ड कीवर्ड के अलावा, linear() जैसे फ़ंक्शन के साथ भी काम करता है. इससे, स्प्रिंग या बाउंस इफ़ेक्ट बनाए जा सकते हैं.

easing-function के लिए, MDN के रेफ़रंस में इसका इस्तेमाल करने का तरीका जानें.

& नेस्टिंग सिलेक्टर

& नेस्टिंग सिलेक्टर, बिल्ट-इन सीएसएस नेस्टिंग का इस्तेमाल करते समय, चाइल्ड रूल सिलेक्टर को उनके पैरंट सिलेक्टर से साफ़ तौर पर जोड़ता है. इससे, नेस्ट किए गए होवर, फ़ोकस या स्यूडो-क्लास की स्थितियों को तय करते समय, साफ़ तौर पर और सही स्पेसिफ़िसिटी के नियम लागू होते हैं.

नेस्टिंग सिलेक्टर के लिए, MDN की गाइड में ज़्यादा जानकारी पढ़ें.

rel="preload" की मदद से, रिस्पॉन्सिव प्रीलोडिंग

media एट्रिब्यूट की मदद से, <link rel="preload"> अहम एसेट की रिस्पॉन्सिव प्रीलोडिंग की जा सकती है. rel="preload" को मीडिया क्वेरी के साथ मिलाकर, ब्राउज़र सिर्फ़ उन एसेट को डाउनलोड करते हैं जो उपयोगकर्ता के व्यूपोर्ट की चौड़ाई या डिसप्ले की विशेषताओं से मेल खाती हैं. ऐसा, लोड होने की प्रोसेस के शुरुआती चरण में ही किया जाता है.

rel="preload" के लिए, MDN के दस्तावेज़ में इसका इस्तेमाल करने का तरीका जानें.

HTMLMediaElement.preservesPitch

preservesPitch प्रॉपर्टी से, यह कंट्रोल किया जा सकता है कि <audio> और <video> एलिमेंट पर मौजूद ब्राउज़र ऑडियो पिच को अडजस्ट करे या नहीं, जब playbackRate बदल रहा हो. इसे false पर सेट करने से, मीडिया प्लेबैक की स्पीड बढ़ाने या कम करने पर, पिच में बदलाव किया जा सकता है.

HTMLMediaElement.preservesPitch के लिए, MDN पेज पर ज़्यादा जानकारी देखें.

:dir() स्यूडो-क्लास

:dir() सीएसएस स्यूडो-क्लास, टेक्स्ट की दिशा के आधार पर एलिमेंट से मेल खाता है जैसे, ltr या rtl. यह dir या कंप्यूटेड टेक्स्ट कॉन्टेक्स्ट जैसे एचटीएमएल एट्रिब्यूट से इनहेरिट की गई दिशा से मेल खाता है.

:dir pseudo-class के लिए, MDN पेज पर ज़्यादा जानें.

pow() मैथ फ़ंक्शन

pow() सीएसएस फ़ंक्शन, सीएसएस डिक्लेरेशन में सीधे तौर पर, एक्सपोनेन्शियल पावर वैल्यू की गणना करता है. यह किसी बेस नंबर को एक्सपोनेन्ट (उदाहरण के लिए, pow(2, 3)) तक बढ़ाता है. इससे, रिस्पॉन्सिव स्केलिंग और मैथमैटिकल ग्रिड रिलेशनशिप आसान हो जाती हैं.

pow function के लिए, MDN के रेफ़रंस में ज़्यादा जानकारी पढ़ें.

सीएसएस mask प्रॉपर्टी

mask सीएसएस शॉर्टहैंड प्रॉपर्टी, क्लिपिंग लेयर के तौर पर इमेज या ग्रेडिएंट का इस्तेमाल करके, किसी एलिमेंट के कुछ हिस्सों को छिपाती है. यह mask-image, mask-position, और mask-repeat जैसी सब-प्रॉपर्टी को मिलाकर, जटिल विज़ुअल मास्किंग इफ़ेक्ट बनाती है.

mask प्रॉपर्टी के लिए, MDN पेज पर ज़्यादा जानें.

@media (scripting)

scripting मीडिया फ़ीचर, यह जांचता है कि ब्राउज़र कॉन्टेक्स्ट में, क्लाइंट-साइड स्क्रिप्टिंग (जैसे, JavaScript) चालू है या नहीं और उपलब्ध है या नहीं. इससे, प्रोग्रेसिव एनहांसमेंट स्टाइल, JavaScript के साथ या उसके बिना वाले एनवायरमेंट को टारगेट कर सकती हैं.

scripting मीडिया फ़ीचर के लिए, MDN के रेफ़रंस में ज़्यादा जानें.

URL.canParse()

The URL.canParse() स्टैटिक तरीके से, यह जांचा जाता है कि दी गई स्ट्रिंग, मान्य और पार्स की जा सकने वाली यूआरएल है या नहीं. इसमें, बेस यूआरएल भी शामिल किया जा सकता है. इसके लिए, कोई अपवाद नहीं दिया जाता. इससे, रनटाइम यूआरएल की पुष्टि करना आसान हो जाता है. यह पुष्टि, URL ऑब्जेक्ट को इंस्टैंशिएट करने से पहले की जाती है.

URL.canParse के लिए, MDN के दस्तावेज़ में लागू करने से जुड़ी जानकारी देखें.

Storage Access API

Storage Access API, क्रॉस-साइट कॉन्टेंट के लिए एक सिस्टम उपलब्ध कराता है. इसे तीसरे पक्ष के <iframe> में एम्बेड किया जाता है. इसकी मदद से, बिना सेक्शन वाले कुकी और स्टोरेज का ऐक्सेस पाने का अनुरोध किया जा सकता है. इससे, डोमेन की सीमाओं के बीच, पुष्टि और स्टेटफ़ुल इंटरैक्शन की सुविधा मिलती है.

Storage Access API के लिए, MDN पेज पर ज़्यादा जानकारी पढ़ें.

अभी के लिए बस इतना ही

अगर आपको लगता है कि हमने Baseline से जुड़ी कोई जानकारी छोड़ दी है, तो हमें बताएं. हम पक्का करेंगे कि उसे आने वाले समय में शामिल किया जाए! अगर आपका कोई सवाल है या आपको Baseline के बारे में कोई सुझाव या राय देनी है, तो हमारे समस्या ट्रैकर में कोई समस्या दर्ज करें.