जुलाई 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
सीएसएस के रिलेटिव कलर सिंटैक्स वाली ब्लॉग पोस्ट में, आपको और भी कई उदाहरण मिल सकते हैं. रिलेटिव कलर सिंटैक्स, इंटरऑपरेबिलिटी 2024 के फ़ोकस एरिया में से एक है. इसलिए, इस अपडेट से Firefox के स्टेबल वर्शन का स्कोर बेहतर बनाने में मदद मिलती है.
content
प्रॉपर्टी के लिए वैकल्पिक टेक्स्ट
Firefox 128, सीएसएस content
प्रॉपर्टी के लिए वैकल्पिक टेक्स्ट के साथ काम करता है. ऐसा तब होता है, जब उसमें कोई इमेज शामिल हो. ऑल्ट टेक्स्ट, सुलभता ट्री में दिखता है.
इसका मतलब है कि content
के लिए, अब सभी ब्राउज़र पर वैकल्पिक टेक्स्ट का इस्तेमाल किया जा सकता है.
Browser Support
Chrome 127 में किए गए अपडेट से यह पक्का होता है कि Chrome, सिर्फ़ एक स्ट्रिंग के बजाय, अपनी पसंद के मुताबिक किसी भी संख्या में एलिमेंट स्वीकार करता है. उदाहरण के लिए, attr()
फ़ंक्शन का इस्तेमाल करने की सुविधा चालू होती है.
font-size-adjust
प्रॉपर्टी
Chrome 127 में font-size-adjust
शामिल है. यह Interop 2024 का फ़ोकस एरिया भी है.
यह प्रॉपर्टी उन स्थितियों में काम आती है जहां फ़ॉन्ट फ़ॉलबैक हो सकता है. ऐसा इसलिए, क्योंकि इससे फ़ॉलबैक फ़ॉन्ट के साइज़ को पहली पसंद के फ़ॉन्ट के साइज़ से मैच करने में मदद मिलती है.
Chrome के इस रिलीज़ के साथ, font-size-adjust
प्रॉपर्टी नए वर्शन में उपलब्ध बेसलाइन का हिस्सा बन जाती है.
iframe में View Transition API के साथ काम करना
Chrome में, एक ही दस्तावेज़ के व्यू के 127 ट्रांज़िशन एक साथ किए जा सकेंगे. ये ट्रांज़िशन, मुख्य फ़्रेम और एक ही ऑरिजिन वाले iframe में किए जा सकेंगे.
पहले, अगर मेन फ़्रेम में एक ही ऑरिजिन वाले 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
कीवर्ड, सभी ब्राउज़र पर काम करता है.
Browser Support
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 के स्टेबल वर्शन के रिलीज़ होने के बाद, ये प्रॉपर्टी, 'हाल ही में उपलब्ध हुई नई बेसलाइन' का हिस्सा बन जाएंगी.