نگاهی به آینده CSS؛ قابلیت‌های هیجان‌انگیز در راه

مقدمه و زمینه

در سال‌های اخیر، سازندگان مرورگرهای بزرگ مانند گوگل، اپل، مایکروسافت و موزیلا در پروژه‌ای به نام Interop با یکدیگر همکاری می‌کنند تا پشتیبانی از فناوری‌های وب را در تمامی مرورگرها یکپارچه و همه‌گیر کنند. این پروژه بسیار موفق بوده است؛ به طوری که وقتی یک ویژگی به Interop اضافه می‌شود، معمولاً ظرف مدت یک سال به پشتیبانی نزدیک به ۱۰۰ درصدی در تمام مرورگرهای مدرن می‌رسد.

با نزدیک شدن به پایان سال ۲۰۲۶، برنامه‌ریزی برای Interop 2027 در جریان است و تیم موزیلا سیستمی را برای رأی‌گیری به منظور انتخاب پرمتقاضی‌ترین ویژگی‌ها ایجاد کرده است. در این مقاله به بررسی تعدادی از مهم‌ترین ویژگی‌های مطرح‌شده می‌پردازیم.

۱. توابع در CSS (CSS Functions)

یکی از جذاب‌ترین پیشنهادها، اضافه کردن امکان تعریف توابع مستقیماً در CSS است:

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

.elem {
  background: --gradient-to-transparent(red);
}

این ویژگی شباهت زیادی به زبان‌های برنامه‌نویسی دارد و کارهایی مثل تبدیل مختصات قطبی به دکارتی را که پیش‌تر پیچیده بودند، بسیار ساده می‌کند. این قابلیت در مرورگرهای مبتنی بر Chromium پیاده‌سازی شده است.

۲. گوشه‌ها و فرم‌های پیشرفته با corner-shape

خاصیت border-radius سال‌هاست که برای گرد کردن گوشه‌ها استفاده می‌شود. اما ویژگی جدید corner-shape گزینه‌های جایگزینی مانند squircle (که اپل سال‌هاست از آن استفاده می‌کند)، bevel، notch و scoop را ارائه می‌دهد. برخلاف ترفندهایی مثل clip-path، این ویژگی مستقیماً روی border-box تأثیر می‌گذارد و سایه‌ها و بوردرها به درستی از آن پیروی می‌کنند.

۳. پرس‌وجوهای کانتینری لنگرگاهی (Anchored Container Queries)

مبحث موقعیت‌دهی لنگرگاهی (Anchor Positioning) به ابزارهایی برای اتصال المان‌هایی مثل Tooltip به عناصر دیگر تبدیل شده است. نسخه سطح ۲ این API به توسعه‌دهندگان اجازه می‌دهد در سطح CSS بررسی کنند که آیا المان هدف در حالت پیش‌فرض قرار دارد یا به وضعیت جایگزین (Fallback) سوییچ کرده است.

۴. تابع inherit()

کلمه کلیدی inherit امکان انتقال مقادیر از والد را می‌دهد، اما گاهی نیاز داریم مقدار به ارث رسیده را تغییر دهیم. تابع پیشنهادی inherit() به ما اجازه می‌دهد مقدار والد را بگیریم و آن را با calc() ترکیب کنیم:

p {
  border-radius: calc(inherit() - 4px);
}

۵. جریان خواندن و ترتیب دسترسی‌پذیری (reading-flow و reading-order)

یکی از چالش‌های طراحی واکنش‌گرا (Responsive) این است که ترتیب قرارگیری المان‌ها در DOM با ترتیب بصری آن‌ها در صفحه‌نمایش‌های مختلف (مثل موبایل و دسکتاپ) متفاوت می‌شود. این امر کاربران ابزارهای کمکی (Assistive Technologies) را دچار مشکل می‌کند. خواص جدید reading-flow و reading-order به توسعه‌دهندگان اجازه می‌دهند ترتیب فوکوس و تب‌ها را بر اساس چیدمان بصری کنترل کنند.

۶. انیمیشن‌های مبتنی بر اندازه کلمات کلیدی با interpolate-size

انیمیشن دادن به مقادیری مثل height: auto همیشه یکی از چالش‌های وب بوده است. خاصیت interpolate-size در کنار تابع calc-size() به مرورگر اجازه می‌دهد به راحتی بین مقادیری مثل 0 و auto انیمیشن اجرا کند که برای ساخت منوهای آکاردئونی بسیار کاربردی است.

چرا برای مهندسان اهمیت دارد؟

این قابلیت‌های جدید نشان‌دهنده تکامل سریع CSS از یک زبان استایل‌دهی ساده به ابزاری قدرتمند و نزدیک به زبان‌های برنامه‌نویسی است. جامعه توسعه‌دهندگان در Hacker News نیز ضمن استقبال از این پیشرفت‌ها، به این نکته اشاره می‌کنند که صبر و پایداری در توسعه پلتفرم وب بالاخره در حال به بار نشستن است و ابزارهای بومی مرورگرها به مرور زمان جایگزین کارهای پیچیده جاوا اسکریپتی خواهند شد.