यहां आपके जानने योग्य तथ्य दिए गए हैं:
- दस्तावेज़ को पिक्चर में पिक्चर मोड में देखने की सुविधा से, आपको पिक्चर में पिक्चर मोड वाली विंडो पर ज़्यादा कंट्रोल मिलता है.
- सीएसएस नेस्टेड डिक्लेरेशन से, कुछ मुश्किल एज केस ठीक किए जाते हैं.
- एक से ज़्यादा लाइनों में बंटे एलिमेंट पर डेकोरेशन के व्यवहार के बारे में बताया जा सकता है.
- इसके अलावा, और भी कई सुविधाएं उपलब्ध हैं.
मैं पीट लेपेज हूँ. आइए, Chrome 130 में डेवलपर के लिए उपलब्ध नई सुविधाओं के बारे में जानें.
दस्तावेज़ में पिक्चर में पिक्चर की सुविधा
अगर आपको किसी वीडियो को ब्राउज़र टैब से बाहर निकालना है, तो पिक्चर-इन-पिक्चर एपीआई का इस्तेमाल करें. इससे, दूसरी साइटों या ऐप्लिकेशन के साथ इंटरैक्ट करते समय भी वीडियो देखा जा सकता है. हालांकि, इससे सिर्फ़ वीडियो बनाए जा सकते हैं.
दस्तावेज़ के लिए पिक्चर में पिक्चर एपीआई, इस पाबंदी को हटा देता है. इससे आपको पिक्चर में पिक्चर वाली ऐसी विंडो बनाने की सुविधा मिलती है जिसमें कॉन्टेंट पर आपका कंट्रोल होता है. यह कस्टम वीडियो प्लेयर, वीडियो कॉन्फ़्रेंसिंग, और बेहतर ढंग से काम करने में मदद करने वाले ऐप्लिकेशन जैसे कामों के लिए बेहतरीन है. Spotify ने अपने वेब प्लेयर में इसे बहुत अच्छे से लागू किया है. मुझे मौजूदा गाने के आर्टवर्क, चलाने से जुड़े कंट्रोल वाली एक विंडो मिलती है. साथ ही, मैं गाने को आसानी से अपनी पसंदीदा सूची में जोड़ सकता/सकती हूं.
इसका इस्तेमाल करने के लिए, दस्तावेज़ की नई पिक्चर-इन-पिक्चर विंडो का अनुरोध करें. लौटाया गया promise पिक्चर में पिक्चर विंडो JavaScript ऑब्जेक्ट के साथ हल होता है.
इसके बाद, इसका इस्तेमाल करके विंडो में अपना कॉन्टेंट जोड़ें.
async function openDPiP() {
const player = document.querySelector("#player");
const pipWindow = await documentPictureInPicture
.requestWindow();
pipWindow.document.body.append(player);
}
pipButton.addEventListener('click', openDPiP);
नई preferInitialWindowPlacement प्रॉपर्टी की मदद से, Chrome को यह निर्देश दिया जा सकता है कि वह हमेशा पिक्चर-इन-पिक्चर वाली विंडो को डिफ़ॉल्ट पोज़िशन और साइज़ में खोले. ऐसा करने से, पिछली विंडो की पोज़िशन या साइज़ का दोबारा इस्तेमाल नहीं किया जाएगा.
// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
preferInitialWindowPlacement: true,
});
ज़्यादा जानकारी के लिए, फ़्रांस्वा की पोस्ट किसी भी एलिमेंट के लिए पिक्चर में पिक्चर देखें!
सीएसएस के नेस्ट किए गए एलान
सीएसएस नेस्टिंग की मदद से, नियमों को एक-दूसरे के अंदर नेस्ट करके, छोटे सिलेक्टर बनाए जा सकते हैं. साथ ही, कोड को आसानी से पढ़ा जा सकता है और उसे ज़्यादा मॉड्यूलर बनाया जा सकता है. सीएसएस नेस्टिंग, Baseline के तौर पर नई सुविधा के तौर पर उपलब्ध है. हालांकि, यह सुविधा करीब एक साल से उपलब्ध है.
कुछ ऐसे मामले थे जिनमें उम्मीद के मुताबिक नतीजे नहीं मिले. उदाहरण के लिए, इस सीएसएस ब्लॉक में बैकग्राउंड का रंग हरा होना चाहिए, क्योंकि यह सबसे आखिर में आता है. हालांकि, यह लाल रंग का है!
.foo {
width: fit-content;
@media screen {
background-color: red;
}
background-color: green;
}
इस तरह के मुश्किल मामलों को ठीक करने के लिए, सीएसएस वर्किंग ग्रुप ने नेस्ट किए गए एलान का नियम पेश किया है. इसे Chrome 130 में लागू किया गया है. अब, उसी सीएसएस ब्लॉक से उम्मीद के मुताबिक हरे रंग का बैकग्राउंड मिलता है. अगर आपने नेस्ट किए गए नियमों के साथ सामान्य एलान शामिल किए हैं, तो आपको अपने कोड की दोबारा जांच करनी चाहिए.
ज़्यादा जानकारी के लिए, Bramus का लेख CSS नेस्टिंग में CSSNestedDeclarations की मदद से सुधार करना पढ़ें.
box-decoration-break
box-decoration-break सीएसएस प्रॉपर्टी की मदद से, यह तय किया जा सकता है कि किसी एलिमेंट के फ़्रैगमेंट को कई लाइनों, कॉलम या पेजों में तोड़े जाने पर कैसे रेंडर किया जाना चाहिए.
उदाहरण के लिए, जब सभी जानकारी एक ही लाइन में होती है, तब यह एलिमेंट बहुत अच्छा दिखता है.
जब कॉन्टेंट को कई लाइनों में बांटा जाता है, तो बैकग्राउंड, बॉक्स शैडो, बॉर्डर वगैरह जैसे डेकोरेशन कट जाते हैं. इससे कॉन्टेंट का लुक काफ़ी खराब हो जाता है.
box-decoration-break: clone जोड़ने पर, हर फ़्रैगमेंट अलग-अलग रेंडर होता है. इससे इमेज ज़्यादा अच्छी दिखती है.
यह सुविधा, Baseline के तौर पर उपलब्ध नहीं है. हालांकि, यह Chrome और Firefox में उपलब्ध है. साथ ही, Safari में वेंडर के नाम के साथ उपलब्ध है.
.bdb-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
ज़्यादा जानकारी के लिए, MDN पर box-decoration-break के दस्तावेज़ और Rachel की पोस्ट Chrome 130 में box-decoration-break प्रॉपर्टी देखें.
और भी कई सुविधाएं!
बेशक, इसमें और भी बहुत कुछ है.
- कुछ समय तक ठीक से काम न करने के बाद, कीबोर्ड फ़ोकस करने वाले स्क्रोल कंटेनर अब काम कर रहे हैं.
- WebGPU को ड्यूअल सोर्स ब्लेंडिंग की सुविधा मिलती है.
- साथ ही, वेब सीरियल को कनेक्टेड एट्रिब्यूट मिलता है.
इस बारे में और पढ़ें
इसमें सिर्फ़ कुछ मुख्य हाइलाइट शामिल हैं. Chrome 130 में हुए अन्य बदलावों के बारे में जानने के लिए, यहां दिए गए लिंक देखें.
- Chrome 130 के प्रॉडक्ट की जानकारी.
- Chrome DevTools (130) में नया क्या है
- Chrome 130 के लिए ChromeStatus.com के अपडेट
- Chromium के सोर्स रिपॉज़िटरी में किए गए बदलावों की सूची
- Chrome के वर्शन रिलीज़ करने का कैलेंडर
सदस्यता लें
अप-टू-डेट रहने के लिए, Chrome Developers के YouTube चैनल की सदस्यता लें. इससे, जब भी हम कोई नया वीडियो लॉन्च करेंगे, तब आपको ईमेल से सूचना मिल जाएगी.
मैं पीट लेपेज हूं. Chrome 131 के रिलीज़ होते ही, हम आपको यहां बताएंगे कि Chrome में नया क्या है!