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

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

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

सीएसएस में रंग के लिए रिलेटिव सिंटैक्स

Firefox 128 में सीएसएस रिलेटिव कलर सिंटैक्स शामिल है. इसकी मदद से, किसी ऑरिजिन कलर के हिसाब से कलर बनाया जा सकता है. नीचे दी गई सीएसएस, hsl() का इस्तेमाल करके रंग indigo को आधा कर देती है.

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Browser Support

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 128.
  • Safari: 18.

सीएसएस के रिलेटिव कलर सिंटैक्स वाली ब्लॉग पोस्ट में, आपको और भी कई उदाहरण मिल सकते हैं. रिलेटिव कलर सिंटैक्स, इंटरऑपरेबिलिटी 2024 के फ़ोकस एरिया में से एक है. इसलिए, इस अपडेट से Firefox के स्टेबल वर्शन का स्कोर बेहतर बनाने में मदद मिलती है.

content प्रॉपर्टी के लिए वैकल्पिक टेक्स्ट

Firefox 128, सीएसएस content प्रॉपर्टी के लिए वैकल्पिक टेक्स्ट के साथ काम करता है. ऐसा तब होता है, जब उसमें कोई इमेज शामिल हो. ऑल्ट टेक्स्ट, सुलभता ट्री में दिखता है. इसका मतलब है कि content के लिए, अब सभी ब्राउज़र पर वैकल्पिक टेक्स्ट का इस्तेमाल किया जा सकता है.

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 128.
  • Safari: 17.4.

Chrome 127 में किए गए अपडेट से यह पक्का होता है कि Chrome, सिर्फ़ एक स्ट्रिंग के बजाय, अपनी पसंद के मुताबिक किसी भी संख्या में एलिमेंट स्वीकार करता है. उदाहरण के लिए, attr() फ़ंक्शन का इस्तेमाल करने की सुविधा चालू होती है.

font-size-adjust प्रॉपर्टी

Chrome 127 में font-size-adjust शामिल है. यह Interop 2024 का फ़ोकस एरिया भी है. यह प्रॉपर्टी उन स्थितियों में काम आती है जहां फ़ॉन्ट फ़ॉलबैक हो सकता है. ऐसा इसलिए, क्योंकि इससे फ़ॉलबैक फ़ॉन्ट के साइज़ को पहली पसंद के फ़ॉन्ट के साइज़ से मैच करने में मदद मिलती है.

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

Chrome के इस रिलीज़ के साथ, font-size-adjust प्रॉपर्टी नए वर्शन में उपलब्ध बेसलाइन का हिस्सा बन जाती है.

iframe में View Transition API के साथ काम करना

Chrome में, एक ही दस्तावेज़ के व्यू के 127 ट्रांज़िशन एक साथ किए जा सकेंगे. ये ट्रांज़िशन, मुख्य फ़्रेम और एक ही ऑरिजिन वाले iframe में किए जा सकेंगे.

पहले, अगर मेन फ़्रेम में एक ही ऑरिजिन वाले iframe में document.startViewTransition का इस्तेमाल करके व्यू ट्रांज़िशन चलाया जाता था, तो यह काम नहीं करता था. iframe का ट्रांज़िशन अपने-आप स्किप हो जाएगा. अब, दोनों ट्रांज़िशन लागू हो जाएंगे.

कीबोर्ड की मदद से, स्क्रोल किए जा सकने वाले कंटेनर

Chrome 127 से, स्क्रोलर पर डिफ़ॉल्ट रूप से क्लिक करके और प्रोग्राम के हिसाब से भी फ़ोकस किया जा सकता है. जिन स्क्रोलर के लिए फ़ोकस वाले एलिमेंट शामिल नहीं हैं उन्हें डिफ़ॉल्ट रूप से कीबोर्ड से फ़ोकस किया जा सकता है.

इस बदलाव के बारे में ज़्यादा जानने के लिए, ऐसे स्क्रोलर जिन पर कीबोर्ड से फ़ोकस किया जा सकता है पोस्ट पढ़ें.

@property नियम

Firefox 128 में @property नियम और उससे जुड़े JavaScript एपीआई के लिए सहायता शामिल है. इसका मतलब है कि आपके पास ऐसी सीएसएस कस्टम प्रॉपर्टी बनाने का विकल्प है जो सिंटैक्स, इनहेरिटेंस, और शुरुआती वैल्यू तय करती हैं.

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

इस उदाहरण में, कस्टम प्रॉपर्टी को सिर्फ़ <color> वैल्यू स्वीकार करने के लिए तय किया गया है, ताकि उसे इनहेरिट न किया जा सके और उसकी शुरुआती वैल्यू hotpink हो.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

@property नियम अब बेसलाइन के नए वर्शन का हिस्सा है. ज़्यादा जानने के लिए, @property: अब सभी ब्राउज़र पर काम करने वाले अगली पीढ़ी के सीएसएस वैरिएबल लेख पढ़ें.

साइज़ बदलने की सुविधा वाला ArrayBuffer और बड़ा किया जा सकने वाला SharedArrayBuffer

Firefox 128 में अब साइज़ बदलने की सुविधा वाले ArrayBuffer और साइज़ बढ़ाने की सुविधा वाले SharedArrayBuffer का इस्तेमाल किया जा सकता है. इससे, नया बफ़र असाइन किए बिना और उसमें डेटा कॉपी किए बिना, बफ़र का साइज़ बदला जा सकता है. ये प्रॉपर्टी, 'बेसलाइन के तौर पर हाल ही में उपलब्ध' कैटगरी में भी शामिल हो जाती हैं.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 128.
  • Safari: 16.4.

Source

फ़्लेक्सबॉक्स प्रॉपर्टी में safe कीवर्ड

Safari 17.6 में, मौजूदा सुविधाओं से जुड़ी गड़बड़ियों को ठीक किया गया है. हालांकि, इसमें फ़्लेक्सबॉक्स अलाइनमेंट प्रॉपर्टी के लिए safe कीवर्ड भी शामिल है. इससे safe कीवर्ड, सभी ब्राउज़र पर काम करता है.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 63.
  • Safari: 17.6.

safe कीवर्ड, चुने गए अलाइनमेंट की वजह से कॉन्टेंट को दिखने वाले हिस्से के बाहर दिखने से रोकता है. यहां दिए गए CodePen में दिखाया गया है कि यह सेंटर में अलाइन किए गए आइटम के साथ कैसे काम करता है. अगर center अलाइनमेंट की वजह से डेटा मिट जाता है, तो इसके बजाय start का इस्तेमाल किया जाता है.

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

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

Chrome 128 में सीएसएस ruby-align प्रॉपर्टी शामिल है. साथ ही, display: ruby वाले एलिमेंट में लाइन ब्रेक की सुविधा देने के लिए बदलाव किए गए हैं. स्पेसिफ़िकेशन के मुताबिक, zoom प्रॉपर्टी को भी अपडेट किया गया है. AudioContext एपीआई में एक अपडेट किया गया है. इसमें AudiContext.onerror को असाइन किया गया कॉलबैक जोड़ा गया है. यह कॉलबैक, AudioContext बनाने और रेंडर करने से जुड़ी गड़बड़ियों की जानकारी देता है.

Firefox 129 में @starting-style नियम और transition-behavior प्रॉपर्टी शामिल है. Firefox 129 के स्टेबल वर्शन के रिलीज़ होने के बाद, ये प्रॉपर्टी, 'हाल ही में उपलब्ध हुई नई बेसलाइन' का हिस्सा बन जाएंगी.