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

Chrome 110 में नया

Adriana Jara

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

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

मैं हूं एड्रियाना जारा. चलिए, देखते हैं कि Chrome 110 में डेवलपर के लिए नया क्या है.

:पिक्चर में पिक्चर वाली स्यूडो क्लास

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

अब :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_manager मेनिफ़ेस्ट में शामिल हों.

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

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

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

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

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

`credentialless` iframe.

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

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

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

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

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

और ज़्यादा!

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

वेब एसक्यूएल को अब असुरक्षित कॉन्टेक्स्ट में हटा दिया गया है.

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

FileSystemHandle में अब remove() का तरीका शामिल है.

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

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

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

मैं हूँ एड्रियाना जारा. Chrome 111 के रिलीज़ होते ही, मैं आपको बताऊँगी कि Chrome की नई सुविधाएं क्या हैं!