बेसलाइन 2023

Rachel Andrew

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

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

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

बेसलाइन, 'क्या मैं इस्तेमाल कर सकता/सकती हूँ' पर ले जाता है

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

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

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

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

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

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

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

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

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

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

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

नए कलर मॉडल

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

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

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

इसके अलावा, Baseline में नए कलर फ़ंक्शन भी जोड़े गए हैं. color-mix() फ़ंक्शन की मदद से, किसी भी कलर स्पेस में एक रंग को दूसरे रंग में मिलाया जा सकता है. नीचे दी गई सीएसएस में, srgb कलर स्पेस में सफ़ेद में 25% नीला रंग मिलाया गया है.

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

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

Browser Support

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

Source

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

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

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

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

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 105.
  • Safari: 16.4.

Source

ज़्यादा जानने के लिए, OffscreenCanvas—वेब वर्कर्स की मदद से, कैनवस के ऑपरेशन तेज़ करना लेख पढ़ें

मॉड्यूल को पहले से लोड करना

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

Browser Support

  • Chrome: 66.
  • Edge: ≤79.
  • Firefox: 115.
  • Safari: 17.

Source

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

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

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Source

इस डेमो में, आइटम को एक सेंटर पॉइंट के चारों ओर गोलाकार पथ पर ले जाने के लिए, ट्रिगनोमेट्रिक फ़ंक्शन का इस्तेमाल किया गया है.

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

inert एट्रिब्यूट

किसी DOM एलिमेंट को inert के तौर पर मार्क करने पर, उससे गतिविधि या इंटरैक्शन हट जाता है. inert एट्रिब्यूट की वजह से, ब्राउज़र इस एलिमेंट को अनदेखा कर देता है:

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

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Source

इस एट्रिब्यूट को उन एलिमेंट में जोड़ें जो स्क्रीन पर नहीं दिखते या किसी और तरीके से छिपे होते हैं. ज़्यादा जानकारी के लिए, inert एट्रिब्यूट देखें.

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

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

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

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

NumberFormat V3

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

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

Browser Support

  • Chrome: 106.
  • Edge: 106.
  • Firefox: 116.
  • Safari: 15.4.

Source

NumberFormat V3 के लिए प्रस्ताव में, इन सभी नई सुविधाओं के बारे में बताया गया है.

Fullscreen API

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

Browser Support

  • Chrome: 71.
  • Edge: 79.
  • Firefox: 64.
  • Safari: 16.4.

Source

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

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

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

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

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

इस साल Baseline में जोड़ी गई अन्य सुविधाएं

इस साल Baseline में शामिल की गई अन्य सुविधाओं में ये शामिल हैं:

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