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

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

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

मई में, Chrome 102, Safari 15.5, Firefox 100, और Firefox 101 के स्टेबल वर्शन उपलब्ध हो गए.

Chrome 102 और Safari 15.5 में inert एट्रिब्यूट शामिल है. अगर कोई एलिमेंट इंटरैक्टिव नहीं है, तो इस एट्रिब्यूट का इस्तेमाल करने पर, उसे टैब ऑर्डर और ऐक्सेसिबिलिटी ट्री से हटा दिया जाता है. उदाहरण के लिए, ऐसा एलिमेंट जो फ़िलहाल स्क्रीन पर नहीं दिख रहा है या छिपा हुआ है.

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Source

Chrome 102 में, HTML hidden एट्रिब्यूट के लिए नई वैल्यू until-found शामिल है. इससे, पेज पर मौजूद टेक्स्ट में ढूंढने और टेक्स्ट फ़्रैगमेंट पर स्क्रोल करने की सुविधा चालू हो जाती है. यह सुविधा, पेज के उस हिस्से में मौजूद टेक्स्ट के लिए भी काम करती है जिसे छोटा किया गया है. जैसे, अकॉर्डियन पैटर्न में मौजूद टेक्स्ट. ज़्यादा जानकारी के लिए, hidden=until-found का इस्तेमाल करके, छोटे किए गए कॉन्टेंट को ऐक्सेस करना पोस्ट पढ़ें.

Chrome 102 में Navigation API उपलब्ध है. यह एक ऐसा एपीआई है जो सिंगल-पेज ऐप्लिकेशन में क्लाइंट-साइड राउटिंग को स्टैंडर्ड बनाता है. इस एपीआई का नाम पहले App History API था.

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: not supported.
  • Safari: not supported.

Source

Firefox 101 में कंस्ट्रक्टेबल स्टाइलशीट का इस्तेमाल किया जा सकता है. इसमें CSSStyleSheet() कंस्ट्रक्टर, replace(), और replaceSync() तरीके शामिल हैं. कंस्ट्रक्ट की जा सकने वाली स्टाइलशीट की मदद से, शैडो DOM के साथ इस्तेमाल करने के लिए स्टाइलशीट आसानी से बनाई जा सकती हैं. यहां दिए गए उदाहरण में, CSSStyleSheet() कंस्ट्रक्टर का इस्तेमाल करके एक स्टाइलशीट बनाई गई है. साथ ही, replaceSync() तरीके से एक सीएसएस नियम जोड़ा गया है. इसके बाद, नतीजे के तौर पर मिले नियम को कंसोल में प्रिंट किया गया है.

const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('body { color: red; }');
console.log(stylesheet.rules[0].cssText);

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 101.
  • Safari: 16.4.

Source

Firefox 101 में prefers-contrast मीडिया फ़ीचर भी है. इससे यह सुविधा अलग-अलग ब्राउज़र पर उपलब्ध हो जाती है.

Browser Support

  • Chrome: 96.
  • Edge: 96.
  • Firefox: 101.
  • Safari: 14.1.

Source

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

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

अप्रैल में, Chrome 103 और Firefox 102 के नए बीटा वर्शन उपलब्ध कराए गए थे.

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

none
कॉन्टेंट रेंडर होने के बाद, उसे अपडेट नहीं किया जा सकता. उदाहरण के लिए, प्रिंट किया गया कोई दस्तावेज़.
slow
डिवाइस, कॉन्टेंट को अपडेट कर सकता है. हालांकि, यह इतना धीरे होता है कि ऐनिमेशन को आसानी से नहीं दिखाया जा सकता. उदाहरण के लिए, ई-इंक स्क्रीन.
fast
कॉन्टेंट को डाइनैमिक तरीके से बदला जा सकता है. साथ ही, ऐनिमेशन रेंडर करने के लिए, इसे तेज़ी से बदला जा सकता है. उदाहरण के लिए, कंप्यूटर या फ़ोन की स्क्रीन.

Browser Support

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

Source

Chrome 103 में Local Font Access API शामिल है. इससे उपयोगकर्ता के डिवाइस में इंस्टॉल किए गए फ़ॉन्ट को ऐक्सेस किया जा सकता है.

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

बदलाव: इस पोस्ट के पिछले वर्शन में, Element.isVisible() तरीके का ज़िक्र किया गया था. हालांकि, यह तरीका इस रिलीज़ में शामिल नहीं है.

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