बेसलाइन 2023

caniuse.com पर बेसलाइन की सुविधा उपलब्ध है! इस पोस्ट में, इंटिग्रेशन के बारे में बताया गया है. साथ ही, उन सुविधाओं के बारे में भी बताया गया है जो 2023 में बेसलाइन का हिस्सा बनीं.

बेसलाइन की नई परिभाषा में, किसी सुविधा की लाइफ़साइकल के दो चरण होते हैं. सबसे पहले, जब वह नई सुविधा के लिए उपलब्ध हो. इसके बाद, वह 30 महीने के बाद सभी के लिए उपलब्ध हो जाए. कोई सुविधा जब नीचे दिए गए ब्राउज़र में इंटरऑपरेबल हो जाती है, तो वह बेसलाइन का नया हिस्सा बन जाती है:

  • Safari (macOS और iOS)
  • Firefox (डेस्कटॉप और Android)
  • Chrome (डेस्कटॉप और Android)
  • Edge (डेस्कटॉप)

क्या इस्तेमाल किया जा सकता है के बारे में बेसलाइन

सुविधा की उपलब्धता के बारे में साफ़ तौर पर बताने के लिए अगला चरण, आज से बेसलाइन सुविधा का इस्तेमाल किया जा सकता है. 'क्या इस्तेमाल किया जा सकता है' के कुछ पेज पर जाने पर, आपको एक बैज दिखेगा. इससे आपको पता चलेगा कि यह सुविधा, 'बेसलाइन' के लिए पूरी तरह से उपलब्ध है या नहीं.

सीएसएस ग्रिड लेआउट पर, सभी के लिए उपलब्ध बैज के साथ 'क्या मैं इस्तेमाल कर सकता/सकती हूं' का स्क्रीनशॉट.

बेसलाइन वाली नई सुविधाओं में, एक बैज भी दिखेगा. साथ ही, उपलब्ध होने का साल भी दिखेगा. इसलिए, जो कुछ भी इस साल मुख्य ब्राउज़र सेट में इंटरऑपरेबल था वह बेसलाइन 2023 का हिस्सा है.

कंटेनर क्वेरी पर उपलब्ध नए बैज के साथ 'क्या इस्तेमाल किया जा सकता है' का स्क्रीनशॉट.

इस पोस्ट के बाकी हिस्से में, उन सुविधाओं के बारे में जानें जिन्होंने साल 2023 में यह उपलब्धि हासिल की है. ये सभी सुविधाएं बेसलाइन 2023 के तौर पर लॉन्च की गई हैं. ये नई सुविधाएं उपलब्ध हैं.

कंटेनर क्वेरी और कंटेनर क्वेरी यूनिट का साइज़

साइज़ कंटेनर क्वेरी की मदद से आप किसी एलिमेंट के साइज़ के बारे में क्वेरी कर सकते हैं. यह क्वेरी वैसे ही होती है जैसे मीडिया क्वेरी की मदद से व्यूपोर्ट के साइज़ के लिए क्वेरी करने की. इनके इस्तेमाल से, फिर से इस्तेमाल किए जा सकने वाले कॉम्पोनेंट बनाने में आसानी होती है. इसकी वजह यह है कि कॉम्पोनेंट उस जगह के हिसाब से कॉम्पोनेंट बनाए जा सकते हैं जहां उन्हें रखा गया है.

ब्राउज़र सहायता

  • 105
  • 105
  • 110
  • 16

सोर्स

नीचे दिए गए कार्ड का डिज़ाइन, कॉम्पोनेंट की चौड़ाई के हिसाब से बदलता है. इस बारे में ज़्यादा जानें. इसके बारे में जानने के लिए, कंटेनर की क्वेरी स्टेबल ब्राउज़र में ऐक्सेस की जा सकती हैं.

नए कलर स्पेस और फ़ंक्शन

सीएसएस अब कलर स्पेस का इस्तेमाल करती है, ताकि आप एसआरजीबी गैमट के बाहर के कलर को ऐक्सेस कर सकें. इसका मतलब है कि आपके पास एचडी गैमट के रंगों का इस्तेमाल करके, एचडी (हाई डेफ़िनिशन) डिसप्ले पर काम करने की सुविधा है.

रंग के नए मॉडल

अब Baseline में मौजूद रंग फ़ंक्शन lch(), lab(), oklch(), और oklab() से LCH, Lab, OKLCH, और OKLab कलर मॉडल का ऐक्सेस मिलता है.

ब्राउज़र सहायता

  • 111
  • 111
  • 113
  • 15

सोर्स

gradient.style एडिटर का स्क्रीनशॉट, जिसमें गुलाबी से नीले रंग के वाइब्रेंट ग्रेडिएंट हैं.
gradient.style का इस्तेमाल करके नए कलर स्पेस को आज़माएं.

color-mix() फ़ंक्शन

