‏ده قابلیت CSS که Josh Comeau برای Interop 2027 رأی داده

Interop یه پروژهٔ مشترک بین Google، Apple، Microsoft و Mozilla (به‌همراه Igalia و Bocoup) هست که هر سال چند قابلیت وب رو انتخاب می‌کنه تا همهٔ مرورگرها درست پشتیبانیش کنن. نویسنده می‌گه این پروژه خیلی موفق بوده؛ مثلاً Subgrid از ۲۰۱۹ فقط تو Firefox بود، ولی وقتی وارد Interop 2023 شد تا آخر همون سال همه‌جا در دسترس بود. الان Mozilla یه سیستم رتبه‌بندی ساخته تا توسعه‌دهنده‌ها به قابلیت‌های دلخواهشون برای Interop 2027 رأی بدن.

جذاب‌ترین مورد از نظر نویسنده تابع‌های CSS هست. با @function یه تابع تعریف می‌کنی که پارامتر می‌گیره و مقدار برگشتیش رو با result مشخص می‌کنی، تقریباً شبیه تابع‌های JavaScript. این مثال خود مقاله‌ست:

@function --gradient-to-transparent(--color, --direction: bottom) {
  result: linear-gradient(
    to var(--direction),
    var(--color),
    transparent;
  );
}
.elem {
  background: --gradient-to-transparent(red);
}

نویسنده بیشتر از همه برای تبدیل مختصات قطبی به دکارتی ذوق داره، یعنی جابه‌جا کردن یه المنت با زاویه و فاصله. این قابلیت الان تو Chrome 155 و Edge 154 هست، ولی Firefox 157 و Safari 27 هنوز ندارنش.

دو قابلیت بعدی دربارهٔ شکل گوشه‌ها و حاشیه‌هاست. corner-shape به جای ربع‌دایره‌ای که border-radius می‌سازه، گزینه‌هایی مثل squircle (یعنی گوشهٔ گرد نرم‌تر با superellipse، همون سبکی که Apple سال‌هاست استفاده می‌کنه) و bevel (گوشهٔ اریب) می‌ده. border-shape نسخهٔ سطح پایین‌ترشه که خودت حاشیه رو با خط، کمان و منحنی Bézier می‌کشی. فرقشون با clip-path اینه که border-box واقعاً عوض می‌شه، یعنی border و outline و box-shadow هم دنبال شکل جدید می‌رن.

تو Anchor Positioning (یعنی چسبوندن یه المنت مثل tooltip به یه المنت دیگه)، نسخهٔ Level 2 یه container query جدید داره که می‌گه المنت رفته رو موقعیت fallback یا نه. اینطوری می‌شه فلش tooltip رو بعد از برعکس شدنش درست نشون داد. تابع inherit() هم مقدار والد رو می‌گیره تا با calc() تغییرش بدی، مثلاً calc(inherit() - 4px) برای border-radius داخلی. البته هنوز هیچ مرورگری پیاده‌ش نکرده و نویسنده بعید می‌دونه به Interop 2027 برسه.

بقیهٔ فهرست اینا هستن: scroll-triggered animations که انیمیشن رو وقتی کاربر به یه نقطهٔ خاص اسکرول کرد اجرا می‌کنه و جای IntersectionObserver رو می‌گیره؛ reading-flow و reading-order که ترتیب Tab رو با ترتیب بصری grid یا flexbox هماهنگ می‌کنن؛ interpolate-size و calc-size() برای انیمیشن بین height: 0 و height: auto؛ gap decorations با پراپرتی rule برای کشیدن خط بین سلول‌های grid؛ و scroll state container queries که می‌فهمه یه المنت position: sticky الان چسبیده یا نه.

نویسنده آخر مقاله می‌گه حتی تو دورهٔ LLMها هم دونستن این قابلیت‌ها مهمه، چون داده‌های آموزشی مدل‌ها چند سال قدیمیه و خودشون سراغ CSS جدید نمی‌رن. پس اگه بهترین تجربهٔ کاربری رو می‌خوای، باید خودت ایجنت‌ها رو به این سمت ببری. برای interpolate-size هم توصیه می‌کنه transition رو پشت @supports بذاری تا مرورگرهای قدیمی تأخیر اضافه نگیرن.

نکات کلیدی:

• تابع‌های CSS با @function و result تعریف می‌شن و فعلاً فقط تو Chrome 155 و Edge 154 کار می‌کنن.
• هیچ‌کدوم از این قابلیت‌ها هنوز تو Firefox 157 و Safari 27 پشتیبانی نمی‌شن.
• corner-shape و border-shape شکل واقعی border-box رو عوض می‌کنن، پس box-shadow و outline هم دنبالشون می‌رن.
• interpolate-size: allow-keywords انیمیشن به height: auto رو ممکن می‌کنه و از ۲۰۲۴ تو Chrome هست.
• تابع inherit() هنوز تو هیچ مرورگری پیاده نشده.