Chrome 137 में नया क्या है

Rachel Andrew

पब्लिश होने की तारीख: 27 मई, 2025

Chrome 137 को अब रोल आउट किया जा रहा है. इस पोस्ट में, इस रिलीज़ की कुछ मुख्य सुविधाओं के बारे में बताया गया है. Chrome 137 के रिलीज़ नोट पढ़ें.

इस रिलीज़ की मुख्य बातें:

जटिल लेआउट में टैब का लॉजिकल क्रम तय करने के लिए, reading-flow और reading-order का इस्तेमाल करें. CSS if() फ़ंक्शन, शर्त के साथ वैल्यू दिखाने का एक आसान तरीका है. JavaScript Promise Integration (JSPI) की मदद से, WebAssembly ऐप्लिकेशन को JavaScript प्रॉमिस के साथ इंटिग्रेट किया जा सकता है.

सीएसएस reading-flow और reading-order

reading-flow सीएसएस प्रॉपर्टी, फ़्लेक्स, ग्रिड या ब्लॉक लेआउट में मौजूद एलिमेंट के क्रम को कंट्रोल करती है. इससे यह तय होता है कि एलिमेंट, ऐक्सेसिबिलिटी टूल को किस क्रम में दिखेंगे. साथ ही, यह भी तय होता है कि लीनियर सीक्वेंशियल नेविगेशन के तरीकों का इस्तेमाल करके, एलिमेंट पर फ़ोकस कैसे किया जाएगा. इससे ग्रिड और फ़्लेक्स लेआउट की एक पुरानी समस्या हल हो जाती है. इस समस्या में, टैब का क्रम, आइटम के लेआउट के क्रम से अलग हो जाता है.

यह एक कीवर्ड वैल्यू लेता है. इसकी डिफ़ॉल्ट वैल्यू normal होती है. इससे, DOM के क्रम में एलिमेंट को क्रम से लगाने का तरीका बना रहता है. इसे फ़्लेक्स कंटेनर में इस्तेमाल करने के लिए, इसकी वैल्यू को flex-visual या flex-flow पर सेट करें. इसे ग्रिड कंटेनर में इस्तेमाल करने के लिए, इसकी वैल्यू को grid-rows, grid-columns या grid-order पर सेट करें.

reading-order सीएसएस प्रॉपर्टी की मदद से, रीडिंग फ़्लो कंटेनर में मौजूद आइटम के क्रम को मैन्युअल तरीके से बदला जा सकता है. इस प्रॉपर्टी का इस्तेमाल ग्रिड, फ़्लेक्स या ब्लॉक कंटेनर में करने के लिए, कंटेनर पर reading-flow की वैल्यू को source-order पर सेट करें. साथ ही, हर आइटम के reading-order को पूर्णांक वैल्यू पर सेट करें.

ज़्यादा जानने के लिए, लॉजिकल सीक्वेंशियल फ़ोकस नेविगेशन के लिए सीएसएस reading-flow का इस्तेमाल करना लेख पढ़ें.

सीएसएस if() फ़ंक्शन

CSS if() फ़ंक्शन, शर्त के साथ वैल्यू तय करने का आसान तरीका उपलब्ध कराता है. यह सेमीकोलन से अलग किए गए, शर्त और वैल्यू के जोड़े की सीरीज़ स्वीकार करता है. यह फ़ंक्शन, हर शर्त का क्रम से आकलन करता है और पहली सही शर्त से जुड़ी वैल्यू दिखाता है. अगर कोई भी शर्त सही नहीं होती है, तो फ़ंक्शन एक खाली टोकन स्ट्रीम दिखाता है.

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark {
  --color: black;
}

.light {
  --color: white;
}

<div class="dark">dark</div>
<div class="light">light</div>

WebAssembly JavaScript Promise Integration (JSPI)

JavaScript Promise Integration (JSPI) एक ऐसा एपीआई है जिसकी मदद से WebAssembly ऐप्लिकेशन, JavaScript प्रॉमिस के साथ इंटिग्रेट किए जा सकते हैं.

इससे WebAssembly प्रोग्राम को प्रॉमिस जनरेट करने की सुविधा मिलती है. साथ ही, इससे WebAssembly प्रोग्राम को प्रॉमिस वाले एपीआई के साथ इंटरैक्ट करने की सुविधा मिलती है.

खास तौर पर, जब कोई ऐप्लिकेशन, प्रॉमिस-बेयरिंग (JavaScript) एपीआई को कॉल करने के लिए JSPI का इस्तेमाल करता है, तो WebAssembly कोड को निलंबित कर दिया जाता है. साथ ही, WebAssembly प्रोग्राम को कॉल करने वाले ओरिजनल कॉलर को एक प्रॉमिस दिया जाता है. यह प्रॉमिस तब पूरा होगा, जब WebAssembly प्रोग्राम आखिर में पूरा हो जाएगा.

और भी कई सुविधाएं!

इसके अलावा, और भी कई तरीके हैं:

  • स्टोरेज पार्टीशनिंग को जारी रखते हुए, Chrome ने स्टोरेज कुंजी के हिसाब से BLOB यूआरएल के ऐक्सेस को पार्टीशन करने की सुविधा लागू की है.
  • अब कैनवस फ़्लोटिंग पॉइंट पिक्सल फ़ॉर्मैट लागू कर दिए गए हैं.
  • offset-path: shape() का इस्तेमाल किया जा सकता है. इसलिए, ऐनिमेशन का पाथ सेट करने के लिए, रिस्पॉन्सिव शेप का इस्तेमाल किया जा सकता है.

इस बारे में और पढ़ें

इसमें सिर्फ़ कुछ मुख्य हाइलाइट शामिल हैं. Chrome 137 में हुए अन्य बदलावों के बारे में जानने के लिए, यहां दिए गए लिंक पर जाएं.

सदस्यता लें

अप-टू-डेट रहने के लिए, Chrome Developers YouTube चैनल को सब्सक्राइब करें. इससे आपको नया वीडियो लॉन्च होने पर ईमेल से सूचना मिलेगी. इसके अलावा, नए लेख और ब्लॉग पोस्ट पाने के लिए, हमें X या LinkedIn पर फ़ॉलो करें.

Chrome 138 के रिलीज़ होते ही, हम आपको Chrome में उपलब्ध नई सुविधाओं के बारे में जानकारी देंगे!