আপনার যা জানা প্রয়োজন তা এখানে দেওয়া হল:
- ডকুমেন্ট পিকচার-ইন-পিকচার আপনাকে পিকচার-ইন-পিকচার উইন্ডোর উপর আরও নিয়ন্ত্রণ দেয়।
- CSS নেস্টেড ঘোষণা কিছু কঠিন এজ কেস সমাধান করে।
- একাধিক লাইন জুড়ে বিভক্ত এলিমেন্টের সজ্জার আচরণ আপনি নির্দিষ্ট করতে পারবেন।
- এবং আরও অনেক কিছু আছে।
আমি পিট লেপেজ। আসুন, Chrome 130-এ ডেভেলপারদের জন্য নতুন কী কী আছে তা দেখে নেওয়া যাক।
ডকুমেন্ট পিকচার-ইন-পিকচার
আপনি যদি কোনও ভিডিওকে ব্রাউজার ট্যাব থেকে পপ-আউট করতে চান, তাহলে ছবির-মধ্যে-ছবি API খুব ভাল কাজ করে। এর ফলে, আপনি অন্যান্য সাইট বা অ্যাপ্লিকেশনের সাথে ইন্টার্যাক্ট করার সময়ও ভিডিওটি দেখতে পাবেন। তবে এটি শুধুমাত্র ভিডিও তৈরি করে।
ডকুমেন্ট পিকচার-ইন-পিকচার API সেই বিধিনিষেধ সরিয়ে দেয়, এর ফলে আপনি এমন পিকচার-ইন-পিকচার উইন্ডো তৈরি করতে পারেন যেখানে কন্টেন্টের উপর আপনার নিয়ন্ত্রণ থাকে। কাস্টম ভিডিও প্লেয়ার, ভিডিও কনফারেন্সিং এবং প্রোডাক্টিভিটি অ্যাপের মতো জিনিসের জন্য এটি খুবই উপযোগী। Spotify তাদের ওয়েব প্লেয়ারে যেভাবে এটি ব্যবহার করেছে তা আমার খুব ভালো লেগেছে। আমি বর্তমান গানের আর্টওয়ার্ক, প্লে কন্ট্রোল সহ একটি উইন্ডো দেখতে পাই এবং সহজেই গানটি আমার পছন্দের তালিকায় যোগ করতে পারি।
এটি ব্যবহার করতে, একটি নতুন ডকুমেন্ট পিকচার-ইন-পিকচার উইন্ডোর জন্য অনুরোধ করুন। রিটার্ন করা
promise পিকচার-ইন-পিকচার উইন্ডো জাভাস্ক্রিপ্ট অবজেক্টের সাথে সমাধান করে।
তারপরে, উইন্ডোতে আপনার কন্টেন্ট যোগ করতে সেটি ব্যবহার করুন।
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,
});
আরও অনেক বিবরণের জন্য François-এর পোস্ট যেকোনও এলিমেন্টের জন্য ছবি-ইন-ছবি দেখুন!
CSS নেস্টেড ঘোষণা
CSS নেস্টিং ছোট সিলেক্টর, সহজে পড়া এবং আরও মডুলারিটির জন্য অন্যের মধ্যে নিয়ম নেস্ট করার অনুমতি দেয়। CSS নেস্টিং হল বেসলাইন, নতুন উপলভ্য এবং এটি প্রায় এক বছর ধরে উপলভ্য আছে।
কিছু প্রান্তিক কেস প্রত্যাশা অনুযায়ী কাজ করেনি। যেমন, নিচে দেওয়া CSS ব্লকের ক্ষেত্রে, আপনি আশা করবেন যে ব্যাকগ্রাউন্ডের রঙ সবুজ হবে, কারণ এটি শেষে আছে, কিন্তু এটি লাল!
.foo {
width: fit-content;
@media screen {
background-color: red;
}
background-color: green;
}
এই ধরনের এজ কেস সমাধান করতে, CSS ওয়ার্কিং গ্রুপ নেস্টেড ডিক্লারেশন নিয়ম চালু করেছে, যা Chrome 130-এ প্রয়োগ করা হয়েছে। এখন, সেই একই CSS ব্লক প্রত্যাশিতভাবে সবুজ ব্যাকগ্রাউন্ড তৈরি করে। আপনি যদি নেস্টেড নিয়মের সাথে বেয়ার ঘোষণাগুলি ইন্টারলিভ করে থাকেন, তাহলে আপনাকে নিজের কোড ডাবল-চেক করতে হবে।
আরও বিস্তারিত ব্যাখ্যার জন্য Bramus-এর নিবন্ধ
CSS নেস্টিং CSSNestedDeclarations
পড়ে দেখুন।
box-decoration-break
box-decoration-break CSS প্রপার্টি আপনাকে নির্দিষ্ট করতে দেয় যে একাধিক লাইন, কলাম বা
পৃষ্ঠা জুড়ে ভেঙে গেলে কোনও এলিমেন্টের
ফ্র্যাগমেন্ট কীভাবে রেন্ডার করা উচিত।
যেমন, সবকিছু এক লাইনে থাকলে এই এলিমেন্টটি দেখতে খুব ভালো লাগে।
কন্টেন্ট একাধিক লাইন জুড়ে স্প্লিট হয়ে গেলে, ব্যাকগ্রাউন্ড, বক্স শ্যাডো, বর্ডার ইত্যাদি সাজসজ্জা কেটে দেওয়া হয়, যার ফলে একটি অস্বাভাবিক লুক তৈরি হয়।
box-decoration-break: clone যোগ করার ফলে, প্রতিটি ফ্র্যাগমেন্ট আলাদাভাবে রেন্ডার করা হয়
এবং এর ফলে অনেক বেশি সুন্দর লুক তৈরি হয়।
এটি যদিও ঠিক বেসলাইন নয়, তবে Chrome ও Firefox-এ উপলভ্য এবং Safari-তে ভেন্ডর প্রিফিক্স করা আছে।
.bdb-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
আরও তথ্যের জন্য
box-decoration-break MDN-এ ডকুমেন্ট
এবং Rachel-এর পোস্ট Chrome 130-এ box-decoration-break প্রপার্টি
দেখুন।
এবং আরও অনেক কিছু!
অবশ্যই আরও অনেক কিছু আছে।
- কয়েকবার ব্যর্থ চেষ্টার পরে, কীবোর্ড ফোকাস করা যায় এমন স্ক্রল কন্টেনার অবশেষে চালু করা হচ্ছে।
- WebGPU-তে ডুয়াল সোর্স ব্লেন্ডিং পাওয়া যায়।
- এবং ওয়েব সিরিয়ালে একটি কানেক্ট করা অ্যাট্রিবিউট থাকে।
আরও পড়ুন
এতে শুধু কিছু গুরুত্বপূর্ণ হাইলাইট কভার করা হয়েছে। Chrome 130-এ অতিরিক্ত পরিবর্তনের জন্য নিম্নলিখিত লিঙ্কগুলি দেখুন।
- Chrome 130-এর রিলিজ নোট।
- Chrome DevTools (130)-এ নতুন কী কী আছে
- Chrome 130-এর জন্য ChromeStatus.com আপডেট
- Chromium সোর্স রিপোজিটরি পরিবর্তন তালিকা
- Chrome রিলিজ ক্যালেন্ডার
সাবস্ক্রাইব করুন
আপ-টু-ডেট থাকতে, Chrome Developers YouTube চ্যানেল-এ সাবস্ক্রাইব করুন এবং আমরা নতুন ভিডিও লঞ্চ করলেই আপনি ইমেল বিজ্ঞপ্তি পাবেন।
আমি পিট লেপেজ এবং Chrome 131 রিলিজ করার সাথে সাথেই, Chrome-এ নতুন কী কী আছে তা জানাতে আমরা এখানে উপস্থিত থাকব!