আপনার যা জানা দরকার তা এখানে:
- ছবিতে ডকুমেন্ট পিকচার আপনাকে পিকচার-ইন-পিকচার উইন্ডোতে আরও নিয়ন্ত্রণ দেয়।
- CSS নেস্টেড ঘোষণা কিছু জটিল প্রান্তের ক্ষেত্রে ঠিক করে।
- আপনি একাধিক লাইন জুড়ে বিভক্ত উপাদানগুলিতে সজ্জার আচরণ নির্দিষ্ট করতে পারেন।
- এবং আরো অনেক আছে.
আমি পিট লেপেজ। চলুন ডুব দিয়ে দেখি Chrome 130-এ ডেভেলপারদের জন্য নতুন কী আছে।
ডকুমেন্ট পিকচার-ইন-পিকচার
আপনি যখন একটি ব্রাউজার ট্যাব থেকে একটি ভিডিও পপ আউট করতে চান তখন পিকচার-ইন-পিকচার 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 ব্লক প্রত্যাশিত হিসাবে একটি সবুজ পটভূমিতে পরিণত হয়। আপনি যদি নেস্টেড নিয়মগুলির সাথে খালি ঘোষণাগুলিকে ইন্টারলিভ করে থাকেন তবে আপনার কোডটি দুবার পরীক্ষা করা উচিত।
আরও গভীরভাবে ব্যাখ্যার জন্য ব্রামাসের নিবন্ধটি দেখুন CSSNestedDeclarations এর সাথে CSS নেস্টিং উন্নত হয় ।
box-decoration-break
box-decoration-break সিএসএস প্রপার্টি আপনাকে নির্দিষ্ট করতে দেয় যে একাধিক লাইন, কলাম বা পৃষ্ঠা জুড়ে ভাঙার সময় একটি উপাদানের খণ্ডগুলি কীভাবে রেন্ডার করা উচিত।
উদাহরণস্বরূপ, যখন সবকিছু এক লাইনে থাকে তখন এই উপাদানটি দুর্দান্ত দেখায়।
যখন বিষয়বস্তু একাধিক লাইনে বিভক্ত হয়ে যায়, তখন ব্যাকগ্রাউন্ড, বক্স শ্যাডো, বর্ডার ইত্যাদির মতো অলঙ্করণগুলিকে টুকরো টুকরো করা হয়, বরং একটি কঠোর চেহারা তৈরি করে।
box-decoration-break: clone যোগ করে, প্রতিটি টুকরো স্বাধীনভাবে রেন্ডার করা হয়, অনেক সুন্দর চেহারা তৈরি করে।
যদিও এটি পুরোপুরি বেসলাইন নয়, এটি ক্রোম এবং ফায়ারফক্সে উপলব্ধ, এবং সাফারিতে বিক্রেতা উপসর্গযুক্ত।
.bdb-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
আরও বিশদ বিবরণের জন্য MDN-এ box-decoration-break ডক্স এবং রেচেলের পোস্ট ক্রোম 130-এ বক্স-ডেকোরেশন-ব্রেক প্রপার্টি দেখুন।
এবং আরো!
অবশ্যই আরো অনেক আছে.
- কিছু মিথ্যা শুরু হওয়ার পরে, কীবোর্ড ফোকাসযোগ্য স্ক্রোল কন্টেনারগুলি অবশেষে অবতরণ করছে।
- WebGPU ডুয়াল সোর্স ব্লেন্ডিং পায়।
- এবং ওয়েব সিরিয়াল একটি সংযুক্ত বৈশিষ্ট্য পায়।
আরও পড়া
এটি শুধুমাত্র কিছু মূল হাইলাইট কভার করে। Chrome 130-এ অতিরিক্ত পরিবর্তনের জন্য নিম্নলিখিত লিঙ্কগুলি দেখুন।
- Chrome 130 এর জন্য নোট রিলিজ করুন ।
- Chrome DevTools এ নতুন কি আছে (130)
- Chrome 130 এর জন্য ChromeStatus.com আপডেট
- Chromium সোর্স রিপোজিটরি পরিবর্তনের তালিকা
- ক্রোম রিলিজ ক্যালেন্ডার
সদস্যতা
আপ টু ডেট থাকার জন্য, Chrome Developers YouTube চ্যানেলে সাবস্ক্রাইব করুন , এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷
আমি পিট লেপেজ, এবং ক্রোম 131 রিলিজ হওয়ার সাথে সাথেই আমরা আপনাকে জানাতে এখানে থাকব Chrome-এ নতুন কি!