আপনার যা জানা দরকার তা এখানে:
- ব্যবহারকারীর উৎপাদনশীলতা বাড়াতে ডকুমেন্ট পিকচার ইন পিকচার এপিআই ব্যবহার করুন।
- DevTools-এ অনুপস্থিত স্টাইলশীটগুলি ডিবাগ করা এখন সহজ
- এবং আরো অনেক আছে.
আমি আদ্রিয়ানা জারা। চলুন ডুব দিয়ে দেখি Chrome 116-এ ডেভেলপারদের জন্য নতুন কী আছে।
ডকুমেন্ট পিকচার-ইন-পিকচার API।
ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই একটি সর্বদা-অন-টপ উইন্ডো খোলা সম্ভব করে যেটি নির্বিচারে HTML বিষয়বস্তু দিয়ে তৈরি করা যেতে পারে।
ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই-এর পিকচার-ইন-পিকচার উইন্ডোটি window.open() ব্যবহার করে খোলা একটি ফাঁকা একই-অরিজিন উইন্ডোর মতো, কিছু পার্থক্য সহ:
- পিকচার-ইন-পিকচার উইন্ডো অন্যান্য উইন্ডোর উপরে ভাসছে।
- পিকচার-ইন-পিকচার উইন্ডো কখনই খোলার উইন্ডোর বাইরে থাকে না।
- পিকচার-ইন-পিকচার উইন্ডোটি নেভিগেট করা যাবে না।
- পিকচার-ইন-পিকচার উইন্ডোর অবস্থান ওয়েবসাইট দ্বারা সেট করা যাবে না।
নিচের HTML একটি পিকচার-ইন-পিকচার উইন্ডোতে ভিডিও প্লেয়ার খুলতে একটি কাস্টম ভিডিও প্লেয়ার এবং একটি বোতাম উপাদান সেট আপ করে।
<div id="playerContainer">
<div id="player">
<video id="video"></video>
</div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>
যখন ব্যবহারকারী একটি ফাঁকা পিকচার-ইন-পিকচার উইন্ডো খুলতে বোতামে ক্লিক করেন তখন নিম্নলিখিত জাভাস্ক্রিপ্টটি documentPictureInPicture.requestWindow() কল করে। প্রত্যাবর্তিত প্রতিশ্রুতি একটি পিকচার-ইন-পিকচার উইন্ডো জাভাস্ক্রিপ্ট অবজেক্টের সাথে সমাধান করে। ভিডিও প্লেয়ারটি append() ব্যবহার করে সেই উইন্ডোতে সরানো হয়।
pipButton.addEventListener('click', async () => {
const player = document.querySelector("#player");
// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow();
// Move the player to the Picture-in-Picture window.
pipWindow.document.body.append(player);
});
আরও বিশদ এবং উদাহরণের জন্য যেকোন উপাদানের জন্য পিকচার-ইন-ছবি দেখুন।
DevTools স্টাইলশীট ডিবাগিং উন্নতি অনুপস্থিত.
DevTools অনুপস্থিত স্টাইলশীটগুলির সমস্যা চিহ্নিত করতে এবং ডিবাগ করার জন্য অনেকগুলি উন্নতি করেছে৷
প্রথম: উত্স > পৃষ্ঠা ট্রি এখন শুধুমাত্র সফলভাবে স্থাপন করা এবং লোড করা স্টাইলশীটগুলি দেখায় যাতে বিভ্রান্তি কম হয়।
এছাড়াও উত্স > সম্পাদক এখন ব্যর্থ, @import , url() , এবং href বিবৃতিগুলির পাশে ইনলাইন ত্রুটি টুলটিপগুলিকে আন্ডারলাইন করে এবং দেখায়৷
- কনসোল , ব্যর্থ অনুরোধের লিঙ্কগুলি ছাড়াও, এখন সঠিক লাইনের লিঙ্ক সরবরাহ করে যা একটি স্টাইলশীট উল্লেখ করে যা লোড হতে ব্যর্থ হয়েছে।
নেটওয়ার্ক প্যানেল ধারাবাহিকভাবে ইনিশিয়েটর কলামকে সঠিক লাইনের লিঙ্ক সহ পপুলেট করে যা একটি স্টাইলশীট উল্লেখ করে যা লোড হতে ব্যর্থ হয়।
ইস্যু প্যানেল সমস্ত স্টাইলশীট লোডিং সমস্যা তালিকাভুক্ত করে, যার মধ্যে ভাঙা URL, ব্যর্থ অনুরোধ এবং ভুল @import স্টেটমেন্ট রয়েছে।
Chrome 116-এ DevTools-এ সমস্ত বিবরণ এবং আরও তথ্যের জন্য DevTools-এ নতুন কী আছে তা দেখুন।
এবং আরো!
অবশ্যই আরো অনেক আছে.
- মোশন পাথ লেখকদের যেকোন গ্রাফিকাল অবজেক্টের অবস্থান এবং ডেভেলপারের দ্বারা নির্দিষ্ট একটি পাথ বরাবর এটিকে অ্যানিমেট করতে দেয়।
-
displayএবংcontent-visibilityবৈশিষ্ট্যগুলি এখন কীফ্রেম অ্যানিমেশনগুলিতে সমর্থিত, যা প্রস্থান অ্যানিমেশনগুলিকে সম্পূর্ণরূপে CSS-এ যোগ করার অনুমতি দেয়। - ফেচ API এখন Bring Your Own Buffer Readers এর সাথে ব্যবহার করা যেতে পারে, আবর্জনা সংগ্রহের ওভারহেড এবং কপিগুলি হ্রাস করে এবং ব্যবহারকারীদের জন্য প্রতিক্রিয়াশীলতা উন্নত করে৷
আরও পড়া
এটি শুধুমাত্র কিছু মূল হাইলাইট কভার করে। Chrome 116-এ অতিরিক্ত পরিবর্তনের জন্য নীচের লিঙ্কগুলি দেখুন৷
- Chrome DevTools এ নতুন কি আছে (116)
- Chrome 116 অপসারণ এবং অপসারণ
- Chrome 116-এর জন্য ChromeStatus.com আপডেট
- Chromium সোর্স রিপোজিটরি পরিবর্তনের তালিকা
- ক্রোম রিলিজ ক্যালেন্ডার
সাবস্ক্রাইব
আপ টু ডেট থাকার জন্য, Chrome Developers YouTube চ্যানেলে সাবস্ক্রাইব করুন , এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷
Yo soy Adriana Jara, এবং Chrome 117 রিলিজ হওয়ার সাথে সাথে, Chrome-এ নতুন কী আছে তা জানাতে আমি এখানেই থাকব!