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

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

स्थायी ब्राउज़र रिलीज़

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

light-dark() की मदद से कलर स्कीम अपनाएं

light-dark() कलर फ़ंक्शन, Chrome 123 में उपलब्ध है. इससे उपयोगकर्ता की पसंद के हिसाब से, कलर स्कीम में आसानी से बदलाव किया जा सकता है. यहां दिए गए उदाहरण में, root को color-scheme को light dark पर सेट किया गया है. कस्टम प्रॉपर्टी, रंगों को सेट करने के लिए light-dark() रंग फ़ंक्शन का इस्तेमाल करती हैं. इन रंगों को उपयोगकर्ता की हल्के या गहरे रंग वाले मोड की सेटिंग के हिसाब से बदला जाता है.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

सीएसएस के color-scheme- डिपेंडेंट कलर light-dark() सेक्शन में, ज़्यादा उदाहरण और जानकारी देखें

field-sizing की मदद से, इनपुट का बेहतर कंट्रोल

साथ ही, Chrome 123 में field-sizing प्रॉपर्टी, अपने-आप बढ़ने वाले टेक्स्ट इनपुट फ़ील्ड को चालू करती है.

text-spacing-trim के साथ CJK विराम चिह्न के लिए कर्निंग

Chrome 123 में, text-spacing-trim प्रॉपर्टी ज़्यादा स्पेस को कम या ज़्यादा करने के लिए चाइनीज़, जैपनीज़, और कोरियन (सीजेके) विराम चिह्नों पर कर्निंग लागू करती है. ज़्यादा जानकारी के लिए, पेश है सीएसएस के लिए चार नई अंतरराष्ट्रीय सुविधाएं.

@scope सीएसएस का नियम

Safari 17.4 में @scope आपको खास डीओएम सबट्री में एलिमेंट चुनने की सुविधा देता है. साथ ही, एलिमेंट को टारगेट करने के लिए, उन सिलेक्टर को लिखे बिना ही सटीक तौर पर टारगेट किया जा सकता है जिन्हें ओवरराइड करना मुश्किल हो और जो आपके सिलेक्टर को डीओएम स्ट्रक्चर से बहुत अच्छे से जोड़े बिना.

ज़्यादा जानकारी के लिए, सीएसएस @scope के नियम की मदद से अपने सिलेक्टर की पहुंच को सीमित करें

पिक्चर में पिक्चर की सुविधा में सुधार

Chrome 123 में पिक्चर में पिक्चर की सुविधा को बेहतर बनाने के लिए दो सुविधाएं शामिल हैं. पहला विकल्प, सीएसएस picture-in-picture डिसप्ले मोड है. इससे आपको सीएसएस के ऐसे खास नियम लिखने की सुविधा मिलती है जो सिर्फ़ तब लागू होते हैं, जब वेब ऐप्लिकेशन को पिक्चर में पिक्चर मोड में दिखाया जा रहा हो.

दूसरी सुविधा की मदद से, दस्तावेज़ की पिक्चर में पिक्चर विंडो से opener.focus का इस्तेमाल किया जा सकता है. इससे सिस्टम-लेवल के फ़ोकस को उस टैब पर लाया जा सकता है जिसके पास दस्तावेज़ 'पिक्चर में पिक्चर' विंडो का मालिकाना हक है.

इससे, ज़रूरत पड़ने पर ओरिजनल टैब को फ़ोरग्राउंड में लाया जा सकता है. उदाहरण के लिए, जब उपयोगकर्ता को यूज़र इंटरफ़ेस (यूआई) इस्तेमाल करने की ज़रूरत होती है, जो छोटी पिक्चर में पिक्चर विंडो में फ़िट नहीं होता.

ब्लॉक और टेबल लेआउट में align-content के साथ काम करता है

Chrome 123 और Safari 17.4 में ब्लॉक और टेबल लेआउट में align-content काम करता है. align-content में किए गए बदलाव के बारे में पढ़ें.

सर्विस वर्कर स्टैटिक रूटिंग एपीआई

