Chrome 110 में नया

Adriana Jara

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

  • नई :picture-in-picture स्यूडो क्लास की मदद से, पिक्चर में पिक्चर वाले एलिमेंट में पसंद के मुताबिक स्टाइल जोड़ें.
  • अपने मेनिफ़ेस्ट में launch_handler की मदद से, वेब ऐप्लिकेशन के लॉन्च होने का तरीका सेट करें.
  • तीसरे पक्ष के ऐसे कॉन्टेंट को एम्बेड करने के लिए, iframe में credentialless एट्रिब्यूट का इस्तेमाल करें जो क्रॉस ओरिजन एम्बेडर नीति सेट नहीं करता
  • इसके अलावा, और भी सुविधाएं हैं.

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

:picture-in-picture स्यूडो क्लास

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

अब :picture-in-picture सीएसएस स्यूडो-क्लास की मदद से, एलिमेंट में स्टाइल जोड़ी जा सकती हैं, ताकि उपयोगकर्ता अनुभव को बेहतर बनाया जा सके.

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

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

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

उदाहरण के साथ प्रयोग करें और पिक्चर में पिक्चर वाले वीडियो के अनुभव को बेहतर बनाएं.

launch_handler मेनिफ़ेस्ट में शामिल सदस्य.

Launch Handler API की मदद से, यह कंट्रोल किया जा सकता है कि आपका वेब ऐप्लिकेशन कैसे लॉन्च होगा. उदाहरण के लिए, यह कि वह किसी मौजूदा या नई विंडो का इस्तेमाल करता है या नहीं. साथ ही, यह भी कि चुनी गई विंडो को लॉन्च यूआरएल पर नेविगेट किया जाता है या नहीं.

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

अब launch_handler मेनिफ़ेस्ट में शामिल सदस्य का इस्तेमाल करके, वेब ऐप्लिकेशन अपने लॉन्च व्यवहार को पसंद के मुताबिक बना सकते हैं.

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

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

credentialless iframes.

क्रॉस-ऑरिजिन आइसोलेशन की सबसे बड़ी समस्या यह है कि सभी क्रॉस-ऑरिजिन iframes को COEP और CORP को डिप्लॉय करना होगा . उन हेडर के बिना, ब्राउज़र किसी iframe को लोड नहीं करेगा.

credentialless एट्रिब्यूट की मदद से, तीसरे पक्ष के ऐसे iframe को एम्बेड किया जा सकता है जो ये हेडर सेट नहीं करते.

credentialless के साथ, iframe किसी दूसरे खाली कॉन्टेक्स्ट से लोड होता है. खास तौर पर, यह कुकी के बिना लोड होता है. iframe, खाली कुकी जर्स से शुरू होता है.

इसी तरह, LocalStorage, CacheStorage वगैरह जैसे स्टोरेज एपीआई, डेटा को नए इफ़ेमरल पार्टीशन में लोड और सेव करते हैं. टॉप-लेवल दस्तावेज़ को अनलोड करने के बाद, यह पूरा स्टोरेज खाली हो जाता है. इससे सीओईपी से जुड़ी पाबंदी हटाई जा सकती है.

अपने iframes में तीसरे पक्ष का कॉन्टेंट लोड करने के लिए, credentialless का सुरक्षित तरीके से इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, यह लेख पढ़ें.

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

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

Web SQL को अब असुरक्षित कॉन्टेक्स्ट से हटा दिया गया है.

सीएसएस initial-letter प्रॉपर्टी की मदद से, यह सेट किया जा सकता है कि शुरुआती अक्षर को टेक्स्ट की अगली लाइनों में कितनी लाइनों के बाद ले जाना है.

FileSystemHandle में अब remove() मेथड शामिल है.

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

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

सदस्यता लें

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

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