Chrome 130 में नया

Pete LePage

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

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

पिक्चर में पिक्चर

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

Spotify की पिक्चर में पिक्चर विंडो

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

कोई लाइन ब्रेक नहीं

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

स्लाइस के साथ लाइन ब्रेक

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

क्लोन के साथ लाइन ब्रेक

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 Developers के YouTube चैनल की सदस्यता लें. हम नया वीडियो लॉन्च होने पर, आपको ईमेल से सूचना देंगे.

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