Chrome 65 में नया

Pete LePage

• 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>

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

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

सूरमा ने अपने एक्सप्लेनर वीडियो में, कई डेमो के साथ एक शानदार पोस्ट शेयर की है.

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

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

नए 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 कोऑर्डिनेट को तय करने वाला सिंटैक्स अब CSS के रंग 4 की खास बातों से मिलता-जुलता है.
• एक नई सुविधा से जुड़ी नीति मौजूद है. इसकी मदद से, एचटीटीपी हेडर या iframe allow एट्रिब्यूट के ज़रिए सिंक्रोनस XHR को कंट्रोल किया जा सकता है.

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

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