- जब किसी एलिमेंट के कॉन्टेंट रेक्टैंगल का साइज़ बदला जाएगा, तब
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: यह एलिमेंट के लिए 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का कैश मोड देखा जा सकता है. साथ ही, यह पता लगाया जा सकता है कि यह अनुरोध, फिर से लोड करने का अनुरोध है या नहीं. - फ़ोकस मैनेजमेंट एपीआई का इस्तेमाल करके, अब
preventScrollएट्रिब्यूट की मदद से किसी एलिमेंट पर स्क्रोल किए बिना उस पर फ़ोकस किया जा सकता है.
window.alert()
ओह, एक और! हालांकि यह कोई "डेवलपर सुविधा" नहीं है, लेकिन
इससे मुझे खुशी मिलती है. window.alert() अब बैकग्राउंड टैब को फ़ोरग्राउंड पर
नहीं लाता है! इसके बजाय, जब उपयोगकर्ता उस टैब पर वापस स्विच करेगा
तब चेतावनी दिखेगी.
अब रैंडम तरीके से टैब स्विच नहीं किया जाएगा, क्योंकि किसी ने मेरे डिवाइस पर window.alert ट्रिगर कर दिया है.
मैं आपके लिए पुराना Google Calendar देख रही हूँ.
हमारे YouTube चैनल की सदस्यता लेना न भूलें. जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.
मैं हूं पीट लेपेज और Chrome 65 के रिलीज़ होते ही, मैं आपको बताऊंगी -- Chrome में नया क्या है!