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

Chrome 85 में नया

Pete LePage

Chrome 85 को अब स्टेबल वर्शन के तौर पर रोल आउट किया जा रहा है.

यहां आपके जानने योग्य तथ्य दिए गए हैं:

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

नमस्ते, पीट लेपेज बोल रहा हूं. फ़िलहाल, मैं घर से काम और शूटिंग कर रहा हूं. आइए, Chrome 85 में डेवलपर के लिए क्या नया है, इस बारे में जानते हैं!

कॉन्टेंट दिखने की सेटिंग

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

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

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

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

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

रेंडरिंग की परफ़ॉर्मेंस को बेहतर बनाने के लिए, कॉन्टेंट की विज़िबिलिटी देखें.

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

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

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() आपको बताएगा! web.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% से ज़्यादा बचत होती है.

साथ ही, AppCache को हटाने की प्रोसेस शुरू हो गई है.

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

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

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

मैं पीट लेपेज हूं. आखिरकार, मैंने बाल कटवा लिए!

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