Chrome 65 में नया

Pete LePage

• CSS Paint API की मदद से, आपको प्रोग्राम के हिसाब से, अपने-आप होने वाली प्रोसेस के ज़रिए इमेज.
• Server Timing API की मदद से वेब सर्वर HTTP हेडर के ज़रिए प्रदर्शन समय की जानकारी.
• नई CSS 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 एलिमेंट जोड़ने के बजाय रिपल इफ़ेक्ट बनाएं तो पेंट एपीआई का इस्तेमाल किया जा सकता है.

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

Surma की एक शानदार पोस्ट है, जैसे कि डेमो एक्सप्लेनर में शामिल किया गया है.

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

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

नए 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 में शामिल होता है.

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

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

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

रेचल एंड्रयू की शानदार पोस्ट देखें डिसप्ले कॉन्टेंट वाले सामान के बॉक्स पढ़ें.

और भी कई सुविधाएं!

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

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

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

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