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

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

Rachel Andrew

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

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

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

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

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

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

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

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

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

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

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

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

iframe में व्यू ट्रांज़िशन एपीआई के साथ काम करना

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

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

कीबोर्ड के फ़ोकस करने लायक स्क्रोल कंटेनर

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

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

@property नियम

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

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

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

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

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

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

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

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

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 के स्टेबल वर्शन के रिलीज़ होने के बाद, ये प्रॉपर्टी, 'हाल ही में उपलब्ध हुई बेसलाइन प्रॉपर्टी' का हिस्सा बन जाएंगी.