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

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

Rachel Andrew

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

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

light-dark() की मदद से कलर स्कीम में बदलाव करना

Chrome 123 में light-dark() रंग फ़ंक्शन जोड़ा गया है. इससे, उपयोगकर्ता की पसंद के हिसाब से रंग स्कीम को आसानी से अडजस्ट किया जा सकता है. नीचे दिए गए उदाहरण में, color-scheme को root पर 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);
}

ज़्यादा उदाहरण और जानकारी के लिए, light-dark() के साथ सीएसएस color-scheme पर निर्भर रंग लेख पढ़ें

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • सफ़ारी: 17.5.

सोर्स

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

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

ब्राउज़र सहायता

  • Chrome: 123.
  • Edge: 123.
  • Firefox: यह सुविधा काम नहीं करती.
  • Safari: यह सुविधा काम नहीं करती.

सोर्स

text-spacing-trim के साथ CJK विराम चिह्न के लिए इस्तेमाल किया जा रहा है

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 123.
  • Edge: 123.
  • Firefox: यह सुविधा काम नहीं करती.
  • Safari: समर्थित नहीं.

सोर्स

नियम के हिसाब से, @scope सीएसएस

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 118.
  • एज: 118.
  • Firefox: किसी झंडे के पीछे.
  • Safari: 17.4.

सोर्स

'पिक्चर में पिक्चर' मोड में किए गए सुधार

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

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

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

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

Chrome 123 और Safari 17.4 में, align-content इन ब्लॉक और टेबल लेआउट के लिए सहायता शामिल है. align-content के लिए सहायता में हुए बदलावों के बारे में पढ़ें.

Service Worker Static Routing API

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

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

Long Animation Frames API

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

ब्राउज़र सहायता

  • Chrome: 123.
  • Edge: 123.
  • Firefox: यह सुविधा काम नहीं करती.
  • Safari: यह सुविधा काम नहीं करती.

सोर्स

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 85.
  • एज: 85.
  • Firefox: 125.
  • Safari: 18.

सोर्स

ArrayBuffer और ऐरे ग्रुपिंग में जोड़े गए फ़ंक्शन

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 122.
  • Safari: 17.4.

सोर्स

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 117.
  • एज: 117.
  • Firefox: 119.
  • सफ़ारी: 17.4.

सोर्स

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

setHTMLUnsafe और parseHTMLUnsafe

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

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

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

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

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