ResizeObserversकी सहायता से, आपको इस बात की सूचना मिलेगी कि किसी एलिमेंट के कॉन्टेंट रेक्टैंगल का साइज़ बदल गया है.- मॉड्यूल अब import.meta की मदद से, होस्ट के खास मेटाडेटा को ऐक्सेस कर सकते हैं.
- पॉप-अप ब्लॉकर बेहतर तरीके से काम करता है.
window.alert()अब फ़ोकस नहीं बदलता.
इसके अलावा, और भी बहुत कुछ है!
मेरा नाम पीट लेपेज है. आइए, जानें कि Chrome 64 में डेवलपर के लिए क्या नया है!
क्या आपको बदलावों की पूरी सूची चाहिए? Chromium सोर्स रिपॉज़िटरी में हुए बदलावों की सूची देखें.
ResizeObserver
किसी एलिमेंट के साइज़ में बदलाव होने पर उसे ट्रैक करना थोड़ा मुश्किल हो सकता है. ज़्यादातर मामलों में, आपको दस्तावेज़ के resize इवेंट में एक लिस्नर अटैच करना होगा. इसके बाद, getBoundingClientRect या getComputedStyle को कॉल करना होगा. हालांकि, इन दोनों वजहों से लेआउट थ्रैशिंग हो सकती है.
अगर ब्राउज़र विंडो का साइज़ नहीं बदला, लेकिन दस्तावेज़ में कोई नया एलिमेंट जोड़ा गया, तो क्या होगा? या आपने किसी एलिमेंट में display: none जोड़ा है? इन दोनों की मदद से, पेज में मौजूद दूसरे ऐलिमेंट का साइज़ बदला जा सकता है.
ResizeObserver, किसी एलिमेंट के साइज़ में बदलाव होने पर आपको सूचना देता है. साथ ही, एलिमेंट की नई ऊंचाई और चौड़ाई दिखाता है. इससे लेआउट थ्रैशिंग का जोखिम कम हो जाता है.
अन्य ऑब्ज़र्वर की तरह, इसका इस्तेमाल करना बहुत आसान है. इसके लिए, ResizeObserver
ऑब्जेक्ट बनाएं और कंस्ट्रक्टर को कॉलबैक पास करें. कॉलबैक को ResizeOberverEntries का एक कलेक्शन दिया जाएगा. इसमें हर निगरानी किए गए एलिमेंट के लिए एक एंट्री होगी. इसमें एलिमेंट के नए डाइमेंशन शामिल होंगे.
const ro = new ResizeObserver( entries => {
for (const entry of entries) {
const cr = entry.contentRect;
console.log('Element:', entry.target);
console.log(`Element size: ${cr.width}px × ${cr.height}px`);
console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
}
});
// Observe one or multiple elements
ro.observe(someElement);
ज़्यादा जानकारी और असल दुनिया के उदाहरणों के लिए, ResizeObserver: यह Elements के लिए document.onresize जैसा है देखें.
बेहतर पॉप-अप ब्लॉकर
मुझे टैब-अंडर पसंद नहीं है. जब कोई पेज किसी डेस्टिनेशन पर पॉप-अप खोलता है और उस पेज पर ले जाता है, तो उसे रीडायरेक्ट कहा जाता है. आम तौर पर, इनमें से एक विज्ञापन या ऐसा कुछ होता है जो आपको नहीं चाहिए.
Chrome 64 से, इस तरह के नेविगेशन ब्लॉक कर दिए जाएंगे. साथ ही, Chrome उपयोगकर्ता को कुछ नेटिव यूज़र इंटरफ़ेस (यूआई) दिखाएगा. इससे, उपयोगकर्ता अपनी मर्ज़ी के मुताबिक रीडायरेक्ट पर जा सकेगा.
import.meta
JavaScript मॉड्यूल लिखते समय, अक्सर आपको मौजूदा मॉड्यूल के बारे में होस्ट के हिसाब से मेटाडेटा का ऐक्सेस चाहिए होता है. Chrome 64 अब मॉड्यूल में import.meta
प्रॉपर्टी के साथ काम करता है. साथ ही, मॉड्यूल के यूआरएल को import.meta.url के तौर पर दिखाता है.
यह तब काफ़ी मददगार होता है, जब आपको मौजूदा एचटीएमएल दस्तावेज़ के बजाय, मॉड्यूल फ़ाइल से जुड़े संसाधनों को हल करना हो.
और भी कई सुविधाएं!
डेवलपर के लिए, Chrome 64 में ये सिर्फ़ कुछ बदलाव हैं. इसमें और भी कई बदलाव हैं.
- Chrome अब रेगुलर एक्सप्रेशन में, नेम कैप्चर और यूनिकोड प्रॉपर्टी के एस्केप के साथ काम करता है.
<audio>और<video>एलिमेंट के लिए,preloadकी डिफ़ॉल्ट वैल्यू अबmetadataहै. इससे Chrome, अन्य ब्राउज़र के बराबर हो जाता है. साथ ही, सिर्फ़ मेटाडेटा लोड करके, मीडिया को लोड करने से बचने में मदद मिलती है. इससे बैंडविड्थ और रिसॉर्स के इस्तेमाल में भी कमी आती है.- अब
Request.prototype.cacheका इस्तेमाल करके,Requestका कैश मेमोरी मोड देखा जा सकता है. साथ ही, यह भी पता लगाया जा सकता है कि कोई अनुरोध, रीलोड करने का अनुरोध है या नहीं. - Focus Management API का इस्तेमाल करके, अब
preventScrollएट्रिब्यूट की मदद से, किसी एलिमेंट पर स्क्रोल किए बिना फ़ोकस किया जा सकता है.
window.alert()
ओह, और एक और बात! हालांकि, यह "डेवलपर सुविधा" नहीं है, लेकिन मुझे इससे खुशी हो रही है. window.alert() अब बैकग्राउंड टैब को फ़ोरग्राउंड पर नहीं लाता! इसके बजाय, जब उपयोगकर्ता उस टैब पर वापस स्विच करेगा, तब अलर्ट दिखेगा.
अब टैब अपने-आप नहीं खुलेंगे, क्योंकि किसी वजह से window.alert ट्रिगर हो गया था.
मैं आपके पुराने Google Calendar को देख रहा हूँ.
हमारे YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से इसकी सूचना मिलेगी.
मेरा नाम पीट लेपेज है. Chrome 65 के रिलीज़ होने के बाद, मैं आपको बताऊंगा कि Chrome में नया क्या है!