Chrome 123 में, Service Worker Static Routing API उपलब्ध है. इस एपीआई की मदद से, एलान के साथ यह बताया जा सकता है कि कुछ रिसॉर्स पाथ को कैसे फ़ेच किया जाए. इसका मतलब है कि ब्राउज़र को सिर्फ़ कैश मेमोरी या सीधे नेटवर्क से रिस्पॉन्स फ़ेच करने के लिए, सर्विस वर्कर चलाने की ज़रूरत नहीं है.

ज़्यादा जानकारी के लिए, सर्विस वर्कर को खास पाथ में बने सर्विस वर्कर को बायपास करने के लिए स्टैटिक रूटिंग एपीआई का इस्तेमाल करें.

लंबे ऐनिमेशन फ़्रेम एपीआई

Chrome 123 में लॉन्ग ऐनिमेशन फ़्रेम एपीआई भी शामिल है. यह लंबे टास्क एपीआई को अपडेट किया गया है, ताकि धीमे यूज़र इंटरफ़ेस (यूआई) अपडेट को बेहतर तरीके से समझा जा सके. यह ऐसे धीमे ऐनिमेशन फ़्रेम की पहचान करने में काम का हो सकता है जिनसे इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) की वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक पर असर पड़ सकता है. यह मेट्रिक, रिस्पॉन्स को मेज़र करती है. इसके अलावा, इससे एक जैसे यूआई के जैंक की पहचान की जा सकती है.

content-visibility प्रॉपर्टी

Firefox 124 में सीएसएस content-visibility प्रॉपर्टी का इस्तेमाल किया जा सकता है. इस प्रॉपर्टी की मदद से यह कंट्रोल किया जाता है कि कोई एलिमेंट अपने कॉन्टेंट को रेंडर करता है या नहीं. इस प्रॉपर्टी की मदद से, ब्राउज़र तब तक कॉन्टेंट को रेंडर नहीं करते हैं, जब तक कि उसकी ज़रूरत न हो.

ArrayBuffer और अरे ग्रुपिंग में बदलाव

Safari 17.4 में JavaScript को कुछ नई सुविधाएं मिलती हैं, जो detached प्रॉपर्टी और ArrayBuffer के transfer() और transferToFixedLength() तरीकों के साथ काम करती हैं.

Safari 17.4 में अरे ग्रुप बनाने के तरीके Object.groupBy और Map.groupBy भी शामिल होते हैं. अरे ग्रुप बनाने के बारे में ज़्यादा जानने के लिए, JavaScript को अरे ग्रुप करने के तरीके मिल रहे हैं लेख पढ़ें.

ये सुविधाएं अब अन्य सुविधाओं के साथ काम कर सकती हैं. इसलिए, ये अब 'बेसलाइन' के नए रूप में उपलब्ध हैं.

setHTMLUnsafe और parseHTMLUnsafe

Safari 17.4 में शिपिंग के लिए setHTMLUnsafe और parseHTMLUnsafe तरीके, JavaScript से एलान वाले शैडो DOM को इस्तेमाल करने की अनुमति देते हैं. ये तरीके, innerHTML या DOMParser की तुलना में, एचटीएमएल को DOM में ज़रूरी रूप से पार्स करने का आसान तरीका भी उपलब्ध कराते हैं.

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

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

Firefox 125 एक रोमांचक रिलीज़ होने के लिए तैयार हो रहा है. इसमें ब्लॉक पर align-content शामिल है, जो इस सुविधा को इंटरऑपरेबल करता है. पॉपओवर एपीआई को ही शामिल कर लिया गया है. इसलिए, यह बेसलाइन न्यूली उपलब्ध का हिस्सा बन गया है. transition-behavior प्रॉपर्टी का इस्तेमाल भी किया जा सकता है. पॉपओवर और transition-behavior, Interop 2024 का हिस्सा हैं.

Chrome 124 में setHTMLUnsafe और parseHTMLUnsafe वाले तरीके शामिल हैं, ताकि डिक्लेरेटिव शैडो डीओएम को JavaScript से इस्तेमाल किया जा सके. इससे ये सुविधाएं आपस में काम कर पाती हैं. इसमें WebSocketStream API और writingsuggestions एट्रिब्यूट भी शामिल है.