Chrome 132-এ নতুন

পিট লেপেজ

আপনার যা জানা দরকার তা এখানে:

আমি পিট লেপেজ। চলুন ডুব দিয়ে দেখি Chrome 132-এ ডেভেলপারদের জন্য নতুন কী আছে।

ডায়ালগ উপাদান টগল ইভেন্ট

<dialog> উপাদানটি HTML-এ যেকোনো ধরনের ডায়ালগ উপস্থাপনের জন্য একটি দরকারী উপাদান। এটি বেসলাইন ব্যাপকভাবে উপলব্ধ, যার মানে এটি সমস্ত ব্রাউজার জুড়ে কাজ করে৷ দুর্ভাগ্যবশত, প্রাথমিক বাস্তবায়নে ডায়ালগ খোলা বা বন্ধ হওয়ার সময় সনাক্ত করার একটি সরাসরি উপায় অন্তর্ভুক্ত ছিল না।

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 এবং WebView-এ ফাইল সিস্টেম অ্যাক্সেস API

ফাইল সিস্টেম অ্যাক্সেস API কিছু সময়ের জন্য Chrome ডেস্কটপে উপলব্ধ রয়েছে এবং ওয়েব অ্যাপগুলিকে ব্যবহারকারীদের স্থানীয় ফাইল সিস্টেমের ফাইলগুলির সাথে ইন্টারঅ্যাক্ট করার অনুমতি দেয়৷ Chrome 132 থেকে, API এখন Android এবং WebViews-এ উপলব্ধ।

একটি ফাইল কল পড়ার জন্য showOpenFilePicker() , যা একটি ফাইল পিকার দেখায়, তারপর একটি ফাইল হ্যান্ডেল ফেরত দেয় যা আপনি ফাইলটি পড়ার জন্য ব্যবহার করতে পারেন। ডিস্কে একটি ফাইল সংরক্ষণ করতে, আপনি হয় সেই ফাইল হ্যান্ডেলটি ব্যবহার করতে পারেন যা আপনি আগে পেয়েছিলেন বা একটি নতুন ফাইল হ্যান্ডেল পেতে showSaveFilePicker() কল করতে পারেন।

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

এবং আরো!

অবশ্যই আরো অনেক আছে.

আরও পড়া

এটি শুধুমাত্র কিছু মূল হাইলাইট কভার করে। Chrome 132-এ অতিরিক্ত পরিবর্তনের জন্য নিম্নলিখিত লিঙ্কগুলি দেখুন।

সদস্যতা

আপ টু ডেট থাকার জন্য, Chrome Developers YouTube চ্যানেলে সাবস্ক্রাইব করুন , এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷

Chrome 133 রিলিজ হওয়ার সাথে সাথে, Chrome-এ নতুন কী আছে তা জানাতে আমরা এখানেই থাকব!