साथ ही, नए कलर फ़ंक्शन को बेसलाइन का हिस्सा बना दिया गया है. color-mix() फ़ंक्शन की मदद से, किसी भी कलर स्पेस में एक रंग को दूसरे रंग में मिलाया जा सकता है. यहां दिए गए सीएसएस में, एसआरजीबी कलर स्पेस में नीले रंग का 25% हिस्सा सफ़ेद रंग में मिला दिया जाता है.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

ब्राउज़र सहायता

  • 111
  • 111
  • 113
  • 15

सोर्स

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 है, जो डेटा की स्ट्रीम को कंप्रेस और डीकंप्रेस करता है. पहले से मौजूद इस कंप्रेशन का इस्तेमाल करने से, ऐप्लिकेशन को अब कंप्रेशन लाइब्रेरी में शामिल करने की ज़रूरत नहीं होती.

ब्राउज़र सहायता

  • 80
  • 80
  • 113
  • 78 जीबी में से

सोर्स

कंप्रेस स्ट्रीम अब सभी ब्राउज़र पर काम करती है के बारे में ज़्यादा जानें.

ऑफ़स्क्रीन कैनवस

ऑफ़स्क्रीन कैनवस से पहले, कैनवस ड्रॉइंग की क्षमताएं <canvas> एलिमेंट से जुड़ी होती थीं, जिसका मतलब था कि यह सीधे डीओएम पर निर्भर करता था. ऑफ़स्क्रीनकैनवस, जैसा कि नाम से ही पता चलता है, DOM और Canvas API को ऑफ़-स्क्रीन लेकर अलग कर देता है.

इस डिकोडिंग की वजह से, OffscreenCanvas की रेंडरिंग भी पूरी तरह से डीओएम से अलग हो गई है. साथ ही, इससे सामान्य कैनवस की तुलना में स्पीड में कुछ सुधार होते हैं, क्योंकि इनके बीच कोई सिंक नहीं होता. हालांकि, इसके अलावा यह भी है कि रेंडरिंग के काम को वेब कर्मचारी पर ले जाने के लिए इसका इस्तेमाल किया जा सकता है. भले ही, कोई DOM उपलब्ध न हो. साथ ही, मुख्य थ्रेड को खाली किया जा सकता है और ऐप्लिकेशन को ज़्यादा रिस्पॉन्सिव बनाया जा सकता है.

ब्राउज़र सहायता

  • 69
  • 79
  • 105
  • 78 जीबी में से

सोर्स

OffscreenCanvas—के वेब वर्कर की मदद से कैनवस के काम करने की प्रोसेस को बेहतर बनाने के बारे में ज़्यादा जानें

मॉड्यूल पहले से लोड किया गया

मॉड्यूल पहले से लोड होने से, डाउनलोड और प्रोसेस करने में लगने वाला समय कम हो सकता है. JavaScript मॉड्यूल का रेफ़रंस देने वाले लिंक एलिमेंट में rel="modulepreload" जोड़ें. इसके बाद, ब्राउज़र मॉड्यूल हासिल करता है, उसे पार्स और कंपाइल करता है. इसके बाद, नतीजों को मॉड्यूल मैप में डाल देता है, ताकि वह एक्ज़ीक्यूट करने के लिए तैयार हो जाए.

ब्राउज़र सहायता

  • 66
  • 79 से कम
  • 115
  • 17

सोर्स

ज़्यादा जानकारी के लिए, मॉड्यूल पहले से लोड करना लेख पढ़ें.

सीएसएस में त्रिकोणमितीय फ़ंक्शन

साल 2023 में, सीएसएस वैल्यू और यूनिट लेवल 4 के स्पेसिफ़िकेशन के त्रिकोणमितीय फ़ंक्शन इंटरऑपरेबल हो गए थे. इसका मतलब है कि sin(), cos(), tan(), asin(), acos(), atan(), और atan2() फ़ंक्शन, बेसलाइन 2023 का हिस्सा हैं.

ब्राउज़र सहायता

  • 111
  • 111
  • 108
  • 15.4

सोर्स

इस डेमो में त्रिकोणमितीय फ़ंक्शन का इस्तेमाल करके, आइटम को एक गोल पाथ पर, मुख्य बिंदु पर ले जाया गया है.

इन फ़ंक्शन को इस्तेमाल करने का तरीका जानें. साथ ही, सीएसएस में त्रिकोणमितीय फ़ंक्शन में इस्तेमाल के कुछ उदाहरणों के बारे में जानें.

इनर्ट एट्रिब्यूट

Inert का मतलब है कि मूव करने की क्षमता नहीं है, इसलिए जब किसी इनर्शियल को मार्क किया जाता है, तो उन डीओएम एलिमेंट से गतिविधि या इंटरैक्शन को हटा दिया जाता है. इनर्ट एट्रिब्यूट की वजह से ब्राउज़र, एलिमेंट को अनदेखा कर देता है.

  • अगर उपयोगकर्ता, एलिमेंट पर क्लिक करता है, तो click इवेंट ट्रिगर नहीं होगा.
  • एलिमेंट फ़ोकस नहीं कर पाएगा.
  • एलिमेंट और उसके कॉन्टेंट को सुलभता ट्री से बाहर रखा गया है.

