‏named-feature()؛ فیچر دتکشن دقیق‌تر در CSS

نویسندهٔ مطلب، Bramus، از یه مشکل قدیمی شروع می‌کنه: فیچر دتکشن (یعنی چک کردن اینکه مرورگر یه قابلیت رو داره یا نه) با @supports فقط parse شدن کد رو می‌سنجه. برای همین وقتی gap تازه داشت به Flexbox می‌رسید، هیچ راه تمیزی نبود بفهمی مرورگر «Flexbox gap» رو پیاده کرده یا نه؛ مرورگر به gap و display: flex جداگانه بله می‌گفت، حتی وقتی با هم اثر نداشتن.

راه‌حل که پیشنهاد David Baron بوده و گروه کاری CSS پذیرفتتش، named-feature() هست: یه تابع که یه کلیدواژهٔ مشخص می‌گیره و فقط برای همون رفتار جواب می‌ده. فهرست کلیدواژه‌ها هم توی spec ثابته و فقط برای اون چند مورد نادری اضافه می‌شه که با هیچ روش دیگه‌ای تو CSS قابل تشخیص نیستن.

اولین کلیدواژه anchor-position-follows-transforms هست، برای وقتی که anchor positioning (یعنی چسبوندن یه المان به المان دیگه با CSS) transform روی anchor رو هم حساب کنه. این رفتار از کروم ۱۴۴ اومده، تو سافاری ۲۷ هم هست و فایرفاکس داره پروتوتایپش می‌کنه.

@supports named-feature(anchor-position-follows-transforms) {
  /* ✅ The browser supports transform-aware anchor positioning! */
}

دومی single-axis-scroll-container هست: کانتینری که فقط روی یه محور اسکرول می‌شه و اون مشکل قدیمی گیر افتادن position: sticky توی اسکرولر محور دیگه رو حل می‌کنه. قبلش فقط با کلی جاوااسکریپت می‌شد تشخیصش داد. تو کروم ۱۵۳ اومده، ولی فایرفاکس و سافاری هنوز حتی باگ ردیابی براش ندارن.

یه هشدار عملی هم هست: چون بین ارائهٔ خود قابلیت و اضافه شدن تشخیصش فاصله افتاده، کروم ۱۴۴ تا ۱۵۰ و سافاری ۲۷ برای anchor-position-follows-transforms جواب منفی اشتباه می‌دن. نویسنده می‌گه برای gap با Flexbox یا style query هم کلیدواژه نذاشتن، چون زمان زیادی از انتشارشون گذشته و الان فقط false negative تولید می‌کرد.

نکات کلیدی:

• named-feature() فقط کلیدواژه‌های از پیش تعریف‌شده در spec css-conditional-5 رو قبول می‌کنه.
• کلیدواژهٔ anchor-position-follows-transforms از کروم ۱۵۰ و فایرفاکس ۱۵۶ در دسترسه.
• کلیدواژهٔ single-axis-scroll-container فعلاً فقط تو کروم ۱۵۳ پیاده شده.
• خود تابع تو کروم ۱۵۰، فایرفاکس ۱۵۶ و Safari Technology Preview هست.
• کروم ۱۴۴ تا ۱۵۰ و سافاری ۲۷ اینجا جواب منفی اشتباه می‌دن.
• برای at-ruleها هم at-rule() وجود داره.