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

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

Rachel Andrew

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

जून में, Chrome 103 और Firefox 102 के स्टेबल वर्शन रिलीज़ हो गए.

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

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

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

  • Chrome: 67.
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1.

सोर्स

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

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

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 102.
  • Safari: यह सुविधा काम नहीं करती.

सोर्स

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

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

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

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

सोर्स

एचटीटीपी का नया स्टेटस कोड—103, जल्दी मिलने वाले संकेत

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

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

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

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

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

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

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

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

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

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

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

सोर्स

Region Capture API

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

Safari 16 में कई मुख्य सुविधाएं जोड़ी गई हैं

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

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

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

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

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

सोर्स

ग्रिड लेआउट के लिए, ग्रिड ट्रैक को ऐनिमेट करने की सुविधा भी है.

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

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

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

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

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 101.
  • Safari: 16.

सोर्स

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

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

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