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

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

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 शामिल है. यह इंटरऑप 2024 के लिए एक फ़ोकस एरिया भी है. यह प्रॉपर्टी उन स्थितियों में काम आती है जहां फ़ॉन्ट फ़ॉलबैक हो सकता है, क्योंकि इसकी मदद से, फ़ॉलबैक फ़ॉन्ट के साइज़ को पहली पसंद के फ़ॉन्ट से मैच किया जा सकता है.

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

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

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

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

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

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

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

@property नियम

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

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

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

@property नियम अब 'नए रूप में उपलब्ध बेसलाइन' का हिस्सा है, इसमें ज़्यादा पढ़ें @property: अब यूनिवर्सल ब्राउज़र सपोर्ट के साथ, अगली पीढ़ी के सीएसएस वैरिएबल.

ArrayBuffer का साइज़ बदला जा सकता है और SharedArrayBuffer को बढ़ाया जा सकता है

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

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

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

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

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

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

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

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