জাভাস্ক্রিপ্ট এবং CSS মিশ্রণ করে ডেভেলপাররা তাদের ওয়েবসাইট কাস্টমাইজ করতে পারেন, সেজন্য নতুন CSS প্রপার্টি विकশিত হয়েছে যা এখন জনপ্রিয় ব্রাউজারগুলোতে সাপোর্ট করে। কিছু লিষ্ট করা হলো নিচে:
focus-within
এটি উপাদানগুলির মধ্যে ফোকাস-অ্যাক্সেসিবিলিটি সমাধান করতে লক্ষ্যবদ্ধ।
scroll-snap
এটি নেটিভ স্ক্রোল এবং ডিসিলারেশন সক্ষম করে।
@media(prefers-*)
ব্যবহারকারীর ডিভাইস পছন্দ অনুযায়ী পেজের UI এবং UX সেট করতে সাহায্য করে, যা উচ্চ স্তরের ব্যক্তিগতকরণ অনুমতি দেয়।
* হতে পারে light-level, forced-colors, color-scheme, contrast, reduced-motion এবং reduced-transparency
position: sticky
UI-কে ভিউপোর্টের মধ্যে রাখতে।
লজিক্যাল প্রপার্টি - স্ট্যান্ডার্ড লেআউটের জন্য
এটি আমাদের উপাদানগুলির মধ্যে এবং চারপাশে ডাইনামিক ডিরেকশনাল স্পেসিং रखতে দেয়।
gap প্রপার্টি
এই প্রপার্টি এখন ফ্লেক্সবক্সের জন্য উপলব্ধ। gap কন্টেইনারের スペেসিং নিজে রাখতে দেয় প্রতিটি চাইল্ড এলিমেন্টের নিজস্ব স্পেসিং না দিয়ে।
backdrop-filter
একটি উপাদানের পেছনের স্টাইল সুবিধাজনকভাবে সেট করার জন্য।
CSS Houdini API
একটি লো-লেভেল API যা ডেভেলপারদের ব্রাউজারকে কাস্টম CSS কীভাবে পড়বে এবং বুঝবে তা বলার ক্ষমতা দেয়। CSS Object Model এখন ডেভেলপারদের জন্য আরও قابل ভোগ্য উপায়ে অ্যাক্সেসযোগ্য। Layout API, Paint API, Parser API, Properties & Values API, AnimationWorklet, Typed OM এবং Font Metrics API এই ক্যাটাগরির অধীনে পড়ে।
aspect-ratio
মিডিয়ার ডাইমেনশন বজায় রাখতে।
size
উচ্চতা এবং প্রস্থ একসাথে একটি অ্যাট্রিবিউটে সেট করতে।
min(), max() এবং clamp()
যেকোনো CSS প্রপার্টিতে কনস্ট্রেইন্ট সেট করতে।
display: outer inner
উপাদান ভালো ফিট করার জন্য দুই-মান সিনট্যাক্স।
list-style-type
লিস্টে কাস্টম স্টাইল যোগ করতে।
CSS modules
এখন আমরা লোকাল বা রিমোট ফাইল থেকে একটি নির্দিষ্ট মডিউল চাওয়ায় JavaScript ব্যবহার করতে পারি।
CSS regions
একটি এলাকাকে কন্টেন্ট দিয়ে পূরণ করতে।
CSS sub-grid
CSS Grid-এ মাইক্রো লেআউটের মধ্যে মাইক্রো লেআউট তৈরি করতে সাহায্য করে।
উদাহরণ
নিচের উদাহরণগুলো এই প্রপার্টিগুলোর কিছু দেখায়:
<!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>আউটপুট
এটি নিচের ফলাফল দেবে:
