Chrome 93 में नया

Pete LePage

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

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

CSS मॉड्यूल स्क्रिप्ट

अब JavaScript मॉड्यूल की तरह ही, import स्टेटमेंट के साथ सीएसएस स्टाइल शीट लोड की जा सकती हैं. फिर स्टाइल शीट को दस्तावेज़ या शैडो रूट पर ठीक उसी तरह लागू किया जा सकता है जिस तरह बनाने लायक स्टाइलशीट पर किया जाता है.

नई सीएसएस मॉड्यूल स्क्रिप्ट्स सुविधा, कस्टम एलिमेंट के लिए बेहतरीन है. साथ ही, JavaScript से सीएसएस लागू करने के दूसरे तरीकों के उलट, एलिमेंट बनाने या सीएसएस टेक्स्ट की JavaScript स्ट्रिंग से गड़बड़ी करने की कोई ज़रूरत नहीं होती.

इसका इस्तेमाल करने के लिए, स्टाइल शीट को assert {type: 'css'} से इंपोर्ट करें. इसके बाद, adoptedStyleSheets को कॉल करके उसे document या shadowRoot पर लागू करें.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

लेकिन ध्यान रखें, अगर आप assert को छोड़ देते हैं - तो फ़ाइल को JavaScript माना जाएगा और वह काम नहीं करेगी!

पूरी जानकारी के लिए, web.dev पर स्टाइलशीट इंपोर्ट करने के लिए सीएसएस मॉड्यूल स्क्रिप्ट का इस्तेमाल करना देखें.

मल्टी-स्क्रीन विंडो प्लेसमेंट एपीआई

कुछ ऐप्लिकेशन के लिए, नई विंडो खोलना और उन्हें खास जगहों या डिसप्ले पर डालना एक अहम सुविधा है. जैसे, प्रज़ेंट करने के लिए Slides का इस्तेमाल करते समय, मेरी इच्छा है कि प्राइमरी डिसप्ले पर स्लाइड फ़ुल स्क्रीन मोड में दिखें और स्पीकर नोट दूसरे डिसप्ले पर.

मल्टी-स्क्रीन विंडो प्लेसमेंट एपीआई की मदद से, उपयोगकर्ता की मशीन से कनेक्ट किए गए डिसप्ले की गिनती की जा सकती है और विंडो को खास स्क्रीन पर रखा जा सकता है. यह इसका दूसरा ऑरिजिन ट्रायल है और हमने आपके सुझाव के आधार पर कई बदलाव किए हैं.

यह तुरंत देखा जा सकता है कि डिवाइस से एक से ज़्यादा स्क्रीन कनेक्ट की गई हैं या नहीं:

const isExtended = window.screen.isExtended;
// returns true/false

हालांकि, मुख्य फ़ंक्शन window.getScreens() में है, जो अटैच किए गए डिसप्ले के बारे में सभी जानकारी देता है.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

उदाहरण के लिए, पहले मुख्य स्क्रीन का पता लगाया जा सकता है. इसके बाद, उस स्क्रीन पर एलिमेंट दिखाने के लिए requestFullscreen() का इस्तेमाल किया जा सकता है.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

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

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

ज़्यादा जानने के लिए web.dev पर, टॉम का लेख पढ़ें मल्टी-स्क्रीन विंडो प्लेसमेंट एपीआई की मदद से कई डिसप्ले मैनेज करना.

कम समय में रिलीज़ साइकल

मार्च में, हमने रिलीज़ साइकल को कम करने और हर चार हफ़्ते में Chrome का एक नया वर्शन भेजने की अपनी योजनाओं का एलान किया था.

वह समय आ गया है और हम 21 सितंबर को Chrome 94 को शिप कर देंगे. Chrome Calendar में, हर वर्शन को रिलीज़ करने की पहले से तय तारीखें देखी जा सकती हैं.

PWA की नई सुविधाएं

अगर आपको प्रोग्रेसिव वेब ऐप्लिकेशन बनाना है, तो दो नए ऑरिजिन ट्रायल उपलब्ध हैं.

PWA के लिए यूआरएल हैंडलर

अगर आपने PWA इंस्टॉल किया है और आपने उस PWA के लिंक पर क्लिक किया है, तो हो सकता है कि आप उसे PWA में खोलना चाहें, न कि ब्राउज़र टैब में. नहीं.

अपने वेब ऐप्लिकेशन मेनिफ़ेस्ट में url_handlers की जानकारी देकर और अपनी .well-known/ डायरेक्ट्री में web-app-origin-association फ़ाइल जोड़कर, ब्राउज़र को बताया जा सकता है कि अगर कोई उपयोगकर्ता आपके PWA के लिंक पर क्लिक करता है, तो उसे इंस्टॉल किए गए PWA में ही खुलना चाहिए.

manifest.json फ़ाइल में url_handlers का उदाहरण:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

web-app-origin-association फ़ाइल का उदाहरण:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

पुष्टि की थोड़ी अतिरिक्त ज़रूरत के साथ, आपको अपने PWA हैंडल लिंक भी मिल सकते हैं. ये लिंक उन ऑरिजिन के होते हैं जिनका मालिकाना हक आपके पास है.

ऑरिजिन ट्रायल के बारे में पूरी जानकारी, web.dev पर यूआरएल हैंडलर के तौर पर PWA में दी गई है.

विंडो कंट्रोल का ओवरले

विंडो कंट्रोल ओवरले, क्लाइंट एरिया को बढ़ाकर पूरी विंडो कवर करता है. इसमें टाइटल बार और विंडो कंट्रोल बटन, जैसे कि बंद करें, बड़ा करें, और छोटा करें बटन शामिल हैं.

इस सुविधा का इस्तेमाल करके, इंस्टॉल किया गया PWA एक तरह से, इंस्टॉल किए गए अन्य ऐप्लिकेशन की तरह दिखना चाहिए.

ऑरिजिन ट्रायल के बारे में ज़्यादा जानकारी के लिए, अपने PWA के टाइटल बार के विंडो कंट्रोल ओवरले को पसंद के मुताबिक बनाना देखें.

PWA समिट

PWA समिट अक्टूबर में होने वाला है. यह एक मुफ़्त ऑनलाइन कॉन्फ़्रेंस है, जिसका मकसद प्रोग्रेसिव वेब ऐप्लिकेशन की मदद से कामयाब होने में सभी की मदद करना है. PWA समिट कुछ अलग-अलग कंपनियों के लोगों के साथ मिलकर आयोजित किया जाता है, जो PWA टेक्नोलॉजी को तैयार करती हैं: Google, Intel, Microsoft, और Samsung.

इसमें बहुत सारी अहम बातें और कॉन्टेंट मौजूद हैं. ज़्यादा जानकारी के लिए, PWASummit.org पर जाकर रजिस्टर करें.

और ज़्यादा!

बेशक, यहां बहुत कुछ है.

  • Flexbox और flexbox आइटम ने अलाइनमेंट कीवर्ड के लिए सहायता जोड़ी है: start, end, self-start, self-end, left, और right.
  • एक साथ काम नहीं करने वाले क्लिपबोर्ड एपीआई का इस्तेमाल अब SVG फ़ाइलों के लिए किया जा सकता है.
  • साथ ही, meta theme-color को सेट करते समय media एट्रिब्यूट का ध्यान रखा जाएगा, ताकि आप हल्के और गहरे रंग वाले मोड के लिए अलग-अलग थीम रंग तय कर सकें.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

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

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

सदस्यता लें

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

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