- CSS टाइप किए गए मॉडल ऑब्जेक्ट की मदद से, सीएसएस में बदलाव करना आसान हो जाता है.
- क्लिपबोर्ड का ऐक्सेस अब सिंक नहीं होता.
- कैनवस एलिमेंट के लिए, रेंडरिंग कॉन्टेक्स्ट का एक नया वर्शन उपलब्ध है.
इसके अलावा, और भी बहुत कुछ है!
मेरा नाम पीट लेपेज है. आइए, जानें कि Chrome 66 में डेवलपर के लिए क्या नया है!
क्या आपको बदलावों की पूरी सूची चाहिए? Chromium सोर्स रिपॉज़िटरी में हुए बदलावों की सूची देखें.
सीएसएस टाइप किया गया ऑब्जेक्ट मॉडल
अगर आपने कभी JavaScript की मदद से सीएसएस प्रॉपर्टी अपडेट की है, तो इसका मतलब है कि आपने सीएसएस ऑब्जेक्ट मॉडल का इस्तेमाल किया है. हालांकि, यह सब कुछ स्ट्रिंग के तौर पर दिखाता है.
el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?
opacity प्रॉपर्टी को ऐनिमेट करने के लिए, मुझे स्ट्रिंग को संख्या में बदलना होगा. इसके बाद, वैल्यू बढ़ानी होगी और अपने बदलाव लागू करने होंगे. यह पूरी तरह से सही नहीं है.
function step(timestamp) {
const currentOpacity = parseFloat(el.style.opacity);
const newOpacity = currentOpacity + 0.01;
element.style.opacity = newOpacity;
if (newOpacity <= 1) {
window.requestAnimationFrame(step);
}
}
नए CSS टाइप किए गए ऑब्जेक्ट मॉडल की मदद से, सीएसएस वैल्यू को टाइप किए गए JavaScript ऑब्जेक्ट के तौर पर दिखाया जाता है. इससे, टाइप में बदलाव करने की ज़रूरत नहीं पड़ती और सीएसएस के साथ काम करने का बेहतर तरीका मिलता है.
element.style का इस्तेमाल करने के बजाय, स्टाइल को .attributeStyleMap प्रॉपर्टी या .styleMap के ज़रिए ऐक्सेस किया जाता है. ये फ़ंक्शन, मैप जैसा ऑब्जेक्ट दिखाते हैं, जिसे पढ़ना या अपडेट करना आसान होता है.
el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!
शुरुआती मानदंडों से पता चलता है कि पुराने सीएसएस ऑब्जेक्ट मॉडल की तुलना में, हर सेकंड में होने वाले ऑपरेशन में करीब 30% का सुधार हुआ है. यह सुधार, खास तौर पर JavaScript ऐनिमेशन के लिए अहम है.
el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles
इससे, वैल्यू को स्ट्रिंग से संख्या में बदलने के दौरान होने वाली गड़बड़ियों को भी ठीक करने में मदद मिलती है. साथ ही, यह वैल्यू को अपने-आप राउंड करता है और क्लैंप करता है. साथ ही, इसमें यूनिट बदलाव, अंकगणित, और बराबरी से जुड़े कुछ बेहतरीन नए तरीके भी हैं.
el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1
एरिक ने एक्सप्लेनर में कई डेमो और उदाहरणों के साथ एक बेहतरीन पोस्ट लिखी है.
Async Clipboard API
const successful = document.execCommand('copy');
document.execCommand का इस्तेमाल करके, टेक्स्ट के छोटे-छोटे हिस्सों को सिंक करके कॉपी और चिपकाया जा सकता है. हालांकि, किसी और चीज़ के लिए, सिंक करने की सुविधा की वजह से पेज ब्लॉक हो सकता है. इससे उपयोगकर्ता को खराब अनुभव मिलता है. साथ ही, ब्राउज़र के बीच अनुमति का मॉडल अलग-अलग होता है.
Async Clipboard API, क्लिपबोर्ड एपीआई का नया वर्शन है. यह एपीआई, सिंक किए बिना काम करता है. साथ ही, उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, अनुमति एपीआई के साथ काम करता है.
writeText() बोलकर, टेक्स्ट को क्लिपबोर्ड पर कॉपी किया जा सकता है.
navigator.clipboard.writeText('Copy me!')
.then(() => {
console.log('Text is on the clipboard.');
});
यह एपीआई असाइनोक्रोनस है. इसलिए, writeText() फ़ंक्शन एक प्रॉमिस दिखाता है. इसे स्वीकार या अस्वीकार किया जाएगा. यह इस बात पर निर्भर करेगा कि हमने जो टेक्स्ट पास किया है वह कॉपी हो गया है या नहीं.
इसी तरह, getText() को कॉल करके और टेक्स्ट के साथ रिज़ॉल्व होने के लिए, रिटर्न किए गए Promise का इंतज़ार करके, क्लिपबोर्ड से टेक्स्ट पढ़ा जा सकता है.
navigator.clipboard.getText()
.then((text) => {
console.log('Clipboard: ', text);
});
एक्सप्लेनर में, जेसन की पोस्ट और डेमो देखें.
उनके पास async फ़ंक्शन का इस्तेमाल करने के उदाहरण भी हैं.
नया कैनवस कॉन्टेक्स्ट BitmapRenderer
canvas एलिमेंट की मदद से, पिक्सल लेवल पर ग्राफ़िक में बदलाव किया जा सकता है. साथ ही, ग्राफ़ बनाए जा सकते हैं, फ़ोटो में बदलाव किए जा सकते हैं या रीयल टाइम में वीडियो प्रोसेसिंग की जा सकती है.
हालांकि, अगर आपको खाली canvas से शुरू नहीं करना है, तो आपको canvas पर इमेज को रेंडर करने का तरीका चाहिए.
पहले, इसका मतलब था कि image टैग बनाना और फिर उसके कॉन्टेंट को canvas पर रेंडर करना. माफ़ करें, इसका मतलब है कि ब्राउज़र को मेमोरी में इमेज की कई कॉपी सेव करनी होंगी.
const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0);
}
img.src = 'llama.png';
Chrome 66 से, एक नया असाइनोक्रोनस रेंडरिंग कॉन्टेक्स्ट उपलब्ध है. इसकी मदद से, ImageBitmap ऑब्जेक्ट को बेहतर तरीके से दिखाया जा सकता है. अब ये ऐनिमेशन, एक साथ काम करने और मेमोरी का डुप्लीकेट इस्तेमाल करने से बचने की वजह से, ज़्यादा बेहतर तरीके से और कम रुकावट के साथ रेंडर होते हैं.
इसका इस्तेमाल करने के लिए:
- इमेज बनाने के लिए,
createImageBitmapको कॉल करें और उसे इमेज ब्लॉब दें. canvasसेbitmaprendererका कॉन्टेक्स्ट पाएं.- इसके बाद, इमेज को ट्रांसफ़र करें.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);
हो गया, मैंने इमेज को रेंडर कर दिया है!
AudioWorklet
वर्कलेट आ गए हैं! PaintWorklet, Chrome 65 में उपलब्ध कराया गया था. अब हम Chrome 66 में डिफ़ॉल्ट रूप से AudioWorklet को चालू कर रहे हैं. इस नए तरह के वर्कलेट का इस्तेमाल, ऑडियो थ्रेड में ऑडियो को प्रोसेस करने के लिए किया जा सकता है. इससे, मुख्य थ्रेड पर चलने वाले लेगसी ScriptProcessorNode की जगह ले ली जाती है. हर AudioWorklet अपने ग्लोबल स्कोप में चलता है. इससे इंतज़ार का समय कम होता है और थ्रूपुट की स्थिरता बढ़ती है.
Google Chrome Labs पर, ऑडियोवर्कलेट के कुछ दिलचस्प उदाहरण मौजूद हैं.
और भी कई सुविधाएं!
डेवलपर के लिए Chrome 66 में ये सिर्फ़ कुछ बदलाव हैं. इसमें और भी कई बदलाव किए गए हैं.
TextAreaऔरSelectके साथ अबautocompleteएट्रिब्यूट का इस्तेमाल किया जा सकता है.formएलिमेंट परautocapitalizeसेट करने से, यह किसी भी चाइल्ड फ़ॉर्म फ़ील्ड पर लागू हो जाएगा. इससे, Safari मेंautocapitalizeको लागू करने के साथ काम करने की सुविधा बेहतर होगी.trimStart()औरtrimEnd(), अब स्टैंडर्ड के हिसाब से स्ट्रिंग से खाली जगह हटाने के लिए उपलब्ध हैं.
Chrome 66 में DevTools के लिए जो नई सुविधाएं जोड़ी गई हैं, उनके बारे में जानने के लिए Chrome DevTools में नई सुविधाएं देखें. अगर आपको प्रोग्रेसिव वेब ऐप्लिकेशन में दिलचस्पी है, तो PWA रोडशो की नई वीडियो सीरीज़ देखें. इसके बाद, हमारे YouTube चैनल पर सदस्यता लें बटन पर क्लिक करें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, तो आपको ईमेल से सूचना मिलेगी.
मेरा नाम पीट लेपेज है. Chrome 67 के रिलीज़ होने के बाद, मैं आपको बताऊंगा कि Chrome में नया क्या है!