‏۱۲ قابلیت CSS که ابزارها رو بازنشسته کردن

حرف اصلی مقاله اینه که بیشتر ابزارهای CSS که بهشون عادت کردیم، چون زبان یه چیزی کم داشت به وجود اومدن، و تو ۲۰۲۶ دیگه خود مرورگر همون کار رو می‌کنه. نویسنده دوازده مورد رو با همون ترفندی که بازنشستش کرده و وضعیت پشتیبانیش (به تاریخ ۲۱ سپتامبر ۲۰۲۶) آورده. «Baseline Widely available» یعنی قابلیت حداقل ۳۰ ماهه تو کروم و اج و فایرفاکس و سافاری هست و «Newly available» یعنی همه‌شون تو نسخهٔ فعلی دارنش ولی نصب‌های قدیمی‌تر هنوز هستن.

نستینگ بومی همون دلیلیه که خیلی پروژه‌ها اول کار Sass نصب می‌کردن، و حالا مرورگر خودش بازش می‌کنه؛ از ژوئن ۲۰۲۶ Widely available ـه. گیرش همون عادت قدیمیه: &__title اسم کلاس .card__title نمی‌سازه، چون & یه سلکتوره نه متن. دومی :has() ـه که اجازه می‌ده تو درخت بالا رو نگاه کنی، کاری که قبلاً جاوااسکریپت باید با کلاس زدن روی wrapper انجام می‌داد:

.field:has(input:invalid) {
  border-color: crimson;
}

.field:has(input:focus) label {
  color: royalblue;
}

سومی container query ـه. مدیا کوئری می‌پرسه viewport چقدر پهنه، ولی یه کارت تو سایدبار باریک و همون کارت تو ستون اصلی جواب یکسان می‌گیرن؛ برای همین ملت ResizeObserver می‌نوشتن. حالا سؤال از خودِ کانتینر پرسیده می‌شه، و واحد cqi هم یک درصد از عرضِ کانتینره، پس اندازهٔ فونت رو هم می‌شه به جای المنت گره زد:

.sidebar,
.main {
  container-type: inline-size;
}

@container (min-width: 32rem) {
  .card {
    grid-template-columns: 1fr 2fr;
  }
}

بقیه‌شون هم هر کدوم یه ترفند رو بازنشسته کردن. subgrid به کارت اجازه می‌ده ردیف‌های والد رو قرض بگیره، پس دیگه لازم نیست مارک‌آپ رو تخت کنی یا با جاوااسکریپت قد بلندترین تیتر رو کپی کنی (فقط یادت باشه grid-row: span 3 اختیاری نیست). oklch() و color-mix() جای توابع darken() و mix() تو Sass می‌شینن و چون تو زمان اجرا حساب می‌شن، با custom property و تم عوض‌شونده هم کار می‌کنن. aspect-ratio جای هک padding نشسته، @layer ترتیب کسکید رو از ساختار پوشه‌ها برمی‌داره و می‌نویسه تو خود CSS، و :where() همون چیزی رو مچ می‌کنه که :is() مچ می‌کنه ولی هیچی به specificity اضافه نمی‌کنه.

دو تای آخر کاملاً کاربردی‌ان: واحدهای svh و lvh و dvh جای باگ معروف 100vh روی موبایل نشستن (پیشنهاد نویسنده svh برای لی‌آوت و dvh فقط جایی که واقعاً می‌خوای باکس وسط اسکرول تغییر قد بده)، و logical properties مثل margin-inline-start باعث می‌شن برای راست‌به‌چپ لازم نباشه پلاگینی مثل rtlcss کل استایل‌شیت رو آینه کنه. تنها موردی که Baseline نیست انیمیشن اسکرول‌محوره: کروم ۱۱۵ از ۲۰۲۳ و سافاری ۲۶ از سپتامبر ۲۰۲۵ دارنش ولی فایرفاکس فقط تو Nightly پشت فلگ. نویسنده می‌گه بذارش تو @supports و حتماً کنار prefers-reduced-motion نگهش دار.

نکات کلیدی:

• نستینگ بومی از ژوئن ۲۰۲۶ Baseline Widely available ـه: کروم ۱۲۰، فایرفاکس ۱۱۷، سافاری ۱۷.۲.
• :has() و :is() هر دو specificity رو از قوی‌ترین آرگومانشون می‌گیرن، پس .field:has(#email) از چیزی که به نظر می‌رسه سنگین‌تره.
• container-type: inline-size روی المنتی که عرضش از محتواش میاد (مثل دکمهٔ inline-block) باعث جمع شدنش می‌شه.
• استایل‌های بیرون هر لایه‌ای از همهٔ لایه‌ها قوی‌ترن، و !important ترتیب لایه‌ها رو برعکس می‌کنه.
• aspect-ratio یه ترجیحه نه قفل؛ محتوای بلندتر باکس رو بزرگ می‌کنه مگه overflow: hidden یا min-height: 0 بذاری.
• شورت‌هند animation مقدار animation-timeline رو ریست می‌کنه، پس خط timeline باید بعدش بیاد.
• انیمیشن اسکرول‌محور تنها مورد لیسته که Baseline نیست؛ فایرفاکس تا سپتامبر ۲۰۲۶ فقط تو Nightly و پشت فلگ داره.