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

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

Rachel Andrew

स्टेबल ब्राउज़र रिलीज़

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

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

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

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

  • Chrome: 120.
  • एज: 120.
  • Firefox: 130.
  • Safari: 17.2.

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

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

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

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

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

सोर्स

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

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

  • Chrome: 129.
  • एज: 129.
  • Firefox: यह सुविधा काम नहीं करती.
  • Safari: समर्थित नहीं.

सोर्स

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

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

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

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

  • Chrome: 129.
  • Edge: 129.
  • Firefox: यह सुविधा काम नहीं करती.
  • सफ़ारी: 16.4.

सोर्स

WebCodecs API

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

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

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

सोर्स

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

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

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

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

सोर्स

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

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

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

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

  • Chrome: 111.
  • Edge: 111.
  • Firefox: यह सुविधा काम नहीं करती.
  • सफ़ारी: 18.

सोर्स

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

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

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

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

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

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