पब्लिश होने की तारीख: 3 जून, 2026
बेसललाइन के बारे में हर महीने मिलने वाली जानकारी में आपका स्वागत है. मई 2026 में, सीएसएस की कई नई सुविधाएं, इवेंट प्रॉपर्टी, और एपीआई के नए वर्शन, Baseline Newly available के तौर पर उपलब्ध हो गए. वहीं, सीएसएस यूनिट, उपयोगकर्ता का इंटरैक्शन प्रॉपर्टी, और सूडो-क्लास, Baseline Widely available के तौर पर उपलब्ध हो गए. साथ ही, डेवलपर कम्यूनिटी से जुड़े अहम अपडेट भी उपलब्ध हो गए.
सीएसएस 2026 के बारे में सर्वे
वेब कम्यूनिटी के लिए सालाना पल्स-चेक यहां है: State of CSS 2026 सर्वे अब उपलब्ध है. इस साल, आयोजकों ने सर्वे को बेहतर बनाने के लिए काफ़ी मेहनत की है. इसमें उन सुविधाओं पर फ़ोकस किया गया है जो एआई की मदद से कोडिंग करने के इस दौर में डेवलपर के लिए सबसे ज़्यादा अहम हैं. ब्राउज़र बनाने वाली कंपनियां इन नतीजों पर बारीकी से नज़र रखती हैं, ताकि वे अपने इंजीनियरिंग रोडमैप को प्राथमिकता दे सकें और डेवलपर की समस्याओं को हल कर सकें. सीएसएस के बदलते माहौल के बारे में अपनी राय दें और अपने अनुभव शेयर करें. ऐसा 1 जुलाई से पहले ज़रूर करें.
हाल ही में उपलब्ध कराई गई Baseline की सुविधाएं
इस सेक्शन में दी गई सुविधाएं, मई 2026 से ब्राउज़र के मुख्य सेट में काम करती हैं. अब ये सुविधाएं, नए Baseline में उपलब्ध हैं.
कंटेनर स्टाइल क्वेरी
कंटेनर क्वेरी अब सिर्फ़ साइज़ तक सीमित नहीं हैं. स्टाइल क्वेरी की मदद से, अब पैरंट कंटेनर की कस्टम प्रॉपर्टी के आधार पर, एलिमेंट पर स्टाइल लागू की जा सकती हैं. इससे आपको ऐसे मॉड्यूलर कॉम्पोनेंट बनाने में मदद मिलती है जो जटिल क्लास स्ट्रक्चर पर भरोसा किए बिना, कॉन्टेक्स्ट के हिसाब से अपनी थीम या स्टाइल को अडजस्ट कर सकते हैं.
@container के लिए MDN के रेफ़रंस पेज पर जाकर, इस बारे में ज़्यादा जानें.
:open स्यूडो-क्लास
स्टाइलिंग वाले ऐसे एलिमेंट जिनमें ओपन और क्लोज़ स्टेट होती हैं—जैसे कि <dialog> और <details>—के लिए, पहले एट्रिब्यूट की जांच करना या क्लास मैनेज करना ज़रूरी होता था. :open सूडो-क्लास, इस प्रोसेस को आसान बनाती है. यह इन एलिमेंट को सिर्फ़ तब मैच करती है, जब वे फ़िलहाल ओपन स्टेट में हों. इससे सीएसएस को ज़्यादा साफ़-सुथरा और बेहतर तरीके से लिखा जा सकता है.
इसके बारे में :open pseudo-class के लिए MDN पेज पर पढ़ें.
ToggleEvent.source
Popover API का इस्तेमाल करते समय, स्थिति में होने वाले बदलावों पर प्रतिक्रिया देना ज़रूरी होता है. source इंटरफ़ेस की source प्रॉपर्टी, उस कंट्रोल एलिमेंट को दिखाती है जिसने पॉपओवर टॉगल करने की कार्रवाई को ट्रिगर किया था.ToggleEvent इससे आपको इवेंट के सोर्स की पहचान करने और यूज़र इंटरफ़ेस (यूआई) के जटिल इंटरैक्शन को मैनेज करने में मदद मिलती है.
MDN के ToggleEvent.source के दस्तावेज़ में इस बारे में ज़्यादा जानें.
image-rendering प्रॉपर्टी
image-rendering सीएसएस प्रॉपर्टी की मदद से, इमेज का साइज़ बदलते समय इस्तेमाल किए जाने वाले स्केलिंग एल्गोरिदम को कंट्रोल किया जा सकता है. यह खास तौर पर पिक्सल आर्ट, लो-रिज़ॉल्यूशन वाली इमेज या क्यूआर कोड के लिए फ़ायदेमंद है. इनमें धुंधले इंटरपोलेशन से बचना और स्केलिंग को शार्प और पिक्सलेटेड रखना ज़रूरी होता है.
इसे इस्तेमाल करने का तरीका जानने के लिए, इमेज रेंडरिंग के लिए MDN पेज पर जाएं.
text-decoration-skip-ink: all
नीचे की ओर झुके हुए अक्षरों के बीच से गुज़रने वाली अंडरलाइन कभी-कभी उलझी हुई दिख सकती हैं. text-decoration-skip-ink: auto सिर्फ़ तब स्याही छोड़ता है, जब वह किसी अक्षर को काटता है. वहीं, इसे all पर सेट करने से, अंडरलाइन सभी ग्लिफ़ को छोड़ देती है, भले ही वह किसी अक्षर को काट रही हो या नहीं. इससे टाइपोग्राफ़ी के लुक को बेहतर तरीके से कंट्रोल किया जा सकता है.
MDN की टेक्स्ट-डेकोरेशन-स्किप-इंक के लिए बनी गाइड में इसके बारे में ज़्यादा जानकारी पढ़ें.
SharedWorker
SharedWorker एपीआई, बैकग्राउंड में काम करने वाला एक खास वर्कर उपलब्ध कराता है. इसे एक ही ऑरिजिन पर अलग-अलग ब्राउज़िंग कॉन्टेक्स्ट से ऐक्सेस किया जा सकता है. जैसे, अलग-अलग विंडो, टैब या iframe. यह स्थिति शेयर करने, कनेक्शन मैनेज करने या टैब की सीमाओं के बीच बैकग्राउंड टास्क को कोऑर्डिनेट करने के लिए बहुत काम का है.
SharedWorker के लिए MDN का दस्तावेज़ देखें.
व्यापक रूप से उपलब्ध Baseline की सुविधाएं
नीचे दी गई सुविधाएं, Baseline के साथ बड़े पैमाने पर उपलब्ध हो गई हैं. इसका मतलब है कि अब ये सुविधाएं, आपके प्रोजेक्ट में बड़े पैमाने पर इस्तेमाल की जा सकती हैं और इनके साथ काम कर सकती हैं.
lh लंबाई की इकाई
lh रिलेटिव यूनिट, उस एलिमेंट की लाइन-हाइट से मेल खाती है जिस पर इसका इस्तेमाल किया जाता है. इससे आइकॉन बैज या बैकग्राउंड हाइलाइट जैसे एलिमेंट का साइज़ तय करना आसान हो जाता है, ताकि वे टेक्स्ट की लाइन की ऊंचाई से पूरी तरह मेल खा सकें.
ज़्यादा जानकारी के लिए, लंबाई की इकाइयों के लिए MDN रेफ़रंस देखें.
rlh लंबाई की इकाई
lh की तरह, rlh यूनिट भी लाइन की ऊंचाई को दिखाती है. हालांकि, यह सिर्फ़ रूट एलिमेंट (<html>) की लाइन की ऊंचाई को दिखाती है. इससे आपको अपने पूरे पेज पर एक जैसा वर्टिकल रिदम सेट करने में मदद मिलती है. भले ही, फ़ॉन्ट का साइज़ या लाइन की ऊंचाई अलग-अलग हो.
ज़्यादा जानकारी के लिए, लंबाई की इकाइयों के लिए MDN रेफ़रंस देखें.
Navigator.userActivation
कई वेब एपीआई (जैसे, वीडियो चलाने, पॉप-अप दिखाने या क्लिपबोर्ड ऐक्सेस करने वाले एपीआई) को ट्रिगर करने से पहले, उपयोगकर्ता के इंटरैक्शन की ज़रूरत होती है. Navigator.userActivation प्रॉपर्टी, एक ऐसा ऑब्जेक्ट दिखाती है जिसमें विंडो पर उपयोगकर्ता की मौजूदा और पिछली ऐक्टिवेशन स्थिति के बारे में जानकारी होती है. इससे स्क्रिप्ट यह पुष्टि कर पाती हैं कि उपयोगकर्ता ने कोई जेस्चर किया है या नहीं.
इसे इस्तेमाल करने का तरीका जानने के लिए, Navigator.userActivation के लिए MDN पेज पर जाएं.
clip-path
clip-path सीएसएस प्रॉपर्टी की मदद से, क्लिपिंग क्षेत्र बनाया जा सकता है. इससे यह तय किया जा सकता है कि किसी एलिमेंट का कौनसा हिस्सा दिखना चाहिए. सर्कल, एलिप्स या पॉलीगॉन जैसे बेसिक शेप या एसवीजी पाथ का इस्तेमाल करके, दिलचस्प लेआउट डिज़ाइन और ट्रांज़िशन बनाए जा सकते हैं. इसके लिए, ओवरफ़्लो को छिपाने की ज़रूरत नहीं होती.
क्लिप-पाथ के लिए MDN पेज पर जाकर, लागू करने की जानकारी देखें.
:user-invalid स्यूडो-क्लास
:invalid, पेज लोड होते ही स्टाइल लागू करता है. इससे अक्सर यूज़र एक्सपीरियंस खराब हो जाता है. इसके उलट, :user-invalid स्यूडो-क्लास, सिर्फ़ अमान्य फ़ॉर्म एलिमेंट से मैच करती है. ऐसा तब होता है, जब उपयोगकर्ता उनसे इंटरैक्ट कर लेता है. इसका मतलब है कि उपयोगकर्ता के फ़ील्ड छोड़ने के बाद, फ़ॉर्म की पुष्टि करने से जुड़ी जानकारी दिखाई जा सकती है.
:user-invalid के लिए MDN दस्तावेज़ में, इसके काम करने का तरीका जानें.
बस इतना ही
अगर हमने बेसलाइन से जुड़ी कोई जानकारी नहीं दी है, तो हमें बताएं. हम आने वाले समय में उसे शामिल करेंगे! अगर आपका कोई सवाल है या आपको बेसलाइन के बारे में कोई सुझाव/राय देनी है या शिकायत करनी है, तो हमारे समस्या ट्रैकर में जाकर समस्या की जानकारी दें.