यहां आपके जानने योग्य तथ्य दिए गए हैं:
- परफ़ॉर्मेंस को बेहतर बनाने के लिए, लंबे टास्क में yield का इस्तेमाल किया जा सकता है.
- ओरिजनल साइज़ वाले एलिमेंट ऐनिमेट करें.
- ऐंकर पोज़िशनिंग सिंटैक्स में कुछ बदलाव किए गए हैं.
- इसके अलावा, और भी बहुत कुछ है.
मेरा नाम पीट लेपेज है. आइए, जानें कि Chrome 129 में डेवलपर के लिए क्या नया है.
scheduler.yield() की मदद से, लंबे टास्क को छोटे-छोटे टास्क में बांटना
लंबे टास्क की वजह से, ब्राउज़र को उपयोगकर्ता के इनपुट का जवाब देने में देरी होती है. इससे यह लगता है कि साइट धीमी है. साथ ही, आईएनपी जैसी ज़रूरी परफ़ॉर्मेंस मेट्रिक पर भी असर पड़ता है. scheduler.yield() का इस्तेमाल करके, लंबे टास्क को छोटे-छोटे हिस्सों में बांटा जा सकता है. इससे मुख्य थ्रेड पर वापस भेजकर, रिस्पॉन्सिवनेस को बेहतर बनाया जा सकता है.
इससे आपको ब्राउज़र को यह जानकारी देने की सुविधा मिलती है:
"अरे! मुझे यह काम करने में थोड़ा समय लग सकता है. अगर आपको कोई फ़्रेम पेंट करना है, उपयोगकर्ता के इनपुट का जवाब देना है या अन्य ज़रूरी काम करने हैं, तो कोई बात नहीं, मैं इंतज़ार कर सकता हूँ"
अपने JavaScript कोड में बार-बार नीचे दी गई लाइन जोड़ें, ताकि ब्राउज़र को एक से दूसरी जगह पर जाने से रोका जा सके. साथ ही, INP की समस्याओं से बचें.
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 कर दिया गया है. इससे आपको यह याद रखने में मदद मिलती है कि ये सिर्फ़ प्राइमरी पोज़िशन के लिए फ़ॉलबैक हैं. प्राइमरी पोज़िशन, बेस स्टाइल से तय होती है.
आखिर में, position-try से inset-area() फ़ंक्शनल सिंटैक्स को हटाया जा रहा है. इसलिए, 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"
Web जीपीयू कैनवस, अब एचडीआर इमेज के लिए, पूरी रेंज का इस्तेमाल कर सकता है.
साथ ही, कुछ सुविधाओं को बंद किया जा रहा है और कुछ को हटाया जा रहा है. इनसे कुछ डेवलपर पर असर पड़ सकता है.
इसके बारे में और पढ़ें
इसमें सिर्फ़ कुछ खास हाइलाइट के बारे में बताया गया है. Chrome 129 में किए गए अन्य बदलावों के बारे में जानने के लिए, यहां दिए गए लिंक देखें.
- Chrome DevTools (129) में नया क्या है
- Chrome 129 के लिए ChromeStatus.com से जुड़े अपडेट
- Chromium सोर्स रिपॉज़िटरी में हुए बदलावों की सूची
- Chrome के रिलीज़ कैलेंडर
सदस्यता लें
अप-टू-डेट रहने के लिए, Chrome डेवलपर के YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.
अब मैं पीट लेपेज हूं और हम Chrome 130 के रिलीज़ होते ही, आपको Chrome की नई सुविधाओं के बारे में बताएंगे!