caniuse.com पर बेसलाइन की सुविधा उपलब्ध है! इस पोस्ट में, इंटिग्रेशन के बारे में बताया गया है. साथ ही, उन सुविधाओं के बारे में भी बताया गया है जो 2023 में बेसलाइन का हिस्सा बनीं.
बेसलाइन की नई परिभाषा में, किसी सुविधा की लाइफ़साइकल के दो चरण होते हैं. सबसे पहले, जब वह नई सुविधा के लिए उपलब्ध हो. इसके बाद, वह 30 महीने के बाद सभी के लिए उपलब्ध हो जाए. कोई सुविधा जब नीचे दिए गए ब्राउज़र में इंटरऑपरेबल हो जाती है, तो वह बेसलाइन का नया हिस्सा बन जाती है:
- Safari (macOS और iOS)
- Firefox (डेस्कटॉप और Android)
- Chrome (डेस्कटॉप और Android)
- Edge (डेस्कटॉप)
क्या इस्तेमाल किया जा सकता है के बारे में बेसलाइन
सुविधा की उपलब्धता के बारे में साफ़ तौर पर बताने के लिए अगला चरण, आज से बेसलाइन सुविधा का इस्तेमाल किया जा सकता है. 'क्या इस्तेमाल किया जा सकता है' के कुछ पेज पर जाने पर, आपको एक बैज दिखेगा. इससे आपको पता चलेगा कि यह सुविधा, 'बेसलाइन' के लिए पूरी तरह से उपलब्ध है या नहीं.
बेसलाइन वाली नई सुविधाओं में, एक बैज भी दिखेगा. साथ ही, उपलब्ध होने का साल भी दिखेगा. इसलिए, जो कुछ भी इस साल मुख्य ब्राउज़र सेट में इंटरऑपरेबल था वह बेसलाइन 2023 का हिस्सा है.
इस पोस्ट के बाकी हिस्से में, उन सुविधाओं के बारे में जानें जिन्होंने साल 2023 में यह उपलब्धि हासिल की है. ये सभी सुविधाएं बेसलाइन 2023 के तौर पर लॉन्च की गई हैं. ये नई सुविधाएं उपलब्ध हैं.
कंटेनर क्वेरी और कंटेनर क्वेरी यूनिट का साइज़
साइज़ कंटेनर क्वेरी की मदद से आप किसी एलिमेंट के साइज़ के बारे में क्वेरी कर सकते हैं. यह क्वेरी वैसे ही होती है जैसे मीडिया क्वेरी की मदद से व्यूपोर्ट के साइज़ के लिए क्वेरी करने की. इनके इस्तेमाल से, फिर से इस्तेमाल किए जा सकने वाले कॉम्पोनेंट बनाने में आसानी होती है. इसकी वजह यह है कि कॉम्पोनेंट उस जगह के हिसाब से कॉम्पोनेंट बनाए जा सकते हैं जहां उन्हें रखा गया है.
नीचे दिए गए कार्ड का डिज़ाइन, कॉम्पोनेंट की चौड़ाई के हिसाब से बदलता है. इस बारे में ज़्यादा जानें. इसके बारे में जानने के लिए, कंटेनर की क्वेरी स्टेबल ब्राउज़र में ऐक्सेस की जा सकती हैं.
नए कलर स्पेस और फ़ंक्शन
सीएसएस अब कलर स्पेस का इस्तेमाल करती है, ताकि आप एसआरजीबी गैमट के बाहर के कलर को ऐक्सेस कर सकें. इसका मतलब है कि आपके पास एचडी गैमट के रंगों का इस्तेमाल करके, एचडी (हाई डेफ़िनिशन) डिसप्ले पर काम करने की सुविधा है.
रंग के नए मॉडल
अब Baseline में मौजूद रंग फ़ंक्शन lch(), lab(), oklch(), और oklab() से LCH, Lab, OKLCH, और OKLab कलर मॉडल का ऐक्सेस मिलता है.
color-mix() फ़ंक्शन
साथ ही, नए कलर फ़ंक्शन को बेसलाइन का हिस्सा बना दिया गया है. color-mix() फ़ंक्शन की मदद से, किसी भी कलर स्पेस में एक रंग को दूसरे रंग में मिलाया जा सकता है. यहां दिए गए सीएसएस में, एसआरजीबी कलर स्पेस में नीले रंग का 25% हिस्सा सफ़ेद रंग में मिला दिया जाता है.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
color-mix() के बारे में ज़्यादा जानें.
color() फ़ंक्शन
color() फ़ंक्शन का इस्तेमाल ऐसे किसी भी कलर स्पेस के लिए किया जा सकता है जो R, G, और B चैनलों से कलर के बारे में बताता है. color() पहले कलर स्पेस पैरामीटर को लेता है. इसके बाद, आरजीबी के लिए चैनल वैल्यू की एक सीरीज़ और वैकल्पिक तौर पर कुछ ऐल्फ़ा का इस्तेमाल किया जाता है. इनमें से किसी का भी इस्तेमाल किया जा सकता है: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, और xyz-d65. उदाहरण के लिए:
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
सीएसएस की हाई डेफ़िनिशन कलर गाइड में नए कलर स्पेस और फ़ंक्शन के कई और उदाहरण दिए गए हैं. साथ ही, इसमें यह जानकारी भी दी गई है कि कब इस्तेमाल करना है.
कंप्रेस करने की स्ट्रीम
Compression Streams API एक JavaScript API है, जो डेटा की स्ट्रीम को कंप्रेस और डीकंप्रेस करता है. पहले से मौजूद इस कंप्रेशन का इस्तेमाल करने से, ऐप्लिकेशन को अब कंप्रेशन लाइब्रेरी में शामिल करने की ज़रूरत नहीं होती.
कंप्रेस स्ट्रीम अब सभी ब्राउज़र पर काम करती है के बारे में ज़्यादा जानें.
ऑफ़स्क्रीन कैनवस
ऑफ़स्क्रीन कैनवस से पहले, कैनवस ड्रॉइंग की क्षमताएं <canvas> एलिमेंट से जुड़ी होती थीं, जिसका मतलब था कि यह सीधे डीओएम पर निर्भर करता था. ऑफ़स्क्रीनकैनवस, जैसा कि नाम से ही पता चलता है, DOM और Canvas API को ऑफ़-स्क्रीन
लेकर अलग कर देता है.
इस डिकोडिंग की वजह से, OffscreenCanvas की रेंडरिंग भी पूरी तरह से डीओएम से अलग हो गई है. साथ ही, इससे सामान्य कैनवस की तुलना में स्पीड में कुछ सुधार होते हैं, क्योंकि इनके बीच कोई सिंक नहीं होता. हालांकि, इसके अलावा यह भी है कि रेंडरिंग के काम को वेब कर्मचारी पर ले जाने के लिए इसका इस्तेमाल किया जा सकता है. भले ही, कोई DOM उपलब्ध न हो. साथ ही, मुख्य थ्रेड को खाली किया जा सकता है और ऐप्लिकेशन को ज़्यादा रिस्पॉन्सिव बनाया जा सकता है.
OffscreenCanvas—के वेब वर्कर की मदद से कैनवस के काम करने की प्रोसेस को बेहतर बनाने के बारे में ज़्यादा जानें
मॉड्यूल पहले से लोड किया गया
मॉड्यूल पहले से लोड होने से, डाउनलोड और प्रोसेस करने में लगने वाला समय कम हो सकता है. JavaScript मॉड्यूल का रेफ़रंस देने वाले लिंक एलिमेंट में rel="modulepreload" जोड़ें. इसके बाद, ब्राउज़र मॉड्यूल हासिल करता है, उसे पार्स और कंपाइल करता है. इसके बाद, नतीजों को मॉड्यूल मैप में डाल देता है, ताकि वह एक्ज़ीक्यूट करने के लिए तैयार हो जाए.
ज़्यादा जानकारी के लिए, मॉड्यूल पहले से लोड करना लेख पढ़ें.
सीएसएस में त्रिकोणमितीय फ़ंक्शन
साल 2023 में, सीएसएस वैल्यू और यूनिट लेवल 4 के स्पेसिफ़िकेशन के त्रिकोणमितीय फ़ंक्शन इंटरऑपरेबल हो गए थे. इसका मतलब है कि sin(), cos(), tan(), asin(), acos(), atan(), और atan2() फ़ंक्शन, बेसलाइन 2023 का हिस्सा हैं.
इन फ़ंक्शन को इस्तेमाल करने का तरीका जानें. साथ ही, सीएसएस में त्रिकोणमितीय फ़ंक्शन में इस्तेमाल के कुछ उदाहरणों के बारे में जानें.
इनर्ट एट्रिब्यूट
Inert का मतलब है कि मूव करने की क्षमता नहीं है, इसलिए जब किसी इनर्शियल को मार्क किया जाता है, तो उन डीओएम एलिमेंट से गतिविधि या इंटरैक्शन को हटा दिया जाता है. इनर्ट एट्रिब्यूट की वजह से ब्राउज़र, एलिमेंट को अनदेखा कर देता है.
- अगर उपयोगकर्ता, एलिमेंट पर क्लिक करता है, तो
clickइवेंट ट्रिगर नहीं होगा. - एलिमेंट फ़ोकस नहीं कर पाएगा.
- एलिमेंट और उसके कॉन्टेंट को सुलभता ट्री से बाहर रखा गया है.
यह एट्रिब्यूट उन एलिमेंट में जोड़ा जाना चाहिए जो ऑफ़स्क्रीन हैं या छिपाए गए हैं. इस बारे में ज़्यादा जानने के लिए, इनर्ट एट्रिब्यूट पर जाएं.
सीएसएस ग्रिड लेआउट में सबग्रिड
grid-template-columns और grid-template-rows के लिए subgrid वैल्यू की मदद से, पैरंट ग्रिड में मौजूद ट्रैक का इस्तेमाल नेस्ट किए गए ग्रिड में किया जा सकता है. इसका मतलब है कि नेस्ट किए गए इन ग्रिड के अंदर एलिमेंट को एक-दूसरे के साथ अलाइन किया जा सकता है.
सीएसएस सबग्रिड लेख में आपको कई अन्य पोस्ट के कुछ उदाहरण और लिंक मिलेंगे. साथ ही, आपको सबग्रिड के इस्तेमाल के उदाहरणों को हाइलाइट करने वाले उदाहरण भी मिलेंगे.
संख्याफ़ॉर्मैट V3
Intl.NumberFormat V3, Intl.NumberFormat के लिए नई सुविधाओं का एक सेट है, जो 2023 में बेसलाइन का हिस्सा बन गया था. अतिरिक्त सुविधाएं ये हैं:
- संख्याओं की रेंज को फ़ॉर्मैट करने के लिए तीन नए फ़ंक्शन: formatRange, formatRangeToParts, और selectRange.
- ग्रुपिंग की सूची
- राउंडिंग और सटीक नतीजे पाने के नए विकल्प
- पूर्णांकन प्राथमिकता
- स्ट्रिंग को दशमलव संख्या में समझाना
- राउंडिंग मोड
- डिसप्ले नेगेटिव साइन करें
NumberFormat V3 के लिए सुझाव में, हर नई सुविधा के बारे में जानकारी दी गई है.
Fullscreen API
Fullscreen API से आप requestFullscreen() तरीके का इस्तेमाल करके, <video> जैसे किसी एलिमेंट को फ़ुलस्क्रीन मोड में रख सकते हैं. इससे यह भी पता चलता है कि कोई एलिमेंट फ़ुलस्क्रीन मोड में है या नहीं. साथ ही, इससे यह भी पता चलता है कि दस्तावेज़ ऐसी स्थिति में है या नहीं जिससे आपको फ़ुलस्क्रीन मोड का अनुरोध करने की सुविधा मिलेगी.
एमडीएन पर फ़ुलस्क्रीन एपीआई की गाइड में ज़्यादा जानें.
सीएसएस :has() सिलेक्टर
Baseline 2023 के लिए :has() सिलेक्टर बनाया गया है. यह 19 दिसंबर को Firefox 121 पर उपलब्ध होगा. दूसरे इस्तेमाल के साथ-साथ, यह सिलेक्टर पैरंट सिलेक्टर की तरह काम करता है. इससे आपको एलिमेंट के अंदर मौजूद चीज़ों के आधार पर एलिमेंट चुनने की सुविधा मिलती है. उदाहरण के लिए, एलिमेंट के अंदर इमेज है या नहीं, इसके आधार पर अलग-अलग सीएसएस लागू की जा सकती है.
:has(): फ़ैमिली सिलेक्टर में ज़्यादा जानकारी पाएं.
इस साल Baseline में शामिल की गई और सुविधाएं
इस पोस्ट में कुछ ऐसी मुख्य सुविधाएं शेयर की गई हैं जो इस साल बेसलाइन का हिस्सा बनीं. हालांकि, इसमें कुछ और सुविधाएं भी शामिल हैं.
- बनाई जा सकने वाली स्टाइलशीट
- सीएसएस में मुश्किल nth-चाइल्ड सिलेक्टर
- मीडिया क्वेरी के लिए रेंज सिंटैक्स
- Maps की जानकारी इंपोर्ट करें
- सीएसएस डिसप्ले के लिए एक से ज़्यादा वैल्यू
- @काउंटर-स्टाइल
counter-setसीएसएस प्रॉपर्टीlinear()ईज़िंग फ़ंक्शन- ऑरिजिन प्राइवेट फ़ाइल सिस्टम (OPFS)
- सीएसएस Nesting. इसमें, आसानी से पार्स करने की सुविधा को जोड़ने वाला बदलाव भी शामिल है.
- सीएसएस
:dir()बदली हुई क्लास सिलेक्टर - सीएसएस
capकी लंबाई की इकाई - सीएसएस मास्किंग
- एचटीएमएल वीडियो
<source>एलिमेंट के लिए मीडिया क्वेरी की सुविधा - एचटीएमएल
<search>एलिमेंट <iframe>एलिमेंट की लेज़ी लोडिंग (19 दिसंबर को Firefox 121 में लैंडिंग)lhऔरrlhसीएसएस की लाइन की ऊंचाई की इकाइयां
Interop 2023 में साथ मिलकर किए गए काम से, इनमें से कई सुविधाएं इंटरऑपरेबिलिटी तक पहुंच गई थीं. हमें यह देखने में काफ़ी आनंद आता है कि इस प्रोसेस के दौरान नई सुविधाओं को कैसे शामिल किया जा सकता है. साथ ही, 'बेसलाइन' के नए वर्शन में भी इसका इस्तेमाल किया जा सकता है. यही वजह है कि अब दुनिया भर में सभी के लिए उपलब्ध होने की तैयारी चल रही है. इससे यह तय करने में आसानी होती है कि अपने प्रोजेक्ट में सुविधाओं का इस्तेमाल कब करना है.