मार्च में वेब प्लैटफ़ॉर्म पर नई सुविधाएं

मार्च 2022 में, स्टेबल और बीटा वर्शन के वेब ब्राउज़र में इस्तेमाल की गई कुछ दिलचस्प सुविधाओं के बारे में जानें.

मार्च में, Chrome 99, Chrome 100, Firefox 98, और Safari 15.4 के स्टेबल वर्शन रिलीज़ किए गए. इससे प्लैटफ़ॉर्म पर कई नई सुविधाएं जोड़ी गईं. इनमें से कई सुविधाएं, तीनों ब्राउज़र इंजन में उपलब्ध हैं. इस पोस्ट में मैंने उन अतिरिक्त चीज़ों पर ध्यान दिया है जो हमें दूसरे प्लैटफ़ॉर्म पर काम करने की क्षमता देती हैं, लेकिन हर इंजन में जोड़ी गई सभी सुविधाओं को देखने के लिए रिलीज़ नोट ज़रूर देखें.

Chrome 99 और Safari 15.4 में कैस्केड लेयर शामिल हैं. @layer at-rule, कैस्केड लेयर तय करता है. इससे, आपको खास जानकारी को कंट्रोल करने में मदद मिलती है. ये फ़ायरफ़ॉक्स के साथ काम करते हैं. इसलिए, कैस्केड लेयर अब तीनों ब्राउज़र इंजन में उपलब्ध है. आपके ब्राउज़र में कैस्केड लेयर की सुविधा आ रही है लेख में, कैस्केड लेयर के बारे में ज़्यादा जानें.

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

  • Chrome: 99.
  • एज: 99.
  • Firefox: 97.
  • Safari: 15.4.

सोर्स

Chrome 100 में, सीएसएस mix-blend-mode प्रॉपर्टी के लिए plus-lighter की नई वैल्यू शामिल है. यह वैल्यू तब काम आती है, जब दो एलिमेंट को क्रॉस-फ़ेड करना हो. ऐसा तब होता है, जब पिक्सल के सभी या सबसेट की वैल्यू एक जैसी हो. फ़िलहाल, किसी भी दो डीओएम एलिमेंट को क्रॉस-फ़ेड करना नामुमकिन है में, इस समस्या के बारे में ज़्यादा जानने के लिए पढ़ें.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 100.
  • Edge: 100.
  • Firefox: 99.
  • सफ़ारी: 9.1.

Safari 15.4 में contain प्रॉपर्टी शामिल है, जिससे सीएसएस कंटेनमेंट की सुविधा मिलती है.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 52.
  • Edge: 79.
  • Firefox: 69.
  • Safari: 15.4.

सोर्स

Safari 15.4 में accent-color भी है. इससे, फ़ॉर्म के कुछ कंट्रोल पर इस्तेमाल किए जाने वाले ऐक्सेंट कलर को कंट्रोल किया जा सकता है.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 93.
  • Edge: 93.
  • Firefox: 92.
  • Safari: 15.4.

सोर्स

Firefox 98 और Safari 15.4 ने <dialog> एलिमेंट लैंड किया है, जो एक डायलॉग बॉक्स दिखाता है.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 37.
  • Edge: 79.
  • Firefox: 98.
  • Safari: 15.4.

सोर्स

Safari 15.4 ने भी :focus-visible pseudo-class के साथ काम किया. इस सुविधा को लागू करने का काम Igalia ने किया था.

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

  • Chrome: 86.
  • एज: 86.
  • Firefox: 85.
  • Safari: 15.4.

सोर्स

ब्राउज़र के बीटा वर्शन की रिलीज़

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

मार्च में, Chrome 101 और Firefox 99 के नए बीटा वर्शन रिलीज़ किए गए थे.

Chrome 101 बीटा में hwb कलर नोटेशन शामिल है. इससे रंग के ह्यू, सफ़ेदपन, और कालेपन के बारे में पता चलता है. रंग के अन्य नोटेशन की तरह ही, वैकल्पिक अल्फा कॉम्पोनेंट से ओपैसिटी का पता चलता है.

h1 {
 
color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

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

  • Chrome: 101.
  • Edge: 101.
  • Firefox: 96.
  • Safari: 15.

सोर्स

Firefox 99 में नेविगेटर इंटरफ़ेस की pdfViewerEnabled प्रॉपर्टी शामिल है. इस प्रॉपर्टी से पता चलता है कि ब्राउज़र, PDF फ़ाइलों को इनलाइन डिसप्ले के साथ दिखाता है या नहीं.

if (!navigator.pdfViewerEnabled) {
 
// The browser does not support inline viewing of PDF files.
}

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 99.
  • Safari: 16.4.

सोर्स

ये बीटा सुविधाएं, जल्द ही स्टेबल ब्राउज़र में उपलब्ध होंगी.

यह वेब सीरीज़ के नए वर्शन का हिस्सा है