ডেভেলপারদের জাভাস্ক্রিপ্ট এবং CSS এর মিশ্রণের সাথে তাদের ওয়েবসাইটগুলি কাস্টমাইজ করতে সাহায্য করার জন্য, নতুন CSS বৈশিষ্ট্যগুলি তৈরি করা হয়েছে এবং এখন জনপ্রিয় ব্রাউজারগুলিকে সমর্থন করে৷ এর মধ্যে কয়েকটি নীচে তালিকাভুক্ত করা হয়েছে -
ফোকাস-ভিতরে
এটির লক্ষ্য উপাদানগুলির মধ্যে ফোকাস-অ্যাক্সেসিবিলিটি সমাধান করা
স্ক্রোল-স্ন্যাপ
এটি নেটিভ স্ক্রোল এবং মন্থরতা সক্ষম করে
@media(prefers-*)
ব্যবহারকারীর ডিভাইস পছন্দ অনুযায়ী পৃষ্ঠার UI এবং UX উভয় সেট করতে সাহায্য করে, যার ফলে, ব্যক্তিগতকরণের উচ্চ স্তরের অনুমতি দেয়৷
* আলো-স্তর, জোর করে-রঙ, রঙ-স্কিম, বৈসাদৃশ্য, হ্রাস-গতি এবং হ্রাস-স্বচ্ছতা বোঝাতে পারে
অবস্থান:স্টিকি
ভিউপোর্টের মধ্যে UI রাখতে।
একটি আদর্শ বিন্যাস থাকার জন্য যৌক্তিক বৈশিষ্ট্য
আমাদের উপাদানগুলির মধ্যে এবং চারপাশে গতিশীল দিকনির্দেশক ব্যবধান থাকতে দেয়৷
গ্যাপ প্রপার্টি
এই সম্পত্তি এখন flexbox জন্য উপলব্ধ. ফাঁক প্রতিটি চাইল্ড এলিমেন্টের নিজস্ব ব্যবধানের পরিবর্তে কন্টেইনারটিকে ব্যবধানের মালিক হতে সেট করে।
ব্যাকফ্রপ-ফিল্টার
সুবিধাজনকভাবে একটি উপাদানের পিছনে শৈলী সেট করার জন্য।
CSS Houdini API
একটি নিম্ন-স্তরের API যা ডেভেলপারদের ব্রাউজারকে বলার ক্ষমতা দেয় যে তারা কীভাবে কাস্টম CSS পড়তে এবং বুঝতে চায়। CSS অবজেক্ট মডেলটি এখন ডেভেলপারদের কাছে আরও বেশি ব্যবহারযোগ্য উপায়ে অ্যাক্সেসযোগ্য। Layout API, Paint API, Parser API, Properties &Values API, AnimationWorklet, Typed OM এবং Font Metrics API এর অধীনে আসে।
আকৃতি-অনুপাত
মিডিয়ার মাত্রা বজায় রাখুন
আকার
একটি বৈশিষ্ট্যে উচ্চতা এবং প্রস্থ সেট করুন
মিনিট(), সর্বোচ্চ() এবং ক্ল্যাম্প()
যেকোন CSS প্রপার্টিতে সীমাবদ্ধতা সেট করুন
প্রদর্শন:বাইরের ভিতরের
ভাল ফিটিং উপাদানের জন্য দুটি মূল্যবান বাক্য গঠন
লিস্ট-স্টাইল-টাইপ
তালিকায় কাস্টম শৈলী যোগ করুন
সিএসএস মডিউল
আমরা এখন স্থানীয় বা দূরবর্তী ফাইল থেকে একটি নির্দিষ্ট মডিউলের জন্য জিজ্ঞাসা করতে JavaScript ব্যবহার করতে পারি
CSS অঞ্চলগুলি
বিষয়বস্তু দিয়ে একটি এলাকা পূরণ করুন
CSS সাব-গ্রিড
CSS গ্রিডে মাইক্রো লেআউট সহ মাইক্রো লেআউট তৈরি করতে সাহায্য করে।
উদাহরণ
নিম্নলিখিত উদাহরণগুলি এই বৈশিষ্ট্যগুলির মধ্যে কিছু দেখায় -
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 2%;
text-align: center;
}
:is(header, main, footer) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:-webkit-any(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:-moz-any(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:matches(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
</style>
</head>
<body>
<header>
<span>:is() operator is</span>
</header>
<div>
<span>DEMO</span>
<span>Alt + F4</span>
<span>Enter</span>
</div>
<section>
<span>Howzit?</span>
</section>
</body>
</html> আউটপুট
এটি নিম্নলিখিত ফলাফল তৈরি করবে -
উদাহরণ
<html>
<head>
<style>
#parent {
margin: 8%;
background-image: url("https://images.unsplash.com/photo-1611081352477- 9f1477ec09ae?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=400");
padding: 2%;
width: 200px;
height: 200px;
box-shadow: 0 0 20px rgba(100,0,40,0.8);
}
h2 {
margin-top: 20vh;
backdrop-filter: invert(1);
}
</style>
</head>
<body>
<div id="parent">
<div>
<h2>Watch this cool effect</h2>
</div>
</div>
</body> আউটপুট
এটি নিম্নলিখিত ফলাফল তৈরি করবে -
