जून में वेब प्लैटफ़ॉर्म पर नई सुविधाएं जोड़ी गई हैं

कुछ दिलचस्प सुविधाओं के बारे में जानें, जो जून 2022 में, स्टेबल और बीटा वर्शन वाले वेब ब्राउज़र पर मिली हैं.

Rachel Andrew

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

जून में, Chrome 103 और Firefox 102 स्टेबल हो गए.

स्ट्रीम और आसानी से पढ़ी जा सकने वाली बाइट स्ट्रीम बदलें

Firefox 102 में स्ट्रीम को बदलने की सुविधा शामिल है. यह डेटा के अलग-अलग हिस्सों पर ट्रांसफ़ॉर्मेशन को लागू करते हुए, ReadableStream से WritableStream में पाइपिंग करने की सुविधा चालू करता है. हमें खुशी है कि यह सुविधा तीनों इंजन पर उपलब्ध हो गई है. इसलिए, स्ट्रीम के बारे में जानने का यह समय बहुत अच्छा है.

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

  • 67
  • 79
  • 102
  • 78 जीबी में से

सोर्स

रीडेबल बाइट स्ट्रीम, अब Firefox 102 में भी काम करती हैं. इससे, ReadableStreamBYOBReader इंटरफ़ेस के साथ BYOB (अपना बफ़र लाएं) रीडर को चालू किया जा सकता है. इसका इस्तेमाल, डेवलपर से मिले डेटा को स्ट्रीम करने के लिए किया जा सकता है.

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

  • 89
  • 89
  • 102
  • x

सोर्स

डिवाइस पर इंस्टॉल किए गए फ़ॉन्ट ऐक्सेस करें

Chrome 103 में Local Font Access API शामिल है, जो उपयोगकर्ता के डिवाइस पर इंस्टॉल किए गए फ़ॉन्ट को ऐक्सेस करने की अनुमति देता है. डिवाइस पर इंस्टॉल किए गए फ़ॉन्ट का ऐक्सेस पाने का अनुरोध करने के बाद, window.queryLocalFonts() को कॉल करें और इंस्टॉल किए गए फ़ॉन्ट का कलेक्शन पाएं.

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

update मीडिया की सुविधा

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

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

  • 113
  • 113
  • 102
  • 17

सोर्स

नया एचटीटीपी स्टेटस कोड—103 शुरुआती संकेत

Chrome 103 में एक नया स्टेटस कोड एचटीटीपी 103 अर्ली हिंट जोड़ा गया है. अगर सर्वर या सीडीएन को पता है कि किसी पेज को लोड करने के लिए सबरिसॉर्स के कुछ सेट की ज़रूरत है, तो यह ब्राउज़र को ऑरिजिन से पहले से कनेक्ट करने या रिसॉर्स को उस पेज पर पहले से लोड करने की सलाह दे सकता है जिस पेज पर उन्हें रीडायरेक्ट करने की ज़रूरत होती है. इस सुविधा का फ़ायदा पाने के लिए, इसके लिए आपको अपने सर्वर या सीडीएन को अपडेट करना होगा. अर्ली हिंट के बारे में ज़्यादा जानें.

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

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

अप्रैल में, Chrome 104, Firefox 103, और Safari 16 जैसे नए बीटा वर्शन शामिल किए गए.

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

Chrome 104 में रेंज मीडिया क्वेरी के लिए नया सिंटैक्स शामिल है. यह सिंटैक्स, मीडिया क्वेरी लेवल 4 के स्पेसिफ़िकेशन में दिया गया है. उदाहरण के लिए, पहले इस तरह लिखी गई मीडिया क्वेरी:

@media (min-width: 400px) { … }

अब इस तरह से लिखा जा सकता है:

@media (width >= 400px) { … }

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

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

सोर्स

क्षेत्र कैप्चर एपीआई

डेस्कटॉप पर मौजूद Chrome 104 में region कैप्चर API भी शामिल है. इससे, कैप्चर किए गए वीडियो को शेयर करने से पहले, उसमें मौजूद कॉन्टेंट को काटने और हटाने की सुविधा चालू हो जाती है.

Safari 16 में ब्राउज़र की कई अहम सुविधाएं मिलती हैं

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

कई डेवलपर के साथ-साथ, कंटेनर क्वेरी के लिए साइज़ क्वेरी की सुविधा को देखकर मुझे बहुत खुशी हो रही है. यह सुविधा, फ़िलहाल Chrome में फ़्लैग के पीछे है.

Safari 16 में, grid-template-columns और grid-template-rows के लिए subgrid वैल्यू का इस्तेमाल किया जा सकता है. यह सुविधा पहले से ही Firefox में मौजूद है और Chrome में इस पर काम कर रही है. यह नेस्ट किए गए ग्रिड से, ग्रिड ट्रैक का साइज़ बदलने की सुविधा देती है.

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

  • 117
  • 117
  • 71
  • 16

सोर्स

साथ ही, ग्रिड लेआउट में, ग्रिड ट्रैक को ऐनिमेट किया जा सकता है.

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

  • 107
  • 107
  • 66
  • 16

showPicker() वाला तरीका, ब्राउज़र पिकर को तारीख, समय, रंग, और फ़ाइलों के हिसाब से दिखाने के कैननिकल तरीके को चालू करने में मदद करता है. इस बारे में ज़्यादा जानने के लिए, तारीख, समय, रंग, और फ़ाइलों के लिए ब्राउज़र पिकर दिखाएं पर जाएं.

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

  • 99
  • 99
  • 101
  • 16

सोर्स

display: contents की सुलभता से जुड़ी समस्याओं पर भी ध्यान दिया गया है. ऐसा इसलिए किया गया है, ताकि सुलभता ट्री से एलिमेंट हटाए जाने के खतरे के बिना, काम की इस सुविधा का इस्तेमाल सुरक्षित तरीके से किया जा सके.

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

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