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

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

स्थायी ब्राउज़र रिलीज़

मार्च 2023 में, Firefox 111, Chrome 111, और Safari 16.4 स्टेबल हो गए. आइए, देखते हैं कि वेब प्लैटफ़ॉर्म के लिए इसका क्या मतलब है.

ग्लोबल एचटीएमएल एट्रिब्यूट

Firefox 111 कुछ उपयोगी ग्लोबल एचटीएमएल एट्रिब्यूट के साथ काम करता है. autocapitalize एट्रिब्यूट की मदद से यह कंट्रोल किया जाता है कि जब उपयोगकर्ता वर्चुअल कीबोर्ड पर टाइप कर रहा होता है, तब टेक्स्ट को अपने-आप कैपिटल लेटर में बदला जा सकता है या नहीं.

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

  • 43
  • 79
  • 111
  • x

सोर्स

translate एट्रिब्यूट से यह पता चलता है कि पेज को स्थानीय भाषा में उपलब्ध कराने पर, एलिमेंट का अनुवाद किया जाना चाहिए या नहीं.

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

  • 19
  • 79
  • 111
  • 6

सोर्स

ऑरिजिन प्राइवेट फ़ाइल सिस्टम (OPFS)

File System Access API का इस्तेमाल करते समय, Firefox ऑरिजिन प्राइवेट फ़ाइल सिस्टम (OPFS) के साथ काम करता है. ओपीएफ़एस के बारे में ज़्यादा जानें.

व्यू ट्रांज़िशन एपीआई

Chrome 111 में, View ट्रांज़िशन API भी शामिल है. इससे, एक पेज वाले ऐप्लिकेशन (एसपीए) पर बेहतर ट्रांज़िशन बनाना आसान हो जाता है. इसके लिए, व्यू का स्नैपशॉट लिया जा सकता है और डीओएम को अलग-अलग स्थितियों के बीच ओवरलैप किए बिना बदलाव करना आसान हो जाता है.

Chrome 111 में एसपीए व्यू ट्रांज़िशन की लॉन्च के बाद, ज़्यादा जानकारी पाएं.

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

  • 111
  • 111
  • x
  • x

सोर्स

सीएसएस में कलर स्पेस और फ़ंक्शन के लिए नए विकल्प

साथ ही, Chrome 111 में शामिल है, वेब पर रंग का इस्तेमाल करने के तरीकों का बिलकुल नया सेट. Chrome अब उन कलर स्पेस के साथ काम करता है जो आरजीबी गैमट के बाहर के कलर को ऐक्सेस करते हैं. साथ ही, color() और color-mix() फ़ंक्शन का इस्तेमाल भी किया जा सकता है. ज़्यादा जानने के लिए, हाई डेफ़िनिशन सीएसएस की कलर गाइड और color-mix() पर ब्लॉग पोस्ट पढ़ें.

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

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

सोर्स

Chrome रिलीज़ में नया DevTools भी शामिल है, ताकि आपको रंग से जुड़ी इस नई सुविधा के साथ काम करने में मदद मिल सके.

:nth-child() आइटम के चुने जाने पर ज़्यादा कंट्रोल

Chrome 111 के ज़रिए, :nth-child() और nth-last-child() में सिलेक्टर की सूची पास की जा सकती है. इस बारे में ज़्यादा जानें. साथ ही, S सिंटैक्स के साथ :nth-child() चुनने पर ज़्यादा कंट्रोल वाली पोस्ट में मौजूद उदाहरण देखें.

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

  • 111
  • 111
  • 113
  • 9

Media Session API में पिछली और अगली स्लाइड के लिए सहायता

आखिर में, Chrome 111 से जोड़े गए डिवाइसों की इस सूची में, मीडिया सेशन एपीआई "previousslide" और "nextslide" के लिए प्रज़ेंटिंग स्लाइड से जुड़ी कार्रवाइयां की गई हैं.

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

  • 111
  • 111
  • x
  • x

Safari में बदली हुई पहचान वाली सहायता

Safari 16.4, वेब प्लैटफ़ॉर्म के लिए एक शानदार रिलीज़ है. इस लेख में सभी जोड़ी गई चीज़ें शामिल नहीं हैं, इसलिए Safari 16.4 के रिलीज़ नोट में सुविधाओं की पूरी सूची देखें.

इस रिलीज़ में काम करने वाली ऐसी कई और सीएसएस सूडो-क्लास मौजूद हैं: :user-invalid, :user-valid, :dir(), :modal, और :fullscreen.

मीडिया क्वेरी के लिए नया रेंज सिंटैक्स

