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

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

मई 2023 में, Firefox 113, Chrome 113, Chrome 114, और Safari 16.5 के स्टेबल वर्शन रिलीज़ हो गए. आइए, देखें कि वेब प्लैटफ़ॉर्म के लिए इसका क्या मतलब है.

WebGPU

Chrome 113 में WebGPU शामिल है. यह वेब के लिए, WebGL और WebGL 2 ग्राफ़िक्स एपीआई का नया वर्शन है. इसमें जीपीयू कंप्यूट, जीपीयू हार्डवेयर के लिए कम ओवरहेड ऐक्सेस, एक ही ग्राफ़िक्स डिवाइस से कई कैनवस को रेंडर करने की सुविधा, और बेहतर और अनुमानित परफ़ॉर्मेंस जैसी आधुनिक सुविधाएं मिलती हैं.

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

  • Chrome: 113.
  • Edge: 113.
  • Firefox Technology Preview: काम करता है.
  • Safari Technology Preview: काम करता है.

सोर्स

पहले पक्ष के सेट

पहले पक्ष के सेट (एफ़पीएस), Privacy Sandbox का हिस्सा हैं. इसकी मदद से संगठन, साइटों के बीच के संबंधों के बारे में एलान करते हैं. इससे ब्राउज़र यह तय कर सकते हैं कि किसी सेट में शामिल साइटों के लिए, तीसरे पक्ष की कुकी को सीमित तौर पर कब ऐक्सेस करने की अनुमति दी जाए. एफ़पीएस ने Chrome 113 में धीरे-धीरे रोल आउट करना शुरू किया.

सीएसएस मीडिया की सुविधाएं वगैरह

सीएसएस के लिए, Chrome 113 में overflow-inline और overflow-block मीडिया फ़ीचर शामिल हैं.

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

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 66.
  • Safari: 17.

सोर्स

साथ ही, update मीडिया की सुविधा.

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

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

सोर्स

इसमें linear() ईज़िंग फ़ंक्शन भी शामिल है. इस बारे में ज़्यादा जानने के लिए, linear() ईज़िंग फ़ंक्शन की मदद से, सीएसएस में ऐनिमेशन के जटिल कर्व बनाएं लेख पढ़ें.

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

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

सीएसएस कलर लेवल 4 की सुविधाएं

Firefox 113 में, फ़ंक्शनल नोटेशन के तौर पर color(), lab(), lch(), oklab(), oklch(), और color-mix() के साथ-साथ, फ़ोर्स-कलर-अडजस्ट प्रॉपर्टी भी शामिल है. इसका मतलब है कि नए कलर स्पेस और फ़ंक्शन, अब तीनों मुख्य इंजन के साथ काम करते हैं. इन कलर स्पेस और फ़ंक्शन के बारे में ज़्यादा जानने के लिए, हाई डेफ़िनिशन सीएसएस कलर गाइड देखें.

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

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

सोर्स

:nth-child() के विकल्पों पर ज़्यादा कंट्रोल

Firefox 113 में, सिलेक्टर की सूची को :nth-child() और nth-last-child() में पास करने की सुविधा भी जोड़ी गई है. इस बारे में ज़्यादा जानें और S सिंटैक्स की मदद से, :nth-child() से चुने गए एलिमेंट पर ज़्यादा कंट्रोल पोस्ट में दिए गए उदाहरण देखें.

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

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

Compressions Streams API

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

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

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

सोर्स

सीएसएस नेस्टिंग

Safari 16.5 में ज़्यादातर समस्याएं हल हो गई हैं. साथ ही, इसमें नए नेस्टिंग सिलेक्टर > के साथ सीएसएस नेस्टिंग की सुविधा भी जोड़ी गई है. इसका इस्तेमाल, मिलते-जुलते स्टाइल नियमों को नेस्ट करने के लिए किया जाता है. यह सुविधा, उन डेवलपर के लिए आसान होगी जिन्होंने पहले प्री-प्रोसेसर का इस्तेमाल किया है:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

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

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

सोर्स

text-wrap: balance की मदद से हेडलाइन को संतुलित करना

Chrome 114 से, text-wrap: balance का इस्तेमाल किया जा सकता है. इससे हेडलाइन को संतुलित किया जा सकता है. साथ ही, आखिरी लाइन में एक शब्द होने की समस्या से बचा जा सकता है. इससे, बेहतर और आसानी से पढ़े जा सकने वाले नतीजे मिलते हैं. इस बारे में ज़्यादा जानने के लिए, CSS text-wrap: balance लेख पढ़ें.

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

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

सोर्स

सीएचआईपीएस: कुकीज़ हैविंग इंडिपेंडेंट पार्टिशन्ड स्टेट

तीसरे पक्ष की कुकी के इस्तेमाल को बंद करने के लिए, CHIPS ने कुकी के नए एट्रिब्यूट Partitioned का इस्तेमाल करके, टॉप-लेवल साइट के हिसाब से तीसरे पक्ष की कुकी को अलग-अलग हिस्सों में बांटने की सुविधा जोड़ी है. CHIPS, Chrome 114 में उपलब्ध है.

Popover API

Chrome 114 में Popover API भी है. इससे, वेब ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) के ऊपर दिखने वाले, कुछ समय के लिए दिखने वाले यूआई एलिमेंट बनाना आसान हो जाता है.

इनमें उपयोगकर्ता के इंटरैक्टिव एलिमेंट शामिल हैं, जैसे कि ऐक्शन मेन्यू, फ़ॉर्म एलिमेंट के सुझाव, कॉन्टेंट पिकर, और टीचिंग यूज़र इंटरफ़ेस (यूआई).

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

ज़्यादा जानने के लिए, पोपओवर एपीआई के बारे में जानकारी लेख पढ़ें.

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

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 120.
  • Safari: 17.

सोर्स

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

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

Chrome 115 में, CSS display प्रॉपर्टी के लिए कई वैल्यू शामिल हैं. इसका मतलब है कि display: flex, display: block flex और display: block, display: block flow बन जाता है. एक वैल्यू को लेगसी कीवर्ड के तौर पर बनाए रखा जाता है. Chrome के स्टेबल वर्शन में शामिल होने के बाद, एक से ज़्यादा वैल्यू सभी इंजन पर उपलब्ध हो जाती हैं.

Chrome 115 में, वेब ऐनिमेशन स्पेसिफ़िकेशन के लिए ScrollTimeline और ViewTimeline एक्सटेंशन भी हैं. ये सीएसएस और JavaScript की मदद से, स्क्रोल-ड्रिवन ऐनिमेशन चालू करते हैं.

Firefox 114 में WebTransport API शामिल है. यह WebSockets का एक आधुनिक अपडेट है, जो एक से ज़्यादा स्ट्रीम, एकतरफ़ा स्ट्रीम, और ऑर्डर से बाहर डिलीवरी की सुविधा देता है.

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