बेसलाइन 2023

Rachel Andrew

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

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

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

क्या इस्तेमाल करने की अनुमति मिल सकती है

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

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

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

कंटेनर क्वेरी और कंटेनर क्वेरी यूनिट का आकार

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

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

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 105
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 105
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 110
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 16

सोर्स

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

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

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

कलर के नए मॉडल

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

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

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 111
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 111
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 113
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 15

सोर्स

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);
}

सीएसएस की हाई डेफ़िनिशन कलर गाइड आपको नए कलर स्पेस और फ़ंक्शन के कई और उदाहरण देता है. कब इस्तेमाल करना है, इस बारे में जानकारी.

कंप्रेस करने से जुड़ी स्ट्रीम

कंप्रेशन स्ट्रीम एपीआई यह डेटा की स्ट्रीम को कंप्रेस और डीकंप्रेस करने के लिए एक JavaScript API है. ऐप्लिकेशन पहले से मौजूद इस कंप्रेस करने की सुविधा का इस्तेमाल करने के लिए, अब कंप्रेशन लाइब्रेरी को शामिल करने की ज़रूरत नहीं है.

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

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 80
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 80
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 113
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 16.4

सोर्स

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

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

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

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

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

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 69
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 79
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 105
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 16.4

सोर्स

ऑफ़स्क्रीन कैनवस—वेब वर्कर के साथ अपनी कैनवस प्रोसेस में तेज़ी लाएं के बारे में ज़्यादा जानें

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

पहले से लोड किए जाने वाले मॉड्यूल से, डाउनलोड और प्रोसेस होने में लगने वाला समय कम हो सकता है. जोड़ें 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
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 15.5

सोर्स

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

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

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

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

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 117
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 117
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 71
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 16

सोर्स

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

नंबर फ़ॉर्मैट V3

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

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

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

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 106
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 106
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 116
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 15.4

सोर्स

NumberFormat V3 के लिए प्रस्ताव इनमें से प्रत्येक नई सुविधा का विवरण दिया गया है.

फ़ुलस्क्रीन एपीआई

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

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

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 71
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 79
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 64
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 16.4

सोर्स

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

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

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

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

• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 105
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 105
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 121
• अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 15.4

सोर्स

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

इस साल बेसलाइन में शामिल हुई अन्य सुविधाएं

इस साल बेसलाइन में ये सुविधाएं भी शामिल की गई हैं:

• बनाई जा सकने वाली स्टाइलशीट
• सीएसएस में जटिल nवें-चाइल्ड सिलेक्टर
• मीडिया क्वेरी के लिए रेंज सिंटैक्स
• Maps को इंपोर्ट करें
• सीएसएस डिसप्ले के लिए एक से ज़्यादा वैल्यू
• @काउंटर-स्टाइल
• counter-set सीएसएस प्रॉपर्टी
• linear() ईज़िंग फ़ंक्शन
• ऑरिजिन प्राइवेट फ़ाइल सिस्टम (ओपीएफ़एस)
• सीएसएस नेस्टिंग, इसमें ऐसा बदलाव भी शामिल है जो आराम से पार्स करने की सुविधा को जोड़ता है.
• सीएसएस :dir() की स्यूडो-क्लास सिलेक्टर
• सीएसएस cap की लंबाई की इकाई
• सीएसएस मास्किंग
• एचटीएमएल वीडियो <source> एलिमेंट के लिए, मीडिया क्वेरी सहायता
• एचटीएमएल <search> एलिमेंट
• <iframe> एलिमेंट की लेज़ी लोडिंग (लैंडिंग (19 दिसंबर को Firefox 121 में)
• lh और rlh सीएसएस लाइन की ऊंचाई वाली इकाइयां

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