Chrome 130 में नया

Pete LePage

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

• दस्तावेज़ के लिए पिक्चर में पिक्चर सुविधा की मदद से, पिक्चर में पिक्चर विंडो को ज़्यादा बेहतर तरीके से कंट्रोल किया जा सकता है.
• नेस्ट किए गए सीएसएस एलान, कुछ मुश्किल मामलों को ठीक करते हैं.
• एक से ज़्यादा लाइनों में बंटे एलिमेंट पर डेकोरेशन के व्यवहार को तय किया जा सकता है.
• इसके अलावा, और भी बहुत कुछ है.

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

दस्तावेज़ में पिक्चर में पिक्चर

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

दस्तावेज़ के लिए पिक्चर में पिक्चर एपीआई, इस पाबंदी को हटा देता है. इससे, आपको पिक्चर में पिक्चर विंडो बनाने की सुविधा मिलती है, जिसमें आपके पास कॉन्टेंट को कंट्रोल करने का विकल्प होता है. यह कस्टम वीडियो प्लेयर, वीडियो कॉन्फ़्रेंसिंग, और बेहतर ढंग से काम करने में मदद करने वाले ऐप्लिकेशन जैसी चीज़ों के लिए बेहतरीन है. मुझे 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,
});

ज़्यादा जानकारी के लिए, फ़्रांकोइस की पोस्ट किसी भी एलिमेंट के लिए पिक्चर में पिक्चर देखें!

सीएसएस नेस्ट किए गए एलान

सीएसएस नेस्टिंग की मदद से, छोटे सिलेक्टर बनाए जा सकते हैं. साथ ही, नियमों को एक-दूसरे के अंदर नेस्ट करके, उन्हें आसानी से पढ़ा जा सकता है और ज़्यादा मॉड्यूलर बनाया जा सकता है. सीएसएस नेस्टिंग, बेसलाइन के तौर पर हाल ही में उपलब्ध है. यह सुविधा करीब एक साल से उपलब्ध है.

कुछ ऐसे मामले थे जो उम्मीद के मुताबिक काम नहीं किए. उदाहरण के लिए, यहां दिए गए सीएसएस ब्लॉक में, आपको बैकग्राउंड का रंग हरा दिखना चाहिए, क्योंकि यह आखिर में आता है. हालांकि, यह लाल है!

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

इस तरह के एज केस को ठीक करने के लिए, सीएसएस वर्किंग ग्रुप ने नेस्ट किए गए एलान के नियम को पेश किया है. इसे Chrome 130 में लागू किया गया है. अब, उसी सीएसएस ब्लॉक के नतीजे, उम्मीद के मुताबिक हरे रंग के बैकग्राउंड में दिखते हैं. अगर नेस्ट किए गए नियमों के साथ, सादे एलान को इंटरलेव किया जा रहा था, तो आपको अपने कोड की दोबारा जांच करनी चाहिए.

ज़्यादा जानकारी के लिए, Bramus का लेख पढ़ें CSSNestedDeclarations की मदद से सीएसएस नेस्टिंग को बेहतर बनाया जा सकता है.

box-decoration-break

box-decoration-break CSS प्रॉपर्टी की मदद से, यह तय किया जा सकता है कि किसी एलिमेंट के कई लाइनों, कॉलम या पेजों में बंट जाने पर, उसके फ़्रैगमेंट को कैसे रेंडर किया जाए.

उदाहरण के लिए, जब सभी एलिमेंट एक लाइन में होते हैं, तो यह एलिमेंट बेहतरीन दिखता है.

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

box-decoration-break: clone जोड़ने पर, हर फ़्रैगमेंट को अलग से रेंडर किया जाता है. इससे, फ़्रेम का लुक बेहतर होता है.

यह पूरी तरह से बेसलाइन नहीं है, लेकिन यह Chrome और Firefox में उपलब्ध है. साथ ही, Safari में यह वेंडर प्रीफ़िक्स के तौर पर उपलब्ध है.

.bdb-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

ज़्यादा जानकारी के लिए, box-decoration-break MDN पर मौजूद दस्तावेज़ और रीचेल की पोस्ट Chrome 130 में box-decoration-break प्रॉपर्टी देखें.

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

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

• कुछ बार कोशिश करने के बाद, कीबोर्ड पर फ़ोकस करने वाले स्क्रोल कंटेनर आखिरकार लॉन्च हो रहे हैं.
• WebGPU में ड्यूअल सोर्स ब्लेंडिंग की सुविधा मिलती है.
• साथ ही, वेब सीरियल को कनेक्ट किया गया एट्रिब्यूट मिलता है.

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

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

• Chrome 130 के लिए रिलीज़ नोट.
• Chrome DevTools (130) में नया क्या है
• Chrome 130 के लिए ChromeStatus.com से जुड़े अपडेट
• Chromium सोर्स रिपॉज़िटरी में हुए बदलावों की सूची
• Chrome के रिलीज़ कैलेंडर की जानकारी

सदस्यता लें

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

मेरा नाम पीट लेपेज है. Chrome 131 के रिलीज़ होने के बाद, हम आपको बताएंगे कि Chrome में नया क्या है!