यह Safari रिलीज़ तीनों इंजन में इंटरऑपरेबल मीडिया क्वेरी के लिए ज़्यादा शानदार और काम का रेंज सिंटैक्स है. इस पोस्ट में, इस सिंटैक्स के उदाहरण देखें. यह पोस्ट तब पब्लिश की जाती है, जब Chrome में सिंटैक्स भेजा जाता है.

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

  • 104
  • 104
  • 102
  • 78 जीबी में से

सोर्स

सीएसएस की प्रॉपर्टी और वैल्यू

Safari 16.4 में @property का इस्तेमाल किया जा सकता है. इससे सीधे तौर पर स्टाइलशीट में सीएसएस कस्टम प्रॉपर्टी रजिस्ट्रेशन की सुविधा चालू हो जाती है. इसके बारे में @property: सीएसएस वैरिएबल को सुपरपावर देना में ज़्यादा जानें.

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

  • 85
  • 85
  • 78 जीबी में से

सोर्स

CSS API सहायता

सीएसएस टाइप्ड ओएम के साथ, सीएसएस के लिए और भी बेहतर सुविधाएं बार-बार आ रही हैं. यह एपीआई, सीएसएस वैल्यू को स्ट्रिंग के बजाय टाइप किए गए JavaScript ऑब्जेक्ट के तौर पर दिखाता है. यह JavaScript से सीएसएस के साथ काम करना आसान बनाता है. साथ ही, यह मौजूदा तरीकों की तुलना में ज़्यादा बेहतर परफ़ॉर्म करता है.

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

  • 66
  • 79
  • x
  • 78 जीबी में से

सोर्स

CSSStyleSheet() के साथ बनाई जा सकने वाली स्टाइलशीट के लिए भी सहायता उपलब्ध है. इससे दस्तावेज़ और उसके शैडो डीओएम सबट्री के बीच स्टाइलशीट शेयर की जा सकती हैं. Safari के इस वर्शन से, बनाई जा सकने वाली स्टाइलशीट अब तीनों इंजन पर काम करती हैं.

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

  • 73
  • 79
  • 101
  • 78 जीबी में से

सोर्स

वेब पुश और बैजिंग एपीआई

Safari अब Badging API के साथ-साथ वेब पुश का भी समर्थन करता है, जो ऐप्लिकेशन डेवलपर के लिए बहुत अच्छी खबर है. खास तौर पर, इस वर्शन का मतलब है कि सभी मुख्य इंजन में पुश नोटिफ़िकेशन काम करते हैं.

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

  • 42
  • 17
  • 44
  • 16

सोर्स

मैप इंपोर्ट करें

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

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

  • 89
  • 89
  • 108
  • 78 जीबी में से

बीटा ब्राउज़र की रिलीज़

ब्राउज़र के बीटा वर्शन में आपको उन चीज़ों की झलक मिलती है जो ब्राउज़र के अगले स्टेबल वर्शन में होंगी. इस दौरान नई सुविधाओं या हटाए गए कॉन्टेंट को आज़माया जा सकता है. इससे दुनिया भर में आपकी साइट के इस्तेमाल पर असर पड़ सकता है. Firefox 112, Safari 16.5, और Chrome 112, नए बीटा वर्शन हैं. इन रिलीज़ के साथ-साथ, प्लैटफ़ॉर्म को कई बेहतरीन सुविधाएं भी मिलती हैं. पूरी जानकारी के लिए प्रॉडक्ट की जानकारी देखें. यहां कुछ हाइलाइट दी गई हैं.

Firefox 112 में inert एट्रिब्यूट की सुविधा जोड़ दी गई है. इससे यह उपयोगी एट्रिब्यूट सभी इंजन के लिए उपलब्ध हो जाएगा. इनर्ट के बारे में ज़्यादा जानने के लिए, पेश है इनर्ट पेज पर जाएं. Firefox linear() ईज़िंग फ़ंक्शन के लिए सहायता भी चालू करेगा.

Chrome 112 और Safari 16.5, दोनों में CSS Nesting की सुविधा काम करती है. इस सुविधा के बारे में कई डेवलपर को उम्मीद है.

Chrome 112 में animation-composition का इस्तेमाल भी किया जा सकता है. ऐनिमेशन कंपोज़िशन के साथ एक से ज़्यादा ऐनिमेशन इफ़ेक्ट बनाने का तरीका बताएं में जानें कि यह प्रॉपर्टी कैसे काम करती है.

अगर Chrome के बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले मोड का इस्तेमाल किया जाता है, जैसे कि Puppeteer के साथ, तो 112 में बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला नया मोड आ जाता है. इसके बारे में जानने के लिए, Chrome के हेडलेस मोड को अपग्रेड किया जा सकता है.

यह वेब सीरीज़ में नई सुविधा का हिस्सा है