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

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

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

WebGPU

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

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

  • Chrome: 113.
  • Edge: 113.
  • Firefox तकनीकी पूर्वावलोकन: समर्थित.
  • Safari तकनीकी पूर्वावलोकन: समर्थित.

सोर्स

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

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

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

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

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

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 66.
  • सफ़ारी: 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() फ़ंक्शनल नोटेशन के साथ-साथ, force-color-adjust प्रॉपर्टी भी शामिल है. इसका मतलब है कि नए कलर स्पेस और फ़ंक्शन, अब तीनों मुख्य इंजन में काम करते हैं. इन कलर स्पेस और फ़ंक्शन के बारे में ज़्यादा जानने के लिए, हाई डेफ़िनिशन सीएसएस कलर गाइड देखें.

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

  • 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.
  • सफ़ारी: 9.

कंप्रेशन स्ट्रीम एपीआई

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 का इस्तेमाल किया जा सकता है. इससे हेडलाइन को संतुलित किया जा सकता है. साथ ही, आखिरी लाइन में एक शब्द होने की समस्या से बचा जा सकता है. इससे, बेहतर और आसानी से पढ़े जा सकने वाले नतीजे मिलते हैं. ज़्यादा जानकारी के लिए, सीएसएस टेक्स्ट-रैप: बैलेंस पर जाएं.

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

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • सफ़ारी: 17.4.

सोर्स

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

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

Popover API

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

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

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

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

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

  • 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 का एक आधुनिक अपडेट है, जो एक से ज़्यादा स्ट्रीम, एकतरफ़ा स्ट्रीम, और ऑर्डर से बाहर डिलीवरी की सुविधा देता है.

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