अगस्त में वेब प्लैटफ़ॉर्म पर नया है

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

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

Ruby फ़ॉर्मैटिंग में किए गए अपडेट

एचटीएमएल <ruby> एलिमेंट, टेक्स्ट को बेहतर तरीके से दिखाने के लिए एक बेहतरीन टूल है. खास तौर पर, यह पूर्वी एशियाई भाषाओं के लिए ज़्यादा कारगर है. इस एलिमेंट की मदद से, बेस टेक्स्ट के ऊपर या बगल में फ़ोनिएटिक एनोटेशन या अन्य ज़्यादा जानकारी दिखाई जा सकती है. Chrome 128 में, रूबी एनोटेशन को लाइन में बांटा जा सकता है. साथ ही, ruby-align सीएसएस प्रॉपर्टी की मदद से, रूबी टेक्स्ट को स्टाइल किया जा सकता है.

ज़्यादा जानने के लिए, लाइन-ब्रेक करने वाली <ruby> और सीएसएस ruby-align प्रॉपर्टी देखें.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 38.
  • Safari: 18.2.

Source

PointerEvent.deviceProperties एक से ज़्यादा पेन से इनकिंग करने के लिए

Chrome 128 में किया गया यह बदलाव, स्क्रीन से इंटरैक्ट करने वाले अलग-अलग पेन (पॉइंटर) की पहचान करने का एक सुरक्षित और भरोसेमंद तरीका उपलब्ध कराता है. इससे, डिजिटाइज़र से इंटरैक्ट करने वाले हर डिवाइस के लिए, खास रंग या पेन के आकार सेट किए जा सकते हैं. यह PointerEvent इंटरफ़ेस को बड़ा करके, नया एट्रिब्यूट deviceProperties शामिल करता है. इसमें uniqueId एट्रिब्यूट होता है, जो सेशन के दौरान बना रहता है. यह दस्तावेज़ से अलग होता है और एक यूनीक आइडेंटिफ़ायर होता है. इसका इस्तेमाल, पेज के साथ इंटरैक्ट करने वाले अलग-अलग पेन की पहचान करने के लिए किया जा सकता है.

Promise.try

Chrome 128 में, Promise.try की मदद से Promises की गड़बड़ियों को आसानी से मैनेज किया जा सकता है. आपके पास एक पैटर्न है, जिसमें एक फ़ंक्शन, f है. यह फ़ंक्शन असाइन होने में समय ले सकता है और कोई प्रॉमिस दिखा सकता है या नहीं. दोनों मामलों में गड़बड़ियों को मैनेज करने के लिए, Promise के सेमेंटेक्स का इस्तेमाल किया जा सकता है. इसके लिए, फ़ंक्शन को Promise में रैप करें. आम तौर पर, यह new Promise(resolve => resolve(f())) की मदद से किया जाता है.

Promise.try का इस्तेमाल करके, यह काम आसानी से किया जा सकता है. इसकी मदद से, एक ऐसी प्रॉमिस चेन शुरू की जा सकती है जो सिंक्रोनस और एसिंक्रोनस, दोनों तरह के अपवाद फ़्लो को हैंडल करने के बजाय, .catch हैंडलर में सभी गड़बड़ियों को पकड़ती है.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 134.
  • Safari: 18.2.

Source

एंट्री इफ़ेक्ट ऐनिमेट करना

Firefox 129 में, एंट्री इफ़ेक्ट को ऐनिमेट करने के लिए इस्तेमाल की जाने वाली दो सीएसएस सुविधाएं शामिल हैं. ये सुविधाएं अब बेसलाइन के तौर पर उपलब्ध हैं.

@starting-style नियम, किसी एलिमेंट को पेज पर रेंडर करने से पहले, उस पर शुरुआती स्टाइल तय करता है. यह उन एलिमेंट के लिए ज़रूरी है जो display: none से ऐनिमेट होते हैं, क्योंकि उन्हें ऐनिमेशन के लिए किसी स्टेटस की ज़रूरत होती है.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

एंट्री इफ़ेक्ट के लिए, अलग-अलग प्रॉपर्टी के ऐनिमेशन की भी ज़रूरत होती है. ये ऐसी प्रॉपर्टी होती हैं जिनकी वैल्यू के बीच इंटरपोलेशन नहीं किया जा सकता. अब ट्रांज़िशन शॉर्टहैंड में transition-behavior: allow-discrete या allow-discrete वैल्यू का इस्तेमाल करके, यह किया जा सकता है. यह सुविधा अब Firefox 129 में भी काम करती है.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

ज़्यादा जानने के लिए, अब बेसलाइन में: एंट्री इफ़ेक्ट को ऐनिमेट करना लेख पढ़ें.

PerformanceResourceTiming में जोड़े गए आइटम

Firefox 129 में, PerformanceResourceTiming इंटरफ़ेस की contentType और responseStatus प्रॉपर्टी जोड़ी गई हैं. इनसे, फ़ेच किए गए रिसॉर्स के कॉन्टेंट टाइप और रिसॉर्स को फ़ेच करते समय मिले एचटीटीपी रिस्पॉन्स स्टेटस कोड के बारे में पता चलता है.

contentType

Browser Support

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

Source

responseStatus

Browser Support

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

Source

जियोलोकेशन की जानकारी इकट्ठा करने के toJSON() तरीके

Firefox 129 में भी GeolocationCoordinates.toJSON() और GeolocationPosition.toJSON() है.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 129.
  • Safari: 18.

Source

WebDriver BiDi

Firefox 129 में अब WebDriver BiDi की सुविधा काम करती है. इसका मतलब है कि ऑटोमेशन के लिए, Chrome या Firefox में से किसी एक के साथ Puppeteer का इस्तेमाल किया जा सकता है. ज़्यादा जानने के लिए, Firefox, Chrome, और Puppeteer में WebDriver BiDi का प्रोडक्शन वर्शन उपलब्ध है और Firefox के लिए Puppeteer के आधिकारिक वर्शन के उपलब्ध होने की सूचना लेख पढ़ें.

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

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

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

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

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

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

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