‏attr() و کوئری استایل کانتینر: یه نگاه تازه به CSS

نویسنده تو این مقاله می‌گه ترکیب دو ویژگی جدید CSS یعنی attr() پیشرفته و کوئری‌های استایل کانتینر، روش طراحی کامپوننت‌های قابل‌تطبیق رو کاملا عوض می‌کنه. قبلا attr() فقط تو content شبه‌المان‌ها کار می‌کرد و همیشه یه رشته بدون کوتیشن برمی‌گردوند؛ نمی‌شد ازش برای عرض، پدینگ یا رنگ استفاده کرد. با استاندارد جدید CSS Values and Units Level ۵، حالا attr() رو هر ویژگی‌ای کار می‌کنه و می‌شه نوع داده (عدد، طول، آی‌دنتیفایر) و یه مقدار پیش‌فرض هم بهش داد.

کوئری‌های استایل کانتینر هم برخلاف کوئری‌های اندازه (که عرض یا ارتفاع رو چک می‌کنن)، مقدار یه property محاسبه‌شده رو تو والد چک می‌کنن. نکته مهم اینه که برای این کار لازم نیست والد رو container-type بدی؛ هر المان والدی خودبه‌خود می‌تونه به‌عنوان container استایل عمل کنه و فرزند تو درخت DOM دنبال نزدیک‌ترین جدی می‌گرده که اون متغیر رو تعریف کرده باشه.

برای نمونه، تو یه گرید ساده، تعداد ستون‌ها و فاصله بینشون مستقیم از رو اتریبیوت‌های HTML خونده می‌شه، بدون نیاز به کلاس‌های جدا برای هر تعداد ستون:

.grid {
  grid-template-columns: repeat(attr(data-repeat type(<number>), 3), 1fr);
  gap: attr(data-gap cqi, 2cqi);
}

اینجا data-repeat مقدارش رو به‌عنوان عدد می‌ده به repeat() و data-gap هم واحد cqi (واحد اینلاین کوئری کانتینر) می‌گیره، یعنی فاصله‌ها به اندازه کانتینر وابسته‌ان نه به viewport.

دومین ایده، یه کنترل‌کننده تراکم برای کارت‌هاست: به‌جای نوشتن سه ست جدا از مقادیر برای حالت فشرده، معمولی و باز، نویسنده یه متغیر --density-scale تعریف می‌کنه که پدینگ، اندازه آواتار، فونت و باقی مقادیر رو با ضرب در همون یه عدد حساب می‌کنه. بعد با ترکیب :has() روی چند تا رادیو باتن و یه کوئری استایل کانتینر، فقط با عوض کردن یه متغیر تو والد، همه این مقادیر با هم عوض می‌شن. نویسنده می‌گه این دموها فعلا فقط رو Chrome، Edge و فایرفاکس جواب می‌دن.

نکات کلیدی:

• attr() پیشرفته حالا رو هر ویژگی CSS کار می‌کنه و نوع داده و مقدار پیش‌فرض هم می‌گیره
• کوئری‌های استایل کانتینر نیازی به container-type روی والد ندارن
• تو دموی گرید، attr(data-repeat type(), 3) تعداد ستون‌ها رو از HTML می‌خونه
• تو دموی کارت، یه متغیر --density-scale جای سه ست جدا مقدار برای حالت‌های فشرده/معمولی/باز رو می‌گیره
• این دموها فعلا فقط رو Chrome، Edge و فایرفاکس کار می‌کنن