Chrome 110 में नया

Adriana Jara

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

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

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

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

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

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

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

#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.

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

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

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

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

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

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

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

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

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

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

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

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

सदस्यता लें

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

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