caniuse.com पर बेसलाइन की सुविधा उपलब्ध है! इस पोस्ट में, इंटिग्रेशन के बारे में जानें. साथ ही, उन सुविधाओं के बारे में जानें जो 2023 में बेसलाइन का हिस्सा बनी थीं.
बेसलाइन की नई परिभाषा में, किसी सुविधा की लाइफ़साइकल में दो चरण शामिल हैं: जब यह नया उपलब्ध होता है और 30 महीने बाद सभी के लिए उपलब्ध हो जाता है. कोई सुविधा, उपलब्ध नई बेसलाइन का हिस्सा बन जाती है. ऐसा तब होता है, जब वह नीचे दिए गए ब्राउज़र में इंटरऑपरेबल हो जाती है:
- Safari (macOS और iOS)
- Firefox (डेस्कटॉप और Android)
- Chrome (डेस्कटॉप और Android)
- Edge (डेस्कटॉप)
क्या इस्तेमाल किया जा सकता है के बारे में बेसलाइन
सुविधा की उपलब्धता के बारे में साफ़ तौर पर बताने के अगले चरण के तौर पर, बेसलाइन की सुविधा आज से इस्तेमाल की जा सकती है. 'क्या इस्तेमाल किया जा सकता है' के कुछ पेजों पर जाने पर, आपको एक बैज दिखेगा. इससे आपको पता चलेगा कि यह सुविधा, 'बेसलाइन' के लिए पूरी तरह से उपलब्ध है या नहीं.
हाल ही में उपलब्ध 'बेसलाइन' में मौजूद सुविधाओं पर एक बैज भी दिखेगा. साथ ही, उन सुविधाओं के उपलब्ध होने का साल भी दिखेगा. जो कुछ भी इस साल मुख्य ब्राउज़र सेट में इंटरऑपरेबल था वह Baseline 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 की रेंडरिंग भी डीओएम से पूरी तरह अलग हो गई है. इसलिए, यह सामान्य कैनवस के मुकाबले स्पीड में कुछ सुधार करती है, क्योंकि दोनों के बीच कोई सिंक नहीं होता. रेंडर करने के काम को वेब वर्कर पर ले जाने के लिए भी इसका इस्तेमाल किया जा सकता है. भले ही कोई डीओएम उपलब्ध न हो, मुख्य थ्रेड को खाली करना हो और ऐप्लिकेशन को ज़्यादा रिस्पॉन्सिव बनाना हो.
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
फ़ुलस्क्रीन एपीआई आपको requestFullscreen() तरीके का इस्तेमाल करके, <video> जैसे किसी एलिमेंट को फ़ुलस्क्रीन मोड में रखने की सुविधा देता है. इसमें यह भी पता लगाने के तरीके बताए गए हैं कि कोई एलिमेंट, फ़ुलस्क्रीन मोड में है या नहीं. साथ ही, इससे यह भी पता चलता है कि दस्तावेज़ ऐसी स्थिति में है या नहीं जिससे आपको फ़ुलस्क्रीन मोड का अनुरोध करने की सुविधा मिलती है.
एमडीएन पर फ़ुलस्क्रीन एपीआई की गाइड में ज़्यादा जानें.
सीएसएस :has() सिलेक्टर
Baseline 2023 को आधार बनाने के लिए, :has() सिलेक्टर को चुना गया है. यह Firefox
121 में 19 दिसंबर को दिखेगा. दूसरे इस्तेमाल के साथ-साथ, यह सिलेक्टर पैरंट सिलेक्टर की तरह काम करता है. इससे आपको अपने अंदर मौजूद चीज़ों के आधार पर किसी एलिमेंट को चुनने की सुविधा मिलती है. उदाहरण के लिए, एलिमेंट के अंदर इमेज है या नहीं, इस आधार पर अलग-अलग सीएसएस लागू की जा सकती है.
:has(): फ़ैमिली सिलेक्टर में ज़्यादा जानकारी पाएं.
इस साल Baseline में शामिल की गई और सुविधाएं
इन सुविधाओं को, इस साल बेसलाइन में शामिल किया गया है. इसमें ये भी शामिल हैं:
- बनाई जा सकने वाली स्टाइलशीट
- सीएसएस में मुश्किल nth-चाइल्ड सिलेक्टर
- मीडिया क्वेरी के लिए रेंज सिंटैक्स
- Maps की जानकारी इंपोर्ट करें
- सीएसएस डिसप्ले के लिए एक से ज़्यादा वैल्यू
- @काउंटर-स्टाइल
counter-setसीएसएस प्रॉपर्टीlinear()ईज़िंग फ़ंक्शन- ऑरिजिन प्राइवेट फ़ाइल सिस्टम (OPFS)
- सीएसएस नेस्टिंग, इसमें वह बदलाव भी शामिल है जो आसानी से पार्स करने की सुविधा को जोड़ता है.
- सीएसएस
:dir()बदली हुई क्लास सिलेक्टर - सीएसएस
capकी लंबाई की इकाई - सीएसएस मास्किंग
- एचटीएमएल वीडियो
<source>एलिमेंट के लिए मीडिया क्वेरी की सुविधा - एचटीएमएल
<search>एलिमेंट <iframe>एलिमेंट का लेज़ी लोडिंग (19 दिसंबर को Firefox 121 में लैंडिंग)lhऔरrlhसीएसएस की लाइन की ऊंचाई की इकाइयां
इनमें से कई सुविधाएं इंटरऑपरेबिलिटी 2023 में साथ मिलकर किए गए काम से इंटरऑपरेबिलिटी तक पहुंच गईं. हमें यह देखना दिलचस्प है कि उस प्रोसेस के ज़रिए कैसे नई सुविधाएं उपलब्ध कराई जा सकती हैं. साथ ही, इन्हें अब नई सुविधाओं के तौर पर 'बेसलाइन' में शामिल किया जा सकता है. इससे वे बड़े पैमाने पर उपलब्ध होने के लिए टाइमर सेट कर देते हैं. इससे यह तय करने में आसानी होती है कि अपने प्रोजेक्ट में सुविधाओं को कब अपनाना है.