सितंबर में वेब प्लैटफ़ॉर्म पर पहली बार आए हैं

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

सितंबर 2024 में, Firefox 130, Safari 18, और Chrome 129 के वर्शन रिलीज़ किए गए. इस पोस्ट में, वेब प्लैटफ़ॉर्म में जोड़ी गई नई सुविधाओं के बारे में बताया गया है.

<details> के लिए name एट्रिब्यूट वाले एक्सक्लूज़िव ऐकॉर्डियन

Firefox 130, <details> एलिमेंट के name एट्रिब्यूट के साथ काम करता है. इससे <details> एलिमेंट ग्रुप में बंट जाते हैं. एक बार में, किसी ग्रुप में मौजूद सिर्फ़ एक एलिमेंट खोला जा सकता है. इसकी मदद से, JavaScript का इस्तेमाल किए बिना एक खास अकॉर्डियन बनाया जा सकता है.

Browser Support

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

ऐनिमेशन को अपने-आप चलने की सुविधा (और अन्य)

Chrome 129 में CSS interpolate-size प्रॉपर्टी और calc-size() फ़ंक्शन जोड़ा गया है.

सीएसएस interpolate-size प्रॉपर्टी की मदद से, किसी पेज को auto, min-content, और fit-content जैसे सीएसएस इंट्रिन्सिक साइज़िंग कीवर्ड के ऐनिमेशन और ट्रांज़िशन के लिए ऑप्ट-इन किया जा सकता है. हालांकि, ऐसा सिर्फ़ तब किया जा सकता है, जब उन कीवर्ड के लिए ऐनिमेशन उपलब्ध हो.

Browser Support

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

Source

सीएसएस calc-size() फ़ंक्शन, calc() जैसा ही एक सीएसएस फ़ंक्शन है. हालांकि, यह साइज़ करने वाले सिर्फ़ एक कीवर्ड पर काम करता है. साइज़िंग कीवर्ड के तौर पर auto, min-content, max-content, और fit-content का इस्तेमाल किया जा सकता है.

Browser Support

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

Source

ज़्यादा जानने के लिए, सीएसएस में, ऊंचाई: ऑटो; (और साइज़ तय करने वाले अन्य इंट्रिन्सिक कीवर्ड) पर जाएं.

JavaScript में अवधि को फ़ॉर्मैट करना

Chrome 129 में Intl.DurationFormat भी है. यह अवधि को फ़ॉर्मैट करने का तरीका उपलब्ध कराता है. उदाहरण के लिए, "1 घंटा 40 मिनट 30 सेकंड". यह कई भाषाओं में काम करता है.

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox Technology Preview: supported.
  • Safari: 16.4.

Source

WebCodecs API

Web Codecs API अब Firefox 130 में डेस्कटॉप पर काम करता है. इससे वेब डेवलपर, वीडियो स्ट्रीम के अलग-अलग फ़्रेम और ऑडियो के हिस्सों को कम लेवल पर ऐक्सेस कर सकते हैं. नए इंटरफ़ेस में ये शामिल हैं: VideoEncoder, VideoDecoder, EncodedVideoChunk, VideoFrame, और VideoColorSpace. इस एपीआई की वजह से, Baseline Newly पूरी तरह से उपलब्ध नहीं हो पाता, क्योंकि यह फ़िलहाल Firefox Android में काम नहीं करता. हालांकि, Android के लिए Firefox Nightly में यह काम करता है.

Browser Support

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 130.
  • Safari: 16.4.

Source

कस्टम प्रॉपर्टी के लिए सीएसएस स्टाइल क्वेरी

Safari 18 में कई नई सुविधाएं जोड़ी गई हैं. इनमें सीएसएस स्टाइल क्वेरी भी शामिल हैं. स्टाइल क्वेरी की मदद से, बार-बार इस्तेमाल की जा सकने वाली स्टाइल बनाई जा सकती हैं और उन्हें ग्रुप के तौर पर लागू किया जा सकता है. उदाहरण के लिए, जब आपके पास कई वैरिएंट वाला ऐसा कॉम्पोनेंट हो जिसे फिर से इस्तेमाल किया जा सकता है.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

सीएसएस स्टाइल क्वेरी के बारे में ज़्यादा जानें.

दस्तावेज़ के एक ही व्यू के ट्रांज़िशन

Safari 18, एसपीए के लिए एक ही दस्तावेज़ व्यू ट्रांज़िशन की सुविधा भी देता है. इससे, आपको ऐप्लिकेशन के अलग-अलग स्टेटस के बीच विज़ुअल ट्रांज़िशन बनाने में मदद मिलती है.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

एक ही दस्तावेज़ के व्यू के ट्रांज़िशन के बारे में ज़्यादा जानें

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

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

Firefox 131 में नए JavaScript iterator helpers शामिल हैं और अब कुकीज़ हैविंग इंडिपेंडेंट पार्टिशन स्टेट (सीएचआईपीएस) चालू है.

Chrome 130 में, इनलाइन फ़्रैगमेंटेशन (लाइन लेआउट) और ब्लॉक फ़्रैगमेंटेशन (प्रिंटिंग और मल्टीकोल के लिए बनाए गए फ़्रैगमेंट), दोनों के लिए box-decoration-break: clone का इस्तेमाल किया जा सकता है. IndexedDB में गड़बड़ी की रिपोर्टिंग भी बेहतर हुई है. साथ ही, वेब सीरियल SerialPort इंटरफ़ेस के लिए एक नया connected एट्रिब्यूट भी जोड़ा गया है.

Safari 18.1 में, मौजूदा सुविधाओं से जुड़ी गड़बड़ियों को ठीक किया गया है.