Chrome 65 में नया

पीट लीपेज

Twitter GitHub Glitch Mastodon होम पेज

• CSS Paint API आपको प्रोग्राम की मदद से इमेज जनरेट करने की सुविधा देता है.
• Server Timing API की मदद से वेब सर्वर, एचटीटीपी हेडर के ज़रिए परफ़ॉर्मेंस के समय की जानकारी दे सकते हैं.
• नई सीएसएस display: contents प्रॉपर्टी का इस्तेमाल करके बॉक्स को आसानी से हटाया जा सकता है!

इनके अलावा और भी बहुत कुछ है!

मेरा नाम पीट लेपेज है. आइए, विस्तार से जानें और देखें कि Chrome 65 में डेवलपर के लिए नया क्या है!

क्या आपको बदलावों की पूरी सूची चाहिए? Chromium सोर्स का डेटा स्टोर करने की जगह में बदलाव की सूची देखें.

सीएसएस पेंट एपीआई

CSS Paint API की मदद से, background-image या border-image जैसी सीएसएस प्रॉपर्टी के लिए, प्रोग्राम के हिसाब से इमेज जनरेट की जा सकती है.

किसी इमेज का रेफ़रंस देने के बजाय, इमेज बनाने के लिए नए पेंट फ़ंक्शन का इस्तेमाल किया जा सकता है. यह कैनवस एलिमेंट की तरह है.

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

उदाहरण के लिए, मटीरियल स्टाइल वाले बटन पर रिपल इफ़ेक्ट बनाने के लिए, अतिरिक्त DOM एलिमेंट जोड़ने के बजाय, पेंट एपीआई का इस्तेमाल किया जा सकता है.

यह सीएसएस की ऐसी सुविधाओं को पॉलीफ़िल करने का भी एक बेहतरीन तरीका है जो फ़िलहाल ब्राउज़र में काम नहीं करती हैं.

सूरमा के एक्सप्लेनर में, कई डेमो के साथ बेहतरीन पोस्ट मौजूद हैं.

सर्वर टाइमिंग एपीआई

उम्मीद है कि आप असल उपयोगकर्ताओं के लिए अपनी साइट की परफ़ॉर्मेंस ट्रैक करने के लिए, नेविगेशन और रिसॉर्स टाइमिंग एपीआई का इस्तेमाल कर रहे हैं. अब तक, सर्वर के लिए परफ़ॉर्मेंस टाइम आउट की रिपोर्ट करने का कोई आसान तरीका नहीं था.

नया Server Timing API आपके सर्वर को ब्राउज़र को समय की जानकारी भेजने की सुविधा देता है. इससे आपको अपनी परफ़ॉर्मेंस की पूरी जानकारी मिलती है.

अपने जवाब में Server-Timing हेडर जोड़कर, जितनी चाहें उतनी मेट्रिक ट्रैक की जा सकती हैं: जैसे, डेटाबेस के पढ़े जाने का समय, शुरू होने में लगने वाला समय या आपके लिए किसी भी अहम जानकारी को ट्रैक करने के लिए:

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

उन्हें Chrome DevTools में दिखाया जाता है या उन्हें रिस्पॉन्स हेडर से बाहर निकालकर, अपने परफ़ॉर्मेंस के अन्य आंकड़ों के साथ सेव किया जा सकता है.

display: contents

नई सीएसएस display: contents प्रॉपर्टी बहुत बढ़िया है!

कंटेनर एलिमेंट में जोड़े जाने पर, कोई भी चाइल्ड डीओएम में अपनी जगह ले लेता है और वह गायब हो जाता है. मान लीजिए कि मेरे पास दो div हैं, एक दूसरे के अंदर. मेरे बाहरी div में लाल बॉर्डर, धूसर बैकग्राउंड है. मैंने 200 पिक्सल की चौड़ाई सेट की है. अंदरूनी div का बॉर्डर नीले रंग का है और बैकग्राउंड हल्के नीले रंग का है.

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

डिफ़ॉल्ट रूप से, अंदरूनी div, आउटर div में शामिल होता है.

मैं इनर हूं <div>

display: contents को बाहरी div में जोड़ने से, बाहरी div गायब हो जाता है और इसकी सीमाएं अब आंतरिक div पर लागू नहीं होती हैं. अंदरूनी div की चौड़ाई अब 100% है.

DevTools की मदद से डीओएम की जांच करें और देखें कि बाहरी div अब भी मौजूद है.

कई मामलों में यह मददगार हो सकता है, लेकिन फ़्लेक्सबॉक्स सबसे आम है. फ़्लेक्सबॉक्स से, फ़्लेक्स कंटेनर के छोटे बच्चे ही फ़्लेक्स आइटम बन जाते हैं.

हालांकि, जब किसी बच्चे के लिए display: contents का इस्तेमाल किया जाता है, तो उसके बच्चे फ़्लेक्सिबल आइटम बन जाते हैं. साथ ही, उसके बच्चों के लिए उन ही नियमों का पालन किया जाता है जो शायद उनके माता-पिता पर लागू होते.

ज़्यादा जानकारी और दूसरे उदाहरणों के लिए, रेचल एंड्रू की शानदार पोस्ट देखें डिसप्ले कॉन्टेंट के साथ वैनिशिंग बॉक्स.

और ज़्यादा!

डेवलपर के लिए Chrome 65 में ये कुछ बदलाव हैं, बेशक, और भी बहुत से बदलाव हैं.

• HSL, HSLA, और कलर प्रॉपर्टी के लिए RGB और RGBA कोऑर्डिनेट बताने के लिए सिंटैक्स, अब सीएसएस के कलर 4 स्पेसिफ़िकेशन से मैच करता है.
• एक नई सुविधा नीति मौजूद है, जिसकी मदद से आप एचटीटीपी हेडर या iframe allow एट्रिब्यूट की मदद से, सिंक्रोनस XHR को कंट्रोल कर सकते हैं.

Chrome 65 में DevTools के लिए नया क्या है, यह जानने के लिए Chrome DevTools में नया देखना न भूलें. अगर आपकी दिलचस्पी प्रोग्रेसिव वेब ऐप्लिकेशन में है, तो PWA रोड शो की नई वीडियो सीरीज़ देखें. इसके बाद, हमारे YouTube चैनल पर सदस्यता लें बटन पर क्लिक करें. जब भी हम नया वीडियो लॉन्च करेंगे, तब आपको ईमेल से सूचना दी जाएगी.

मैं हूं पीट लेपेज और Chrome 66 के रिलीज़ होते ही, मैं आपको बताऊंगी -- Chrome में नया क्या है!