पब्लिश होने की तारीख: 17 जुलाई, 2026
बेसलिन के मासिक डाइजेस्ट में आपका फिर से स्वागत है. जून 2026 में, field-sizing
को नए वर्शन के तौर पर उपलब्ध कराया गया. इससे फ़ॉर्म कंट्रोल, कॉन्टेंट के हिसाब से अपने-आप अडजस्ट हो जाते हैं. इस दौरान, सीएसएस, एचटीएमएल, और वेब एपीआई की कई सुविधाओं को 'व्यापक तौर पर उपलब्ध' स्टेटस मिला. साथ ही, डेवलपर कम्यूनिटी से जुड़े ज़रूरी अपडेट भी मिले.
वेब प्लैटफ़ॉर्म की स्थिति के बारे में बुनियादी सूचनाएं
वेब प्लैटफ़ॉर्म के स्टेटस डैशबोर्ड पर, Baseline की सूचनाओं की मदद से अब यह ट्रैक करना आसान हो गया है कि वेब सुविधाएं कब से एक-दूसरे के साथ काम करने लगेंगी. GitHub से साइन इन करके, सुविधाओं के लिए सूचनाएं पाने की सुविधा के लिए सदस्यता ली जा सकती है. ऐसा तब किया जा सकता है, जब सुविधाएं नई उपलब्ध हों, बड़े पैमाने पर उपलब्ध हों या उन्हें नए ब्राउज़र में लागू किया गया हो. सदस्यताओं को इस तरह कॉन्फ़िगर किया जा सकता है कि वे हर महीने, हर हफ़्ते या तुरंत ईमेल अपडेट या कस्टम आरएसएस फ़ीड भेजें. सेव की गई खोजों के लिए, अलर्ट का दायरा तय किया जा सकता है. जैसे, सभी एचटीएमएल सुविधाएं. इसके अलावा, कस्टम न्यूज़लेटर बनाए जा सकते हैं, शेयर की जा सकने वाली सुविधाओं की सूचियां जनरेट की जा सकती हैं या अपनी इंजीनियरिंग टीम को सूचना देने के लिए, Slack वेबहुक कॉन्फ़िगर किए जा सकते हैं.
ज़्यादा जानने के लिए, बेसलाइन से जुड़ी सूचनाएं पाने की सुविधा के बारे में जानकारी लेख पढ़ें.
Baseline की नई सुविधाएं
इस सेक्शन में दी गई सुविधाएं, जून 2026 से मुख्य ब्राउज़र सेट में काम करती हैं. साथ ही, अब ये Baseline Newly available में उपलब्ध हैं.
field-sizing
field-sizing सीएसएस प्रॉपर्टी की मदद से, फ़ॉर्म एलिमेंट के साइज़ को कंट्रोल किया जा सकता है. जैसे, <textarea>, <input>, और <select>. आम तौर पर, इन एलिमेंट के डिफ़ॉल्ट डाइमेंशन तय होते हैं. field-sizing: content फ़ॉर्म कंट्रोल की मदद से, कॉन्टेंट के हिसाब से फ़ॉर्म अपने-आप बड़े या छोटे हो जाते हैं. इससे, JavaScript की कस्टम स्क्रिप्ट का इस्तेमाल करके फ़ॉर्म के साइज़ को अपने-आप बदलने की ज़रूरत नहीं पड़ती.
ज़्यादा जानने के लिए, MDN का रेफ़रंस पेज देखें. यह पेज, field-sizing के बारे में जानकारी देता है.
व्यापक तौर पर उपलब्ध Baseline की सुविधाएं
नीचे दी गई सुविधाएं, Baseline Widely available बन गई हैं. इसका मतलब है कि अब ये सुविधाएं, ज़्यादातर ब्राउज़र के साथ काम करती हैं और आपके प्रोजेक्ट में इस्तेमाल की जा सकती हैं.
:has() स्यूडो-क्लास
:has() सीएसएस पैरंट सिलेक्टर की मदद से, किसी एलिमेंट को उसके डिसेंडेंट या बाद के सिबलिंग के आधार पर स्टाइल किया जा सकता है. यह फ़ंक्शनल स्यूडो-क्लास, सीएसएस में सीधे तौर पर लेआउट पैटर्न को चालू करने की सुविधा देता है. इसके लिए, JavaScript को डीओएम स्ट्रक्चर की जांच करने की ज़रूरत नहीं होती.
:has छद्म क्लास के लिए MDN पेज पर इस बारे में ज़्यादा पढ़ें.
HTMLIFrameElement.loading
<iframe> एलिमेंट पर मौजूद loading प्रॉपर्टी की मदद से, एम्बेड किए गए फ़्रेम के लिए लेज़ी लोडिंग की सुविधा चालू की जा सकती है. loading="lazy" एट्रिब्यूट का इस्तेमाल करके, ब्राउज़र ऑफ़स्क्रीन iframe को तब तक लोड नहीं करते, जब तक उन्हें व्यूपोर्ट के पास स्क्रोल नहीं किया जाता. इससे नेटवर्क बैंडविथ और पेज लोड होने में लगने वाले शुरुआती समय की बचत होती है.
MDN रेफ़रंस में HTMLIFrameElement.loading के बारे में दी गई जानकारी देखें.
CanvasRenderingContext2D.reset()
2D कैनवस कॉन्टेक्स्ट पर मौजूद reset() तरीके से, ड्रॉइंग कॉन्टेक्स्ट की स्थिति मिट जाती है. इससे ट्रांसफ़ॉर्मेशन, क्लिपिंग पाथ, लाइन स्टाइल, और फ़िल स्टाइल जैसी प्रॉपर्टी, अपनी डिफ़ॉल्ट वैल्यू पर रीसेट हो जाती हैं. इससे कैनवस कॉन्टेक्स्ट को मैन्युअल तरीके से प्रॉपर्टी को साफ़ किए बिना, फिर से इस्तेमाल किया जा सकता है.
CanvasRenderingContext2D.reset के लिए MDN के दस्तावेज़ में इस बारे में ज़्यादा जानें.
cap लंबाई की इकाई
cap फ़ॉन्ट के हिसाब से तय की गई यूनिट है. यह एलिमेंट के फ़ॉन्ट की नॉमिनल कैप हाइट के बराबर होती है. इसकी मदद से, बड़े अक्षरों की ऊंचाई के हिसाब से एलिमेंट को अलाइन और उनका साइज़ बदला जा सकता है. इससे टाइपोग्राफ़िक लेआउट को सटीक बनाया जा सकता है.
ज़्यादा जानकारी के लिए, लंबाई की इकाइयों के लिए MDN रेफ़रंस देखें.
counter-set प्रॉपर्टी
counter-set सीएसएस प्रॉपर्टी, सीएसएस काउंटर को तय की गई वैल्यू पर सेट करती है. यह counter-reset और counter-increment के साथ काम करती है. इससे नंबर वाली सूचियों, दस्तावेज़ की आउटलाइन या कस्टम काउंटर सीक्वेंस में बदलाव करते समय कंट्रोल मिलता है.
MDN पेज पर counter-set के बारे में ज़्यादा जानकारी पढ़ें.
createImageBitmap()
createImageBitmap() स्टैटिक तरीके से, अलग-अलग इमेज सोर्स से एसिंक्रोनस बिटमैप इमेज बनाई जाती है. इनमें <img>, <canvas>, Blob या ImageData शामिल हैं. यह मुख्य थ्रेड से अलग इमेज को डिकोड करता है. इसलिए, जटिल कैनवस ग्राफ़िक को हैंडल करते समय, यह यूज़र इंटरफ़ेस (यूआई) की परफ़ॉर्मेंस को ब्लॉक नहीं करता.
MDN के दस्तावेज़ में, createImageBitmap के लिए लागू करने से जुड़ी जानकारी देखें.
<easing-function> डेटा टाइप
<easing-function> सीएसएस डेटा टाइप, ट्रांज़िशन और ऐनिमेशन के लिए, बदलाव की दर वाली गणितीय वक्रों के बारे में बताता है. यह ease-in
या cubic-bezier() जैसे स्टैंडर्ड कीवर्ड के अलावा, linear() जैसे फ़ंक्शन के साथ काम करता है. इससे कस्टम स्प्रिंग या बाउंस इफ़ेक्ट बनाए जा सकते हैं.
इसे इस्तेमाल करने का तरीका जानने के लिए, MDN के ईज़िंग-फ़ंक्शन के रेफ़रंस पर जाएं.
& नेस्टिंग सिलेक्टर
& नेस्टिंग सिलेक्टर, बिल्ट-इन सीएसएस नेस्टिंग का इस्तेमाल करते समय, चाइल्ड रूल सिलेक्टर को उनके पैरंट सिलेक्टर से साफ़ तौर पर जोड़ता है. इससे नेस्ट किए गए होवर, फ़ोकस या सूडो-क्लास की स्थितियों को तय करते समय, साफ़ तौर पर और सही तरीके से नियमों को लागू किया जा सकता है.
नेस्टिंग सिलेक्टर के लिए MDN गाइड में दी गई जानकारी पढ़ें.
rel="preload" की मदद से रिस्पॉन्सिव प्रीलोडिंग
<link rel="preload"> एलिमेंट पर मौजूद media एट्रिब्यूट की मदद से, मुख्य ऐसेट को रिस्पॉन्सिव तरीके से पहले से लोड किया जा सकता है. rel="preload" को मीडिया क्वेरी के साथ इस्तेमाल करने पर,
ब्राउज़र सिर्फ़ उन ऐसेट को डाउनलोड करते हैं जो उपयोगकर्ता के व्यूपोर्ट की चौड़ाई या डिसप्ले
की विशेषताओं से मेल खाती हैं. ऐसा लोडिंग लाइफ़साइकल की शुरुआत में होता है.
rel="preload" के लिए MDN के दस्तावेज़ में, इसे इस्तेमाल करने का तरीका जानें.
HTMLMediaElement.preservesPitch
<audio> और <video> एलिमेंट पर मौजूद preservesPitch प्रॉपर्टी से यह कंट्रोल किया जाता है कि playbackRate बदलने पर, ब्राउज़र ऑडियो पिच को अडजस्ट करे या नहीं.
इसे false पर सेट करने से, मीडिया चलाने की स्पीड बढ़ाने या घटाने पर पिच में बदलाव किया जा सकता है.
MDN पेज पर HTMLMediaElement.preservesPitch के बारे में जानकारी देखें.
:dir() स्यूडो-क्लास
:dir() सीएसएस स्यूडो-क्लास, टेक्स्ट की दिशा के आधार पर एलिमेंट से मेल खाती है. जैसे, ltr या rtl. यह एचटीएमएल एट्रिब्यूट, जैसे कि dir या कंप्यूट किए गए टेक्स्ट कॉन्टेक्स्ट से इनहेरिट की गई दिशा से मेल खाती है.
:dir स्यूडो-क्लास के लिए MDN पेज पर इस बारे में ज़्यादा जानें.
pow() मैथ फ़ंक्शन
pow() CSS फ़ंक्शन, CSS डिक्लेरेशन में सीधे तौर पर एक्सपोनेंशियल पावर वैल्यू कैलकुलेट करता है. यह किसी आधार संख्या को एक्सपोनेंट तक बढ़ाता है. उदाहरण के लिए, pow(2, 3). इससे रिस्पॉन्सिव स्केलिंग और गणितीय ग्रिड के संबंध आसान हो जाते हैं.
pow फ़ंक्शन के लिए MDN रेफ़रंस के बारे में ज़्यादा जानें.
सीएसएस mask प्रॉपर्टी
mask सीएसएस शॉर्टहैंड प्रॉपर्टी, इमेज या ग्रेडिएंट को क्लिपिंग लेयर के तौर पर इस्तेमाल करके, किसी एलिमेंट के कुछ हिस्सों को छिपाती है. यह mask-image, mask-position, और mask-repeat जैसी सब-प्रॉपर्टी को मिलाकर, जटिल विज़ुअल मास्किंग इफ़ेक्ट बनाता है.
मास्क प्रॉपर्टी के लिए MDN पेज पर जाकर, इस बारे में ज़्यादा जानें.
@media (scripting)
scripting मीडिया सुविधा यह जांच करती है कि ब्राउज़र के कॉन्टेक्स्ट में क्लाइंट-साइड स्क्रिप्टिंग (जैसे कि JavaScript) चालू है और उपलब्ध है या नहीं. इससे प्रोग्रेसिव एन्हांसमेंट स्टाइल, ऐसे एनवायरमेंट को टारगेट कर सकती हैं जिनमें JavaScript चालू है या नहीं है.
ज़्यादा जानने के लिए, स्क्रिप्टिंग मीडिया सुविधा के लिए MDN रेफ़रंस देखें.
URL.canParse()
URL.canParse() स्टैटिक तरीके से यह जांच की जाती है कि दी गई स्ट्रिंग, पार्स किए जा सकने वाला मान्य यूआरएल है या नहीं. इसमें बेस यूआरएल का इस्तेमाल करना ज़रूरी नहीं है. साथ ही, इसमें कोई अपवाद नहीं होता. इससे URL ऑब्जेक्ट को इंस्टैंशिएट करने से पहले, रनटाइम यूआरएल की पुष्टि करना आसान हो जाता है.
URL.canParse के लिए MDN दस्तावेज़ में जाकर, लागू करने से जुड़ी जानकारी देखें.
Storage Access API
Storage Access API, अलग-अलग साइटों पर एम्बेड किए गए कॉन्टेंट के लिए एक सिस्टम उपलब्ध कराता है. इसकी मदद से, तीसरे पक्ष के <iframe> में बिना सेक्शन वाली कुकी और स्टोरेज का ऐक्सेस पाने का अनुरोध किया जा सकता है. इससे अलग-अलग डोमेन के बीच, पुष्टि करने और स्टेटफ़ुल इंटरैक्शन को चालू करने में मदद मिलती है.
Storage Access API के लिए MDN पेज पर जाकर, इस बारे में ज़्यादा जानें.
बस इतना ही
हमें बताएं कि क्या हमने बेसलाइन से जुड़ी कोई जानकारी नहीं दी है. हम यह पक्का करेंगे कि उसे आने वाले समय में शामिल किया जाए! अगर आपका कोई सवाल है या आपको Baseline के बारे में कोई सुझाव/राय देनी है या शिकायत करनी है, तो हमारे समस्या ट्रैकर में जाकर समस्या की शिकायत करें.