প্রকাশিত: 15 জানুয়ারী, 2025
পুনরায় ডিজাইন করা attr() ফাংশন
CSS attr() দিয়ে আপনি আপনার CSS-এ একটি HTML অ্যাট্রিবিউটের মান ব্যবহার করতে পারেন। এখন পর্যন্ত attr() শুধুমাত্র ছদ্ম-উপাদানের content বৈশিষ্ট্যের মধ্যে কাজ করে এবং শুধুমাত্র একটি CSS <string> এ মান পার্স করতে পারে।
পুনরায় ডিজাইন করা attr() ফাংশন , Chrome 133 থেকে উপলব্ধ, আরও ক্ষমতা আনলক করে৷ আপনি এখন attr() ব্যবহার করতে পারেন যেকোন CSS প্রপার্টি-এর সাথে কাস্টম প্রপার্টি সহ-এবং এটি <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 স্ট্রিং-এর বৈশিষ্ট্যকে পার্স করে, যা আগের আচরণের মতোই।
আরও জানুন
স্পেসিফিকেশন এবং MDN- এ attr() সম্পর্কে আরও তথ্য খুঁজুন।