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

Chrome 123 में नया

Adriana Jara

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

नए light-dark() फ़ंक्शन की मदद से, अपनी कलर-स्कीम में बदलाव करें.
Long Animation Frames API की मदद से, अपनी साइट के रिस्पॉन्सिवनेस का पता लगाएं.
Service Worker स्टैटिक रूटिंग एपीआई की मदद से, सर्विस वर्कर के शुरू होने पर होने वाली परफ़ॉर्मेंस से जुड़ी समस्याओं से बचें.
इसके अलावा, और भी बहुत कुछ है.

मेरी पहचान एड्रियाना जारा है. आइए, जानें कि Chrome 123 में डेवलपर के लिए क्या नया है.

`light-dark()` सीएसएस फ़ंक्शन.

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

एलिमेंट की कैलकुलेट की गई color-scheme वैल्यू के आधार पर, ब्राउज़र अपने-आप सही रंग चुन लेगा. उदाहरण के लिए, इस सीएसएस के साथ:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

अगर उपयोगकर्ता ने हल्की थीम चुनी है, तो एलिमेंट का बैकग्राउंड लाइम कलर का होगा.
अगर उपयोगकर्ता ने गहरे रंग वाली थीम चुनी है, तो एलिमेंट का बैकग्राउंड हरा होगा.

Long Animation Frames API.

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

नया एपीआई, Long Tasks API का बेहतर वर्शन है. इससे, उपयोगकर्ता इंटरफ़ेस के अपडेट में लगने वाले समय को बेहतर तरीके से समझा जा सकता है. लंबे एनिमेशन फ़्रेम एपीआई की मदद से, ब्लॉकिंग के काम को मेज़र किया जा सकता है. यह रेंडरिंग अपडेट के साथ-साथ टास्क को मेज़र करता है. साथ ही, इसमें लंबे समय तक चलने वाली स्क्रिप्ट, रेंडरिंग में लगने वाला समय, और फ़ोर्स किए गए लेआउट और स्टाइल में बिताया गया समय जैसी जानकारी जोड़ता है. इसे लेआउट थ्रैशिंग कहा जाता है.

इस जानकारी को इकट्ठा और विश्लेषण करके, परफ़ॉर्मेंस में आने वाली रुकावटों की पहचान की जा सकती है और उन्हें ठीक किया जा सकता है. इस कोड की मदद से, लंबे फ़्रेम कैप्चर किए जा सकते हैं.

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

Service worker Static Routing API.

सर्विस वर्कर का इस्तेमाल करके, वेबसाइटों को ऑफ़लाइन काम करने लायक बनाया जा सकता है. साथ ही, कैश मेमोरी से जुड़ी ऐसी रणनीतियां बनाई जा सकती हैं जिनसे परफ़ॉर्मेंस बेहतर हो सकती है.

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

Service Worker स्टैटिक रूटिंग एपीआई की मदद से, इंस्टॉल के समय यह तय किया जा सकता है कि नेटवर्क से हमेशा कौनसे पाथ दिखाए जाएं. जब बाद में कोई कंट्रोल किया गया यूआरएल लोड होता है, तो सर्विस वर्कर के शुरू होने से पहले ब्राउज़र उन पाथ से संसाधनों को फ़ेच करना शुरू कर सकता है. इससे उन यूआरएल से सर्विस वर्कर हट जाता है जिनके लिए आपको सर्विस वर्कर की ज़रूरत नहीं है.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

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

इसके अलावा, और भी बहुत कुछ है.

NavigationActivation इंटरफ़ेस की मदद से, उपयोगकर्ता ने जिस पेज से नेविगेट किया है उसके आधार पर, उपयोगकर्ताओं को पसंद के मुताबिक पेज दिखाए जा सकते हैं.
Chrome में अब Zstandard (zstd) का इस्तेमाल किया जा सकता है. इस Content-Encoding की मदद से, पेजों को तेज़ी से लोड किया जा सकता है और कम बैंडविड्थ का इस्तेमाल किया जा सकता है. साथ ही, सर्वर पर कॉन्टेंट को कंप्रेस करने में कम समय, सीपीयू, और पावर का इस्तेमाल किया जा सकता है. इससे सर्वर की लागत कम हो जाती है.
bfcache के लिए notRestoredReasons API, Chrome 123 से रोल आउट किया जा रहा है. इससे साइट के मालिक, फ़ील्ड में इस बारे में जानकारी इकट्ठा कर सकते हैं कि bfcache का इस्तेमाल क्यों नहीं किया जा सका. साइट के मालिक, bfcache के इस्तेमाल को बेहतर बनाने के लिए इसका इस्तेमाल कर सकते हैं. इससे इतिहास के पेजों पर तेज़ी से नेविगेट किया जा सकता है.
display-mode के लिए picture-in-picture वैल्यू से, सीएसएस के खास नियम लिखे जा सकते हैं. ये नियम सिर्फ़ तब लागू होते हैं, जब वेब ऐप्लिकेशन को पिक्चर में पिक्चर मोड में दिखाया जाता है. उदाहरण के लिए:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

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

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

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

नमस्ते, मैं अड्रिआना जारा हूं. Chrome 124 रिलीज़ होने के बाद, मैं आपको बताऊंगी कि Chrome में नया क्या है!