यहां कुछ ज़रूरी जानकारी दी गई है:
- डायलॉग एलिमेंट 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 132 के रिलीज़ नोट.
- Chrome DevTools (132) में नया क्या है.
- Chrome 132 के लिए ChromeStatus.com पर अपडेट.
- Chrome के रिलीज़ कैलेंडर.
सदस्यता लें
अप-टू-डेट रहने के लिए, Chrome डेवलपर के YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.
Chrome 133 रिलीज़ होने के बाद, हम आपको बताएंगे कि Chrome में नया क्या है!