প্রকাশিত: ১৫ জানুয়ারী, ২০২৫
CSS attr() দিয়ে আপনি আপনার CSS-এ একটি HTML অ্যাট্রিবিউটের মান ব্যবহার করতে পারেন। এখন পর্যন্ত attr() শুধুমাত্র pseudo-elements-এর content প্রোপার্টির মধ্যেই কাজ করত এবং শুধুমাত্র একটি CSS-এ মান পার্স করতে পারত <string> ।
Chrome 133 থেকে উপলব্ধ পুনঃডিজাইন করা attr() ফাংশনটি আরও ক্ষমতা আনলক করে। আপনি এখন যেকোনো CSS প্রোপার্টি সহ attr() ব্যবহার করতে পারেন—কাস্টম প্রোপার্টি সহ—এবং এটি <string> ব্যতীত অন্য ডেটা টাইপগুলিতে মানগুলি পার্স করতে পারে।
উদাহরণ
নিচের উদাহরণে, div এর জন্য color প্রোপার্টির মান data-color অ্যাট্রিবিউট থেকে প্রাপ্ত মান ব্যবহার করে। এই অ্যাট্রিবিউট মানটি attr() এবং type() ব্যবহার করে একটি <color> এ পার্স করা হয়েছে। ফলব্যাক মানটি red এ সেট করা হয়েছে।
<div data-foo="blue">test</div>
div {
color: attr(data-foo type(<color>), red);
}
পরবর্তী উদাহরণে, view-transition-name বৈশিষ্ট্যটি উপাদানটির id বৈশিষ্ট্য দ্বারা নির্ধারিত হয়। বৈশিষ্ট্যটি একটি <custom-ident> এ পার্স করা হয় যা view-transition-name এর জন্য প্রয়োজনীয় প্রকার। attr() ছাড়া আপনাকে প্রতিটি কার্ডের জন্য একটি view-transition-name ঘোষণা করতে হত, যেখানে এখন আপনি এটি একবারে করতে পারেন।
<div class="cards">
<div class="card" id="card-1"></div>
<div class="card" id="card-2"></div>
<div class="card" id="card-3"></div>
<div class="card" id="card-4"></div>
</div>
.card {
view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, etc. */
view-transition-class: card;
}
আপনি CSS ডাইমেনশন ইউনিট বা % অক্ষরের সাথে মেলে এমন যেকোনো শনাক্তকারীতে টাইপ সেট করে মানগুলিকে দৈর্ঘ্যে পার্স করতে পারেন। নিম্নলিখিত উদাহরণে, data-size অ্যাট্রিবিউটটি একটি পিক্সেল মানে পার্স করা হয়।
<div data-size="10">test</div>
div {
font-size: attr(data-size px);
}
কোনও টাইপ ছাড়াই attr() ব্যবহার করার সময় এটি অ্যাট্রিবিউটটিকে একটি CSS স্ট্রিংয়ে পার্স করে, যা পূর্ববর্তী আচরণের মতোই।
আরও জানুন
attr() সম্পর্কে আরও তথ্য স্পেসিফিকেশন এবং MDN তে পাবেন।