Google I/O में मैंने यह जानकारी दी थी कि पिछले साल I/O में किए जाने वाले एलान के बाद, बेसलाइन में किस तरह से बदलाव हुआ है. मैंने वेब प्लैटफ़ॉर्म डैशबोर्ड, RUM Archive के साथ इंटिग्रेशन और RUMvision के आने वाले इंटिग्रेशन की भी घोषणा की. इस पोस्ट में, बातचीत के सभी संसाधनों को एक ही जगह पर लाया गया है.
वेब प्लैटफ़ॉर्म डैशबोर्ड, पूरे वेब प्लैटफ़ॉर्म को देखने, अलग-अलग सुविधाओं के इंटरऑपरेबिलिटी, और बेसलाइन का हिस्सा बनने का नया और दिलचस्प तरीका है. इसके बारे में ज़्यादा जानने के लिए, वेब प्लैटफ़ॉर्म डैशबोर्ड का एलान करें.
बेसलाइन को रोज़ इस्तेमाल किए जाने वाले टूल के साथ इंटिग्रेट करना, हमेशा से इस प्रोजेक्ट का हिस्सा रहा है. हम ब्राउज़र के साथ काम करने की प्रक्रिया को कुछ ऐसा बनाना चाहते हैं, जिसके बारे में आपको सोचने में ज़्यादा समय न देना पड़े. आरयूएम संग्रह को इंटिग्रेट करने के बारे में ज़्यादा जानें. साथ ही, टूल की सेवा देने वाली अन्य कंपनियों के बारे में जल्द ही खबरें पाने के लिए यह स्पेस देखें.
बेसलाइन में नया है
I/O में मैंने वेब प्लैटफ़ॉर्म की 12 सुविधाएं शेयर की हैं, जो हाल ही में Baseline Newly उपलब्ध का हिस्सा हैं. ये सुविधाएं अब Chrome, Edge,
Firefox, और Safari में उपलब्ध हैं. साथ ही,
इन चीज़ों में छोटी-छोटी चीज़ें भी शामिल हैं, जो डेवलपमेंट को आसान बना सकती हैं.
साथ ही, डेवलपर की ज़रूरत के हिसाब से
कंटेनर क्वेरी और :has() जैसी कुछ सुविधाएं भी उपलब्ध हैं.
कंटेनर की क्वेरी का साइज़
साइज़ कंटेनर क्वेरी की मदद से, सिर्फ़ मीडिया क्वेरी की मदद से व्यूपोर्ट के साइज़ को टारगेट करने के बजाय, कंटेनर की चौड़ाई या इनलाइन साइज़ के आधार पर डिज़ाइन में बदलाव किया जा सकता है. इससे, फिर से इस्तेमाल किए जा सकने वाले ऐसे कॉम्पोनेंट चालू हो जाते हैं जो किसी लेआउट में डाले जाने पर, उपलब्ध जगह के हिसाब से खुद में बदलाव कर सकते हैं. जब तक रिस्पॉन्सिव डिज़ाइन की अवधारणा मौजूद है, तब तक ये फ़ीचर की सूची में सबसे ऊपर रहे हैं.
- यह सुविधा फ़रवरी 2023 में उपलब्ध होगी.
- अगस्त 2025 में यह सुविधा बड़े पैमाने पर उपलब्ध है.
एमडीएन पर कंटेनर क्वेरी के बारे में ज़्यादा जानें. साथ ही, कंटेनर क्वेरी की लैंडिग स्टेबल ब्राउज़र में जाकर, कंटेनर क्वेरी की केस स्टडी में जानें कि अन्य डेवलपमेंट टीम को उनसे किस तरह फ़ायदा मिल रहा है.
:has() चुनने वाला
:has() सिलेक्टर, हमें कुछ ऐसी चीज़ देता है जो कई सालों से डेवलपर की ओर से एक और अनुरोध होता है. पैरंट सिलेक्टर, किसी एलिमेंट के अंदर मौजूद चीज़ों के आधार पर उसे चुनने का तरीका. हालांकि, :has() इससे कहीं ज़्यादा हो सकता है.
कंटेनर क्वेरी की तरह ही, फिर से इस्तेमाल किए जा सकने वाले कॉम्पोनेंट बनाते समय यह काफ़ी मददगार होता है. इसकी वजह यह है कि एक ऐसा कॉम्पोनेंट बनाया जा सकता है जो इसमें मौजूद कॉम्पोनेंट के मुताबिक काम कर सके.
- यह सुविधा दिसंबर 2023 में उपलब्ध होगी.
- जून 2026 में, ज़्यादा से ज़्यादा लोगों के लिए उपलब्ध होगी.
एमडीएन के बारे में :has(), :has() फ़ैमिली सिलेक्टर, और :has() केस स्टडी में ज़्यादा जानें.
सीएसएस ग्रिड लेआउट सबग्रिड
सबग्रिड, नेस्ट किए गए ग्रिड लेआउट की सुविधा को उसके पैरंट से ट्रैक इनहेरिट करने की सुविधा देता है. यह नेस्ट किए गए ग्रिड में आइटम को बेहतर तरीके से अलाइन करने की अनुमति देता है.
- यह सुविधा दिसंबर 2023 में उपलब्ध होगी.
- जून 2026 में, ज़्यादा से ज़्यादा लोगों के लिए उपलब्ध होगी.
एमडीएन पर सबग्रिड और सीएसएस सबग्रिड के बारे में ज़्यादा जानें. यह बहुत सारे अन्य संसाधनों से जुड़ा होता है.
सीएसएस नेस्टिंग
पिछले कुछ सालों में, सीएसएस ने डेवलपर ने Sass जैसे प्रीप्रोसेसर में इस्तेमाल की जाने वाली सुविधाओं से प्रेरणा ली है. उदाहरण के लिए, सीएसएस कस्टम प्रॉपर्टी, जिसे अक्सर सीएसएस वैरिएबल के नाम से जाना जाता है, एक ऐसी सुविधा है जिसकी मदद से, रंग जैसे वैरिएबल को एक ही जगह पर सेट करके, आपके सभी सीएसएस में इस्तेमाल किया जा सकता है. यह ऐसी सुविधा है जो पहले सिर्फ़ प्रीप्रोसेसर का इस्तेमाल करते समय उपलब्ध होती थी.
प्रीप्रोसेसर की एक और सुविधा Nesting है. नेस्ट करने से, सिलेक्टर के दोहराव से बचा जा सकता है और सीएसएस को पढ़ने में मदद मिलती है. ऐसा इसलिए होता है, क्योंकि इससे जुड़ी चीज़ों को एक साथ आसानी से ग्रुप किया जा सकता है.
- यह अगस्त 2023 में उपलब्ध होगा
- फ़रवरी 2026 में ज़्यादा से ज़्यादा लोगों के लिए उपलब्ध
एमडीएन पर सीएसएस नेस्टिंग और सीएसएस नेस्टिंग में ज़्यादा जानें.
एचटीएमएल <search> एलिमेंट
खोज एक ऐसा तरीका है जो कई साइटों और ऐप्लिकेशन पर दिखता है. हालांकि, कुछ समय पहले तक किसी पेज पर खोजने या फ़िल्टर करने के काम को मार्क अप करने वाला कोई एलिमेंट नहीं होता. <search> एलिमेंट को इसी काम के लिए डिज़ाइन किया गया है. यह एक एलिमेंट के रूप में मौजूद होता है, जिसमें सर्च फ़ॉर्म या नतीजों को फ़िल्टर करने के लिए इस्तेमाल किए जाने वाले दूसरे एलिमेंट डाले जा सकते हैं.
- अक्टूबर 2023 में उपलब्ध नया अपडेट
- अप्रैल 2026 में ज़्यादा से ज़्यादा लोगों के लिए उपलब्ध
एमडीएन पर <search> एलिमेंट के बारे में ज़्यादा जानें.
रिस्पॉन्सिव वीडियो
इस सुविधा का मतलब है कि <video> एलिमेंट में <source> एलिमेंट का इस्तेमाल करके, अलग-अलग डिवाइसों पर सही साइज़ के वीडियो दिखाने के लिए,
इस तरह से अलग-अलग साइज़ की इमेज दिखाई जा सकती हैं.
- यह सुविधा नवंबर 2023 में उपलब्ध होगी
- मई 2026 में ज़्यादा से ज़्यादा लोगों के लिए उपलब्ध
एमडीएन के बारे में ज़्यादा जानने के लिए, मीडिया या इमेज सोर्स एलिमेंट में जाएं और रिस्पॉन्सिव वीडियो इस्तेमाल करने का तरीका लेख पढ़ें.
inert एट्रिब्यूट
अगर कोई एलिमेंट इनऐक्टिव है, तो उसके साथ इंटरैक्ट नहीं किया जा सकता. उदाहरण के लिए, डायलॉग विंडो के पीछे के पेज पर मौजूद डायलॉग विंडो के एलिमेंट पर क्लिक या टैब नहीं किया जा सकता. इनर्ट एट्रिब्यूट से, आपको यूज़र इंटरफ़ेस (यूआई) के किसी भी हिस्से पर जुड़ाव को कंट्रोल करने का तरीका मिलता है.
किसी एलिमेंट पर लागू की गई inert एट्रिब्यूट की मदद से, क्लिक इवेंट ट्रिगर नहीं होंगे.
- अप्रैल 2023 में उपलब्ध नई सुविधा
- अक्टूबर 2025 में ज़्यादा से ज़्यादा लोगों के लिए उपलब्ध
एमडीएन पर इनर्ट के साथ-साथ इनर्ट एट्रिब्यूट में भी ज़्यादा जानें.
color-mix() फ़ंक्शन
color-mix() फ़ंक्शन की मदद से, किसी भी उपलब्ध कलर स्पेस में एक रंग को दूसरे रंग से मिलाया जा सकता है. इसमें ऐसे सभी नए कलर मॉडल—LCH, Lab,
OKLCH, और OKLab शामिल हैं—जो हाल ही में बेसलाइन न्यूली उपलब्ध का हिस्सा बन गए हैं.
- अप्रैल 2023 में उपलब्ध नई सुविधा
- अक्टूबर 2025 में ज़्यादा से ज़्यादा लोगों के लिए उपलब्ध
MDN पर color-mix() और सीएसएस color-mix() के बारे में ज़्यादा जानें.
हमारे पास हाई डेफ़िनिशन सीएसएस कलर गाइड भी है. इसमें सीएसएस में उपलब्ध सभी नए कलर मॉडल शामिल हैं. साथ ही, इन नए रंगों के साथ खेलने और अच्छे ग्रेडिएंट बनाने के लिए, gradient.style देखें.
:user-valid और :user-invalid
बदली हुई क्लास :valid और :invalid, ब्राउज़र पर ज़्यादा इस्तेमाल की जा सकती हैं. इनसे यह पता चलता है कि कोई फ़ॉर्म एलिमेंट, उस पर लागू किसी कंस्ट्रेंट नियम के मुताबिक फ़िलहाल मान्य है या अमान्य है. इसलिए, अगर आपके पास ईमेल के टाइप वाला फ़ील्ड है और उसमें कोई नाम है, तो :invalid स्यूडो-क्लास इसे चुनती है. साथ ही, इसमें कोई रंग या आइकॉन जोड़कर दिखाया जा सकता है कि इसे ठीक करने की ज़रूरत है.
:valid और :invalid बदली हुई क्लास के साथ समस्या यह है कि उपयोगकर्ता के फ़ॉर्म से इंटरैक्ट करने से पहले ही इन्हें लागू किया जाता है. इसलिए, अगर किसी फ़ॉर्म एलिमेंट की ज़रूरत है और उपयोगकर्ता ने उसे अभी तक पूरा नहीं किया है, तो आपकी अमान्य स्टाइल दिखेगी. आम तौर पर, आपको अमान्य स्टाइल तब ही दिखानी चाहिए, जब कोई उपयोगकर्ता गलत तरीके से जानकारी डाल देता है या किसी फ़ील्ड को स्किप करके उसे खाली छोड़ देता है.
ऐसी स्थिति में उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, :user-valid और
:user-invalid बदली हुई क्लास का इस्तेमाल करें. ये काफ़ी हद तक करीब-करीब एक जैसा ही काम करते हैं. हालांकि, ये तब ही मैच होते हैं, जब उपयोगकर्ता ने फ़ील्ड से इंटरैक्ट किया हो. इसलिए,
ज़रूरी फ़ील्ड के उदाहरण में, उपयोगकर्ता को उस फ़ील्ड पर टैब करना होगा या
क्लिक करना होगा. इसके बाद, अमान्य स्थिति दिखाने के लिए,
फ़ील्ड को भरना ज़रूरी है.
- अक्टूबर 2023 में उपलब्ध नया अपडेट
- अप्रैल 2026 में ज़्यादा से ज़्यादा लोगों के लिए उपलब्ध
एमडीएन पर :user-valid और :user-invalid
के बारे में ज़्यादा जानें.
कंप्रेशन स्ट्रीम
कई वेब ऐप्लिकेशन में उपयोगकर्ता को ZIP फ़ाइल जैसे कंप्रेस किए गए फ़ॉर्मैट में डाउनलोड उपलब्ध कराना होता है. पहले इसके लिए ऐप्लिकेशन में एक कंप्रेशन लाइब्रेरी, कोड शामिल करना ज़रूरी होता था जिससे सभी उपयोगकर्ताओं के लिए ऐप्लिकेशन का आकार बढ़ जाता था. 'कंप्रेशन स्ट्रीम एपीआई' आपको डेटा स्ट्रीम को कंप्रेस करने का पहले से मौजूद तरीका देता है.
- यह सुविधा मई 2023 में उपलब्ध होगी
- नवंबर 2025 में ज़्यादा से ज़्यादा लोगों के लिए उपलब्ध
एमडीएन पर कंप्रेशन स्ट्रीम एपीआई के बारे में ज़्यादा जानें. कंप्रेस स्ट्रीम अब सभी ब्राउज़र पर काम करती है पेज पर जाएं.
डिक्लेरेटिव शैडो डीओएम
डिक्लेरेटिव शैडो डीओएम, एचटीएमएल से शैडो ट्री बनाने का एक नया तरीका है. इसमें पहले सिर्फ़ attachShadow() का इस्तेमाल करके, JavaScript से शैडो ट्री बनाया जा सकता था. एचटीएमएल से ऐसा कर पाना खास तौर पर उन स्थितियों में मददगार होता है जहां JavaScript को नहीं चलाया जा सकता, जैसे कि ईमेल क्लाइंट. यह सर्वर साइड से रेंडर किए गए वेब कॉम्पोनेंट के लिए भी ज़रूरी है.
- फ़रवरी 2024 में नया वर्शन उपलब्ध होगा
- अगस्त 2026 में ज़्यादा से ज़्यादा लोगों के लिए उपलब्ध होगा
घोषणात्मक शैडो DOM के बारे में ज़्यादा जानें.
पॉपओवर एपीआई
पॉप-अप का इस्तेमाल हमारे वेब ऐप्लिकेशन में कई अलग-अलग कामों के लिए किया जाता है. उदाहरण के लिए, मेन्यू, पसंद के मुताबिक टोस्ट से जुड़ी सूचनाएं, और कॉन्टेंट पिकर. अब पॉपओवर एपीआई की मदद से, इन पॉप-अप को सजावटी तरीके से बनाने का एक तरीका पहले से मौजूद है.
- अप्रैल 2024 में उपलब्ध नई सुविधा
- अक्टूबर 2026 में ज़्यादा से ज़्यादा लोगों के लिए उपलब्ध
एमडीएन पर पॉपओवर एपीआई, बेसलाइन में पॉपओवर एपीआई लैंड करता है, और पॉपओवर केस स्टडी के बारे में ज़्यादा जानें.
ये 12 सुविधाएं बस कुछ ऐसी हैं जो 'बेसलाइन न्यूली उपलब्ध' का हिस्सा बन गई हैं और इस साइट पर आपको इसके बारे में ज़्यादा जानकारी मिल सकती है. उन सभी सुविधाओं के बारे में जानें जो बेसलाइन 2023 में शामिल हुईं. साथ ही, उन सुविधाओं के बढ़ते कलेक्शन के बारे में जानें जो बेसलाइन 2024 का हिस्सा हैं.