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

Chrome 132 में नया क्या है

Pete LePage

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

डायलॉग एलिमेंट ToggleEvent से आपको यह पता चलता है कि <dialog> कब खुला या बंद हुआ.
वीडियो शेयर करने के लिए, खास एलिमेंट कैप्चर करें.
फ़ाइल सिस्टम ऐक्सेस एपीआई अब Android और वेबव्यू में उपलब्ध है
इसके अलावा, और भी बहुत कुछ है.

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

डायलॉग एलिमेंट टॉगल करने से जुड़े इवेंट

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

Chrome 132 में, एक नया ToggleEvent जोड़ा गया है. इसमें वही ToggleEvent शामिल होता है जिसे popover से डिस्पैच किया जाता है. <dialog> एलिमेंट के लिए, जब showModal या show को कॉल किया जाता है, तो <dialog> newState=open के साथ एक ToggleEvent भेजता है. जब कोई <dialog> बंद होता है (फ़ॉर्म, बटन या closewatcher का इस्तेमाल करके), तो वह newState=closed के साथ एक ToggleEvent भेजता है.

const dialog = document.getElementById("myDialog");

// Fired just before dialog is shown/hidden
dialog.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Dialog is about to be shown");
  } else {
    console.log("Dialog is about to be hidden");
  }
});

// Fired just after dialog is shown/hidden
dialog.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Dialog is now visible");
  } else {
    console.log("Dialog is now hidden");
  }
});

एलिमेंट कैप्चर

एलिमेंट कैप्चर करने की सुविधा के साथ ओवरलैप होने वाले एलिमेंट.

वेब प्लैटफ़ॉर्म की मदद से, वेब ऐप्लिकेशन मौजूदा टैब या इलाके का वीडियो ट्रैक कैप्चर कर सकते हैं. साथ ही, Chrome 132 से वेब ऐप्लिकेशन किसी एलिमेंट को कैप्चर कर सकते हैं. यह तरीका खास तौर पर तब मददगार होता है, जब एलिमेंट को इस तरह से पोज़िशन किया गया हो कि वे एक-दूसरे को ओवरलैप कर सकते हों.

const myElem = document.getElementById('elementToShare');

// Request screen sharing
const stream = await navigator.mediaDevices
  .getDisplayMedia({preferCurrentTab: true});
const [videoTrack] = stream.getVideoTracks();

// Restrict the video stream to myElem and its subtree
const restrictionTarget = await RestrictionTarget.fromElement(myElem);
await videoTrack.restrictTo(restrictionTarget);

// Set the video source to my newly restricted stream
video.srcObject = stream;

डेमो देखें.

Android और वेबव्यू पर फ़ाइल सिस्टम ऐक्सेस एपीआई

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

किसी फ़ाइल को पढ़ने के लिए, showOpenFilePicker() बोलें. इससे फ़ाइल पिकर खुलेगा. इसके बाद, आपको एक फ़ाइल हैंडल दिखेगा. इसका इस्तेमाल करके, फ़ाइल को पढ़ा जा सकता है. किसी फ़ाइल को डिस्क पर सेव करने के लिए, पहले से मिले फ़ाइल हैंडल का इस्तेमाल किया जा सकता है. इसके अलावा, नया फ़ाइल हैंडल पाने के लिए, showSaveFilePicker() को कॉल किया जा सकता है.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

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

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

writing-mode सीएसएस प्रॉपर्टी के लिए, sideways-rl और sideways-lr कीवर्ड के साथ काम करने की सुविधा.
कीबोर्ड से फ़ोकस किए जा सकने वाले स्क्रोल कंटेनर का रोल आउट फिर से शुरू हो गया है.
Request और Response इंटरफ़ेस में bytes() तरीका जोड़ें, जो एक प्रॉमिस दिखाता है. यह प्रॉमिस, Uint8Array के साथ रिज़ॉल्व होता है.

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

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

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

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