यहां आपके जानने योग्य तथ्य दिए गए हैं:
- परफ़ॉर्मेंस को बेहतर बनाने के लिए, लंबे टास्क में yield का इस्तेमाल किया जा सकता है.
- इंटिग्रल साइज़ वाले एलिमेंट को ऐनिमेट करें.
- ऐंकर पोज़िशनिंग सिंटैक्स में कुछ बदलाव किए गए हैं.
- इसके अलावा, और भी बहुत कुछ है.
मेरा नाम पीट लेपेज है. आइए, जानें कि Chrome 129 में डेवलपर के लिए क्या नया है.
scheduler.yield()
की मदद से, लंबे टास्क को छोटे-छोटे हिस्सों में बांटना
लंबे टास्क की वजह से, ब्राउज़र को उपयोगकर्ता के इनपुट का जवाब देने में देरी होती है. इससे यह लगता है कि साइट धीमी है. साथ ही, आईएनपी जैसी ज़रूरी परफ़ॉर्मेंस मेट्रिक पर भी असर पड़ता है. scheduler.yield()
का इस्तेमाल करके, लंबे टास्क को छोटे हिस्सों में बांटा जा सकता है. इससे मुख्य थ्रेड पर वापस भेजकर, रिस्पॉन्सिवनेस को बेहतर बनाया जा सकता है.
इससे ब्राउज़र को यह बताया जा सकता है:
"अरे! मुझे जो काम करना है उसमें कुछ समय लग सकता है. अगर आपको कोई फ़्रेम पेंट करना है, उपयोगकर्ता के इनपुट का जवाब देना है या कोई दूसरा ज़रूरी काम करना है, तो कोई बात नहीं, मैं इंतज़ार कर सकता/सकती हूं"
ब्राउज़र को कुछ समय देने और INP से जुड़ी समस्याओं से बचने के लिए, अपने JavaScript कोड में यह लाइन बार-बार जोड़ें.
await scheduler.yield();
सबसे अहम बात यह है कि इससे आपके कोड को प्राथमिकता दी जा सकती है, ताकि आप 'वीयल्ड' का इस्तेमाल करके कोई नुकसान न उठाएं. हमारा सुझाव है कि किसी बड़े काम के बीच फ़ंक्शन में scheduler.yield()
का ज़्यादा से ज़्यादा इस्तेमाल करें.
ज़्यादा जानकारी के लिए, लंबे टास्क ऑप्टिमाइज़ करना लेख पढ़ें.
डिफ़ॉल्ट साइज़ वाले ऐनिमेशन
सीएसएस ऐनिमेशन बहुत अच्छे होते हैं, लेकिन आम तौर पर इनके लिए साइज़ की जानकारी ज़रूरी होती है. auto
, min-content
या fit-content
जैसे साइज़ तय करने वाले कीवर्ड का इस्तेमाल नहीं किया जा सकता.
सीएसएस प्रॉपर्टी interpolate-size
, ऐनिमेशन का एक नया सेट खोलती है. यह सेट, साइज़ तय करने के लिए इंट्रिन्सिक कीवर्ड का इस्तेमाल करने पर नहीं मिलता.
interpolate-size
के बिना, नीचे दिए गए वीडियो में बटनों का कोई ट्रांज़िशन नहीं होता.
interpolate-size: allow-keywords
जोड़ने के बाद, वीडियो में मौजूद बटन पर एक खूबसूरत ट्रांज़िशन ऐनिमेशन इफ़ेक्ट दिखता है.
root
एलिमेंट पर interpolate-size: allow-keywords
तय करने से, पूरे पेज के लिए नया व्यवहार सेट हो जाता है. हमारा सुझाव है कि जब भी आपके पास कोई ऐसा विकल्प हो जो आपके डिवाइस के साथ काम करता हो, तब उसे इस्तेमाल करें.
:root {
interpolate-size: allow-keywords;
}
.item {
height: auto;
@starting-style {
height: 0;
}
}
बेहतर कंट्रोल के लिए, सीएसएस calc-size()
फ़ंक्शन, calc()
की तरह ही काम करता है. यह फ़ंक्शन, साइज़ तय करने के लिए इस्तेमाल किए जा सकने वाले किसी एक इंट्रिन्सिक कीवर्ड पर भी काम करता है. लेआउट का हिसाब लगाते समय, size
कीवर्ड का आकलन calc-size-basis
के ओरिजनल साइज़ के हिसाब से किया जाता है.
nav a {
width: 80px;
overflow-x: clip;
transition: width 0.35s ease;
&:hover {
width: calc-size(auto, size);
}
}
पूरी जानकारी के लिए, सीएसएस में, हाइट: ऑटो; (और साइज़ तय करने वाले अन्य इंट्रिन्सिक कीवर्ड) देखें.
सीएसएस ऐंकर की पोज़िशनिंग में बदलाव
सीएसएस ऐंकर पोज़िशनिंग की सुविधा, Chrome 125 में लॉन्च की गई थी. हालांकि, सीएसएस वर्किंग ग्रुप में कुछ और चर्चा के बाद, स्पेसिफ़िकेशन और लागू करने के तरीके में कुछ बदलाव किए गए हैं. अगर सीएसएस ऐंकर पोज़िशन का इस्तेमाल पहले से किया जा रहा है, तो आपको अपना कोड जल्द से जल्द अपडेट करना होगा.
पहला, inset-area
का नाम बदलकर position-area
कर दिया गया है. इसे प्राथमिकता दी गई, क्योंकि position-
फ़्रेज़िंग से आपको यह याद रखने में मदद मिलती है कि यह प्रॉपर्टी, पोज़िशन किए गए एलिमेंट पर लागू होती है, न कि ऐंकर एलिमेंट पर.
दूसरा, position-try-options
का नाम बदलकर position-try-fallbacks
कर दिया गया है. इससे आपको यह याद रखने में मदद मिलती है कि ये सिर्फ़ प्राइमरी पोज़िशन के लिए फ़ॉलबैक हैं. प्राइमरी पोज़िशन, बेस स्टाइल से तय होती है.
आखिर में, inset-area()
फ़ंक्शनल सिंटैक्स को position-try
से हटाया जा रहा है. इसलिए, position-try-fallbacks: inset-area(top)
के बजाय position-try-fallbacks: top
का इस्तेमाल करें.
और भी कई सुविधाएं!
इसके अलावा, और भी बहुत कुछ है.
अवधि को फ़ॉर्मैट करने के लिए, Intl
एक नया तरीका है. इसमें कई भाषाओं का इस्तेमाल किया जा सकता है.
const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"
वेब जीपीयू कैनवस, अब एचडीआर इमेज के लिए डिसप्ले की पूरी रेंज का इस्तेमाल कर सकता है.
साथ ही, कुछ सुविधाओं को बंद किया जा रहा है और कुछ को हटाया जा रहा है. इनसे कुछ डेवलपर पर असर पड़ सकता है.
इसके बारे में और पढ़ें
इसमें सिर्फ़ कुछ खास हाइलाइट शामिल हैं. Chrome 129 में किए गए अन्य बदलावों के बारे में जानने के लिए, यहां दिए गए लिंक देखें.
- Chrome DevTools (129) में नया क्या है
- Chrome 129 के लिए ChromeStatus.com से जुड़े अपडेट
- Chromium सोर्स रिपॉज़िटरी में हुए बदलावों की सूची
- Chrome के रिलीज़ कैलेंडर की जानकारी
सदस्यता लें
अप-टू-डेट रहने के लिए, Chrome डेवलपर के YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.
मैं पीट लेपेज, एड्रियाना की जगह यहां मौजूद हूं. Chrome 130 रिलीज़ होने के बाद, हम आपको बताएंगे कि Chrome में नया क्या है!