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 में नया क्या है!