इस पेज का अनुवाद Cloud Translation API से किया गया है.

Chrome 85 में नया

पीट लीपेज

Twitter GitHub Glitch Mastodon होम पेज

Chrome 85 अब स्टेबल होने वाला है.

यहां आवश्यक जानकारी दी गई है:

content-visibility: auto की मदद से, रेंडरिंग की परफ़ॉर्मेंस को बेहतर बनाया जा सकता है.
सीएसएस प्रॉपर्टी को अब... सीएसएस में सेट किया जा सकता है.
अब getInstalledRelatedApps() की मदद से, यह देखा जा सकता है कि आपका Windows ऐप्लिकेशन या PWA इंस्टॉल है या नहीं.
ऐप्लिकेशन आइकॉन शॉर्टकट Windows पर भी काम करते हैं (इस समय असल के लिए).
fetch अपलोड स्ट्रीमिंग के लिए, ऑरिजिन ट्रायल शुरू हो गया है.
साथ ही, अन्य जानकारी.

मैं पीट लीपेज हूं, घर से काम कर रहा/रही हूं, चलिए देखते हैं और देखते हैं कि Chrome 85 में डेवलपर के लिए नया क्या है!

कॉन्टेंट किसको दिखे

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

content-visibility: auto को किसी एलिमेंट पर लागू करने से, ब्राउज़र को पता चलता है कि वह तब तक उस एलिमेंट के लिए रेंडरिंग के काम को स्किप कर सकता है, जब तक कि वह व्यूपोर्ट में स्क्रोल नहीं हो जाता. इससे, शुरुआती रेंडर तेज़ी से काम करता है.

.my-class {
  content-visibility: auto;
}

content-visibility का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, इसे ज़्यादा मुश्किल लेआउट एल्गोरिदम, जैसे कि flexbox और grid वाले पैरंट सेक्शन पर लागू करें. इसके अलावा, ऐसे पैरंट सेक्शन पर भी लागू करें जिनमें बच्चों के खुद के लेआउट हों.

कॉन्टेंट को अलग-अलग हिस्सों में बांटने और content-visibility: auto; को जोड़ने से, इस पेज का रेंडरिंग समय 232 मि॰से॰ से अब सिर्फ़ 30 मि॰से॰ हो गया है.

कॉन्टेंट किसको दिखे से जुड़ी जानकारी देखें. इस रिपोर्ट का इस्तेमाल करके अपनी रेंडरिंग परफ़ॉर्मेंस को कैसे बेहतर बनाया जा सकता है.

`@property` और सीएसएस वैरिएबल

सीएसएस वैरिएबल को तकनीकी तौर पर कस्टम प्रॉपर्टी कहा जाता है. ये शानदार होते हैं. Houdini सीएसएस प्रॉपर्टी और वैल्यू एपीआई की मदद से, आपके पास अपनी कस्टम प्रॉपर्टी के लिए एक टाइप और डिफ़ॉल्ट फ़ॉलबैक वैल्यू तय करने का विकल्प होता है. मैंने पहले Chrome 78 के नए वर्शन में इसकी जानकारी दी थी. इस बारे में हमने पहले JavaScript में उनकी जानकारी देने वाली सुविधा जोड़ी थी.

Chrome 85 से, आप सीधे अपने सीएसएस में भी सीएसएस प्रॉपर्टी को तय और सेट कर सकते हैं. सीएसएस प्रॉपर्टी के बारे में मुझे सबसे अच्छी बात यह है कि इससे प्रॉपर्टी को सिमैंटिक मतलब और फ़ॉलबैक वैल्यू मिलती हैं. साथ ही, यह सीएसएस टेस्टिंग को भी चालू करती है.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

युना की एक बेहतरीन पोस्ट है @property: सीएसएस वैरिएबल को सुपरपावर देना इससे आपको पता चलता है कि उन्हें कैसे इस्तेमाल किया जा सकता है.

इंस्टॉल किए गए मिलते-जुलते ऐप्लिकेशन पाएं

getInstalledRelatedApps() एपीआई की मदद से, आपके लिए यह देखा जा सकता है कि आपका ऐप्लिकेशन इंस्टॉल है या नहीं. इसके बाद, उपयोगकर्ता अनुभव को अपनी पसंद के मुताबिक बनाया जा सकता है.