ब्राउज़र सहायता

  • 102
  • 102
  • 112
  • 75.5

सोर्स

यह एट्रिब्यूट उन एलिमेंट में जोड़ा जाना चाहिए जो ऑफ़स्क्रीन हैं या छिपाए गए हैं. इस बारे में ज़्यादा जानने के लिए, इनर्ट एट्रिब्यूट पर जाएं.

सीएसएस ग्रिड लेआउट में सबग्रिड

grid-template-columns और grid-template-rows के लिए subgrid वैल्यू की मदद से, पैरंट ग्रिड में मौजूद ट्रैक का इस्तेमाल नेस्ट किए गए ग्रिड में किया जा सकता है. इसका मतलब है कि नेस्ट किए गए इन ग्रिड के अंदर एलिमेंट को एक-दूसरे के साथ अलाइन किया जा सकता है.

ब्राउज़र सहायता

  • 117
  • 117
  • 71
  • 16

सोर्स

सीएसएस सबग्रिड लेख में आपको कई अन्य पोस्ट के कुछ उदाहरण और लिंक मिलेंगे. साथ ही, आपको सबग्रिड के इस्तेमाल के उदाहरणों को हाइलाइट करने वाले उदाहरण भी मिलेंगे.

संख्याफ़ॉर्मैट V3

Intl.NumberFormat V3, Intl.NumberFormat के लिए नई सुविधाओं का एक सेट है, जो 2023 में बेसलाइन का हिस्सा बन गया था. अतिरिक्त सुविधाएं ये हैं:

  • संख्याओं की रेंज को फ़ॉर्मैट करने के लिए तीन नए फ़ंक्शन: formatRange, formatRangeToParts, और selectRange.
  • ग्रुपिंग की सूची
  • राउंडिंग और सटीक नतीजे पाने के नए विकल्प
  • पूर्णांकन प्राथमिकता
  • स्ट्रिंग को दशमलव संख्या में समझाना
  • राउंडिंग मोड
  • डिसप्ले नेगेटिव साइन करें

ब्राउज़र सहायता

  • 106
  • 106
  • 116
  • 15.4

सोर्स

NumberFormat V3 के लिए सुझाव में, हर नई सुविधा के बारे में जानकारी दी गई है.

Fullscreen API

Fullscreen API से आप requestFullscreen() तरीके का इस्तेमाल करके, <video> जैसे किसी एलिमेंट को फ़ुलस्क्रीन मोड में रख सकते हैं. इससे यह भी पता चलता है कि कोई एलिमेंट फ़ुलस्क्रीन मोड में है या नहीं. साथ ही, इससे यह भी पता चलता है कि दस्तावेज़ ऐसी स्थिति में है या नहीं जिससे आपको फ़ुलस्क्रीन मोड का अनुरोध करने की सुविधा मिलेगी.

ब्राउज़र सहायता

  • 71
  • 79
  • 64
  • 78 जीबी में से

सोर्स

एमडीएन पर फ़ुलस्क्रीन एपीआई की गाइड में ज़्यादा जानें.

सीएसएस :has() सिलेक्टर

Baseline 2023 के लिए :has() सिलेक्टर बनाया गया है. यह 19 दिसंबर को Firefox 121 पर उपलब्ध होगा. दूसरे इस्तेमाल के साथ-साथ, यह सिलेक्टर पैरंट सिलेक्टर की तरह काम करता है. इससे आपको एलिमेंट के अंदर मौजूद चीज़ों के आधार पर एलिमेंट चुनने की सुविधा मिलती है. उदाहरण के लिए, एलिमेंट के अंदर इमेज है या नहीं, इसके आधार पर अलग-अलग सीएसएस लागू की जा सकती है.

ब्राउज़र सहायता

  • 105
  • 105
  • 121
  • 15.4

सोर्स

:has(): फ़ैमिली सिलेक्टर में ज़्यादा जानकारी पाएं.

इस साल Baseline में शामिल की गई और सुविधाएं

इस पोस्ट में कुछ ऐसी मुख्य सुविधाएं शेयर की गई हैं जो इस साल बेसलाइन का हिस्सा बनीं. हालांकि, इसमें कुछ और सुविधाएं भी शामिल हैं.

Interop 2023 में साथ मिलकर किए गए काम से, इनमें से कई सुविधाएं इंटरऑपरेबिलिटी तक पहुंच गई थीं. हमें यह देखने में काफ़ी आनंद आता है कि इस प्रोसेस के दौरान नई सुविधाओं को कैसे शामिल किया जा सकता है. साथ ही, 'बेसलाइन' के नए वर्शन में भी इसका इस्तेमाल किया जा सकता है. यही वजह है कि अब दुनिया भर में सभी के लिए उपलब्ध होने की तैयारी चल रही है. इससे यह तय करने में आसानी होती है कि अपने प्रोजेक्ट में सुविधाओं का इस्तेमाल कब करना है.