उदाहरण के लिए, अगर आपका ऐप्लिकेशन पहले से इंस्टॉल है, तो उपयोगकर्ता को लैंडिंग पेज पर अलग-अलग कॉन्टेंट दिखाएं. भ्रम की स्थिति को रोकने के लिए एक ही ऐप्लिकेशन में ओवरलैप होने वाली सुविधा को एक ही जगह से मैनेज करें. अगर आपका खास ऐप्लिकेशन पहले से इंस्टॉल है, तो अपने PWA को इंस्टॉल करने का प्रमोशन न करें.

जब इसे पहली बार Chrome 80 में भेजा गया था, तो यह सिर्फ़ Android ऐप्लिकेशन के लिए काम करता था. अब Android पर यह भी देखा जा सकता है कि आपका PWA इंस्टॉल है या नहीं. और Windows पर, यह देख सकता है कि आपका Windows UWP ऐप्लिकेशन इंस्टॉल है या नहीं.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

मेरा लेख पढ़ें क्या आपका ऐप्लिकेशन इंस्टॉल हो गया है? getInstalledRelatedApps() आपको बताएगा! कि वेब.dev पर यह कैसे काम करता है और वे ऐप्लिकेशन कैसे साइन करें, ताकि यह साबित किया जा सके कि वे आपके हैं.

ऐप्लिकेशन आइकॉन के शॉर्टकट

Chrome 84 में, हमने ऐप्लिकेशन आइकॉन के शॉर्टकट के लिए सहायता जोड़ी. मैंने गलती से कहा कि वे सभी जगह उपलब्ध हैं, लेकिन वे केवल Android पर उपलब्ध हैं. अब Chrome 85 में, वे Android और Windows पर उपलब्ध हैं. साथ ही, ये Chrome और Edge, दोनों पर उपलब्ध हैं.

"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

पूरी जानकारी के लिए web.dev पर ऐप्लिकेशन आइकॉन के शॉर्टकट वाला लेख देखें. इस वजह से हुई परेशानी के लिए हम माफ़ी चाहते हैं.

ऑरिजिन ट्रायल: `fetch()` से स्ट्रीमिंग के अनुरोध

Chrome 85 से, fetch अपलोड स्ट्रीमिंग ऑरिजिन ट्रायल के तौर पर उपलब्ध है. इसकी मदद से, अनुरोध का मुख्य हिस्सा तैयार होने से पहले, फ़ेच करने की प्रोसेस शुरू की जा सकती है. पहले, पूरा शरीर तैयार होने पर ही अनुरोध किया जा सकता था. अब कॉन्टेंट भेजना शुरू किया जा सकता है, भले ही उसे जनरेट किया जा रहा हो.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

उदाहरण के लिए, सर्वर को गर्म करने के लिए इसका इस्तेमाल करें या माइक्रोफ़ोन या कैमरे से कैप्चर किए गए ऑडियो या वीडियो को स्ट्रीम करें.

जेक ने web.dev पर फ़ेच एपीआई की मदद से स्ट्रीम करने के अनुरोधों के बारे में विस्तार से बताया है. साथ ही, उन्होंने इसके बारे में सबसे नए HTTP203 - फ़ेच करने के अनुरोध वाले वीडियो में बताया है.

अन्य डेटा

बेशक, अभी बहुत कुछ है.

Promise.any ऐसा प्रॉमिस लौटाता है जो पहले दिए गए प्रॉमिस को पूरा या अस्वीकार करता है.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

.replaceAll() की मदद से, स्ट्रिंग में सभी इंस्टेंस को बदलना आसान हो जाता है. अब रेगुलर एक्सप्रेशन की ज़रूरत नहीं है!

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85 में, AVIF के लिए डिकोड करने की सुविधा जोड़ी गई है. यह एक इमेज फ़ॉर्मैट है, जिसे AV1 से कोड में बदला गया है. साथ ही, यह Alliance for Open Media के स्टैंडर्ड के मुताबिक है. AVIF, JPEG और WebP के मुकाबले काफ़ी कंप्रेशन फ़ायदे देता है. हाल ही में हुई Netflix की स्टडी में बताया गया है कि स्टैंडर्ड JPEG के मुकाबले 50% ज़्यादा और 4:4:4 वाले कॉन्टेंट पर 60% से ज़्यादा बचत हुई है.

साथ ही, ऐप्लिकेशन कैश मेमोरी को हटाने की प्रक्रिया शुरू हो गई है.

इसके बारे में और पढ़ें

इसमें सिर्फ़ कुछ मुख्य हाइलाइट शामिल की गई हैं. Chrome 85 में और बदलावों के लिए नीचे दिए गए लिंक देखें.

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

मैं हूं पीट लीपेज और आखिरकार मेरे बाल कट गए हो गए!

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