تسلط بر قاعده @when در CSS: اعمال استایل شرطی برای طراحی وب پویا

قاعده @when در CSS، بخشی از مشخصات ماژول قوانین شرطی CSS سطح ۵ (CSS Conditional Rules Module Level 5)، راهی قدرتمند برای اعمال استایل‌ها به صورت شرطی بر اساس شرایط خاص ارائه می‌دهد. این قاعده فراتر از مدیا کوئری‌های سنتی عمل کرده و امکان کنترل دقیق‌تری بر استایل‌دهی بر اساس اندازه کانتینرها، خصوصیات سفارشی و حتی وضعیت عناصر را فراهم می‌کند. این امر می‌تواند به طور قابل توجهی واکنش‌گرایی و سازگاری طراحی‌های وب شما را افزایش داده و به تجربه کاربری بهتر در دستگاه‌ها و زمینه‌های مختلف منجر شود.

درک اصول اولیه قاعده @when

در هسته خود، قاعده @when مکانیزمی را برای اجرای یک بلوک از استایل‌های CSS تنها زمانی که یک شرط خاص برآورده شود، فراهم می‌کند. این شبیه به دستورات if در زبان‌های برنامه‌نویسی است. بیایید سینتکس آن را بررسی کنیم:

@when condition {
  /* قوانین CSS که در صورت درست بودن شرط اعمال می‌شوند */
}

condition می‌تواند بر اساس عوامل مختلفی باشد، از جمله:

• کوئری‌های کانتینر (Container Queries): استایل‌دهی به عناصر بر اساس اندازه عنصر دربرگیرنده آن‌ها به جای ویوپورت.
• وضعیت‌های سفارشی (Custom States): واکنش به تعاملات کاربر یا وضعیت‌های برنامه.
• متغیرهای CSS (CSS Variables): اعمال استایل‌ها بر اساس مقدار خصوصیات سفارشی CSS.
• کوئری‌های محدوده (Range Queries): بررسی اینکه آیا یک مقدار در یک محدوده خاص قرار می‌گیرد یا خیر.

قدرت @when در توانایی آن برای ایجاد استایل‌دهی واقعاً مبتنی بر کامپوننت نهفته است. شما می‌توانید منطق استایل‌دهی را درون یک کامپوننت کپسوله کنید و اطمینان حاصل کنید که فقط زمانی اعمال می‌شود که کامپوننت معیارهای خاصی را برآورده کند، صرف‌نظر از چیدمان صفحه اطراف آن.

کوئری‌های کانتینر با @when

کوئری‌های کانتینر یک تحول بزرگ برای طراحی واکنش‌گرا هستند. آن‌ها به عناصر اجازه می‌دهند تا استایل خود را بر اساس ابعاد کانتینر والد خود تطبیق دهند، نه فقط عرض ویوپورت. این امر کامپوننت‌های انعطاف‌پذیرتر و قابل استفاده مجدد را امکان‌پذیر می‌سازد. یک کامپوننت کارت را تصور کنید که بسته به اینکه در یک نوار کناری باریک یا یک ناحیه محتوای اصلی وسیع قرار گرفته باشد، به طور متفاوتی نمایش داده می‌شود. قاعده @when این کار را فوق‌العاده ساده می‌کند.

مثال پایه کوئری کانتینر

ابتدا، شما باید یک کانتینر تعریف کنید. می‌توانید این کار را با استفاده از خصوصیت container-type انجام دهید:

.container {
  container-type: inline-size;
}

inline-size به کانتینر اجازه می‌دهد تا بر اساس اندازه درونی (عرض در حالت‌های نوشتاری افقی، ارتفاع در حالت‌های نوشتاری عمودی) مورد کوئری قرار گیرد. شما همچنین می‌توانید از size برای کوئری هر دو بعد، یا normal برای عدم ایجاد کانتینر کوئری استفاده کنید.

حالا، می‌توانید از @container (که اغلب در ترکیب با @when استفاده می‌شود) برای اعمال استایل‌ها بر اساس اندازه کانتینر استفاده کنید:

@container (min-width: 300px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card__image {
    width: 100px;
    height: 100px;
  }
}

@container (max-width: 299px) {
  .card {
    flex-direction: column;
    align-items: flex-start;
  }
  .card__image {
    width: 100%;
    height: auto;
  }
}

در این مثال، چیدمان .card بر اساس عرض کانتینر تغییر می‌کند. زمانی که عرض کانتینر حداقل ۳۰۰ پیکسل باشد، کارت تصویر و متن را کنار هم نمایش می‌دهد. وقتی باریک‌تر باشد، آن‌ها به صورت عمودی روی هم قرار می‌گیرند.

در اینجا نحوه استفاده از @when برای رسیدن به نتیجه مشابه آمده است، که بسته به پشتیبانی مرورگر و ترجیح کدنویسی می‌تواند با @container ترکیب شود (زیرا @when در برخی سناریوها فراتر از اندازه کانتینر انعطاف‌پذیری بیشتری ارائه می‌دهد):

@container card-container (min-width: 300px) {
  @when container(card-container) {
    .card {
      flex-direction: row;
      align-items: center;
    }
    .card__image {
      width: 100px;
      height: 100px;
    }
  }
}

@container card-container (max-width: 299px) {
  @when container(card-container) {
    .card {
      flex-direction: column;
      align-items: flex-start;
    }
    .card__image {
      width: 100%;
      height: auto;
    }
  }
}

در این حالت، `card-container` نام کانتینری است که با `@container` اختصاص داده شده است، و `container(card-container)` در `@when` بررسی می‌کند که آیا زمینه کانتینر مشخص شده فعال است یا خیر. توجه: پشتیبانی از تابع `container()` و سینتکس دقیق ممکن است در مرورگرها و نسخه‌های مختلف متفاوت باشد. قبل از پیاده‌سازی، جداول سازگاری مرورگر را بررسی کنید.

مثال‌های عملی بین‌المللی

• لیست محصولات فروشگاه اینترنتی: نمایش لیست محصولات به طور متفاوت بر اساس فضای موجود در گرید صفحه دسته‌بندی. یک کانتینر کوچک‌تر ممکن است فقط تصویر و قیمت محصول را نشان دهد، در حالی که یک کانتینر بزرگ‌تر می‌تواند شامل توضیحات مختصر و امتیاز باشد. این امر در مناطق مختلف با سرعت اینترنت و انواع دستگاه‌های متفاوت مفید است و امکان بهینه‌سازی تجربیات را هم در دسکتاپ‌های پیشرفته و هم در اتصالات موبایل با پهنای باند کم در کشورهای در حال توسعه فراهم می‌کند.
• خلاصه مقالات خبری: تنظیم طول خلاصه مقالات نمایش داده شده در صفحه اصلی یک وب‌سایت خبری بر اساس عرض کانتینر. در یک نوار کناری باریک، فقط عنوان و چند کلمه را نشان دهید؛ در ناحیه محتوای اصلی، خلاصه‌ای با جزئیات بیشتر ارائه دهید. تفاوت‌های زبانی را در نظر بگیرید، جایی که برخی زبان‌ها (مانند آلمانی) تمایل به داشتن کلمات و عبارات طولانی‌تری دارند که بر فضای مورد نیاز برای خلاصه‌ها تأثیر می‌گذارد.
• ویجت‌های داشبورد: تغییر چیدمان ویجت‌های داشبورد بر اساس اندازه کانتینر آن‌ها. یک ویجت کوچک ممکن است یک نمودار ساده نمایش دهد، در حالی که یک ویجت بزرگ‌تر می‌تواند شامل آمار و کنترل‌های دقیق باشد. تجربه داشبورد را متناسب با دستگاه و اندازه صفحه نمایش کاربر خاص، با در نظر گرفتن ترجیحات فرهنگی برای نمایش داده‌ها، تنظیم کنید. به عنوان مثال، برخی فرهنگ‌ها ممکن است نمودارهای میله‌ای را به نمودارهای دایره‌ای ترجیح دهند.

استفاده از @when با وضعیت‌های سفارشی

وضعیت‌های سفارشی به شما امکان می‌دهند وضعیت‌های خود را برای عناصر تعریف کرده و تغییرات استایل را بر اساس آن وضعیت‌ها فعال کنید. این امر به ویژه در برنامه‌های وب پیچیده که در آن شبه‌کلاس‌های سنتی CSS مانند :hover و :active کافی نیستند، مفید است. در حالی که وضعیت‌های سفارشی هنوز در پیاده‌سازی‌های مرورگر در حال تکامل هستند، قاعده @when راه امیدوارکننده‌ای برای کنترل استایل‌ها بر اساس این وضعیت‌ها با بالغ شدن پشتیبانی ارائه می‌دهد.

مثال مفهومی (استفاده از متغیرهای CSS برای شبیه‌سازی وضعیت‌ها)

از آنجایی که پشتیبانی بومی از وضعیت‌های سفارشی هنوز به طور جهانی در دسترس نیست، می‌توانیم آن را با استفاده از متغیرهای CSS و جاوا اسکریپت شبیه‌سازی کنیم.

/* CSS */
.my-element {
  --is-active: 0;
  background-color: #eee;
}

@when var(--is-active) = 1 {
  .my-element {
    background-color: #aaf;
  }
}

/* JavaScript */
const element = document.querySelector('.my-element');
element.addEventListener('click', () => {
  element.style.setProperty('--is-active', element.style.getPropertyValue('--is-active') === '0' ? '1' : '0');
});

در این مثال، ما از یک متغیر CSS به نام --is-active برای ردیابی وضعیت عنصر استفاده می‌کنیم. کد جاوا اسکریپت مقدار این متغیر را هنگام کلیک روی عنصر تغییر می‌دهد. سپس قاعده @when رنگ پس‌زمینه متفاوتی را زمانی که --is-active برابر با 1 باشد، اعمال می‌کند. در حالی که این یک راه‌حل جایگزین است، مفهوم استایل‌دهی شرطی بر اساس وضعیت را نشان می‌دهد.

موارد استفاده احتمالی آینده با وضعیت‌های سفارشی واقعی

هنگامی که وضعیت‌های سفارشی واقعی پیاده‌سازی شوند، سینتکس ممکن است چیزی شبیه به این باشد (توجه: این حدسی است و بر اساس پیشنهادات است):

.my-element {
  /* استایل‌های اولیه */
}

@when :state(my-custom-state) {
  .my-element {
    /* استایل‌ها زمانی که وضعیت سفارشی فعال است */
  }
}

سپس شما از جاوا اسکریپت برای تنظیم و لغو وضعیت سفارشی استفاده خواهید کرد:

element.states.add('my-custom-state'); // فعال کردن وضعیت
element.states.remove('my-custom-state'); // غیرفعال کردن وضعیت

این امر امکان کنترل فوق‌العاده دقیقی بر استایل‌دهی بر اساس منطق برنامه را فراهم می‌کند.

ملاحظات بین‌المللی‌سازی و محلی‌سازی

• زبان‌های راست‌به‌چپ (RTL): می‌توان از وضعیت‌های سفارشی برای تطبیق چیدمان و استایل کامپوننت‌ها برای زبان‌های RTL مانند عربی و عبری استفاده کرد. به عنوان مثال، آینه‌ای کردن چیدمان یک منوی ناوبری زمانی که یک وضعیت RTL خاص فعال است.
• دسترسی‌پذیری (Accessibility): از وضعیت‌های سفارشی برای ارائه ویژگی‌های دسترسی‌پذیری پیشرفته، مانند هایلایت کردن عناصر متمرکز شده یا ارائه توضیحات متنی جایگزین زمانی که یک وضعیت تعامل کاربر فعال می‌شود، استفاده کنید. اطمینان حاصل کنید که این تغییرات وضعیت به طور مؤثر به فناوری‌های کمکی منتقل می‌شوند.
• ترجیحات طراحی فرهنگی: ظاهر بصری کامپوننت‌ها را بر اساس ترجیحات طراحی فرهنگی تطبیق دهید. به عنوان مثال، استفاده از طرح‌های رنگی یا مجموعه‌های آیکون متفاوت بر اساس منطقه یا زبان کاربر.

کار با متغیرهای CSS و کوئری‌های محدوده

قاعده @when همچنین می‌تواند با متغیرهای CSS برای ایجاد استایل‌های پویا و قابل تنظیم استفاده شود. شما می‌توانید استایل‌ها را بر اساس مقدار یک متغیر CSS اعمال کنید، که به کاربران اجازه می‌دهد ظاهر وب‌سایت شما را بدون نوشتن هیچ کدی سفارشی کنند.

مثال: تغییر تم

:root {
  --theme-color: #fff;
  --text-color: #000;
}

body {
  background-color: var(--theme-color);
  color: var(--text-color);
}

@when var(--theme-color) = #000 {
  body {
    --text-color: #fff;
  }
}

در این مثال، متغیر --theme-color رنگ پس‌زمینه body را کنترل می‌کند. زمانی که روی #000 تنظیم شود، قاعده @when متغیر --text-color را به #fff تغییر می‌دهد و یک تم تیره ایجاد می‌کند. سپس کاربران می‌توانند مقدار --theme-color را با استفاده از جاوا اسکریپت یا با تنظیم یک متغیر CSS متفاوت در یک استایل‌شیت کاربر تغییر دهند.

کوئری‌های محدوده

کوئری‌های محدوده به شما امکان می‌دهند بررسی کنید که آیا یک مقدار در یک محدوده خاص قرار می‌گیرد یا خیر. این می‌تواند برای ایجاد استایل‌های شرطی پیچیده‌تر مفید باشد.

@when (400px <= width <= 800px) {
  .element {
    /* استایل‌هایی که زمانی که عرض بین ۴۰۰ تا ۸۰۰ پیکسل است اعمال می‌شود */
  }
}

با این حال، سینتکس دقیق و پشتیبانی از کوئری‌های محدوده در @when می‌تواند متفاوت باشد. توصیه می‌شود آخرین مشخصات و جداول سازگاری مرورگر را بررسی کنید. کوئری‌های کانتینر اغلب جایگزین قوی‌تر و با پشتیبانی بهتری برای شرایط مبتنی بر اندازه ارائه می‌دهند.

دسترسی‌پذیری جهانی و ترجیحات کاربر

• تم‌های با کنتراست بالا: از متغیرهای CSS و قاعده @when برای پیاده‌سازی تم‌های با کنتراست بالا که به کاربران دارای اختلالات بینایی پاسخ می‌دهد، استفاده کنید. به کاربران اجازه دهید پالت رنگ و اندازه فونت‌ها را برای رفع نیازهای خاص خود سفارشی کنند.
• حرکت کاهش‌یافته: به ترجیح کاربر برای حرکت کاهش‌یافته احترام بگذارید و از متغیرهای CSS برای غیرفعال کردن انیمیشن‌ها و انتقال‌ها زمانی که کاربر تنظیم «حرکت کاهش‌یافته» را در سیستم عامل خود فعال کرده است، استفاده کنید. مدیا کوئری prefers-reduced-motion می‌تواند با @when برای کنترل دقیق‌تر ترکیب شود.
• تنظیمات اندازه فونت: به کاربران اجازه دهید اندازه فونت وب‌سایت را با استفاده از متغیرهای CSS تنظیم کنند. از قاعده @when برای تطبیق چیدمان و فاصله عناصر برای سازگاری با اندازه‌های مختلف فونت استفاده کنید و از خوانایی و قابلیت استفاده برای همه کاربران اطمینان حاصل کنید.

بهترین شیوه‌ها و ملاحظات

• سازگاری مرورگر: قاعده @when هنوز نسبتاً جدید است و پشتیبانی مرورگرها هنوز جهانی نیست. همیشه قبل از استفاده از آن در محیط پروداکشن، جداول سازگاری مرورگر را بررسی کنید. استفاده از polyfillها یا راه‌حل‌های جایگزین برای مرورگرهای قدیمی‌تر را در نظر بگیرید. تا اواخر سال ۲۰۲۴، پشتیبانی مرورگرها محدود باقی مانده است و تکیه زیاد بر @container و استفاده هوشمندانه از متغیرهای CSS با جایگزین‌های جاوا اسکریپت اغلب رویکرد عملی‌تری است.
• ویژگی (Specificity): هنگام استفاده از قاعده @when به ویژگی CSS توجه داشته باشید. اطمینان حاصل کنید که استایل‌های شرطی شما به اندازه کافی خاص هستند تا هر استایل متناقضی را بازنویسی کنند.
• قابلیت نگهداری: از متغیرهای CSS و کامنت‌ها برای خواناتر و قابل نگهداری‌تر کردن کد خود استفاده کنید. از ایجاد قوانین شرطی بیش از حد پیچیده که درک و اشکال‌زدایی آن‌ها دشوار است، خودداری کنید.
• عملکرد: در حالی که قاعده @when می‌تواند با کاهش مقدار CSS که باید تجزیه شود، عملکرد را بهبود بخشد، استفاده هوشمندانه از آن مهم است. استفاده بیش از حد از قوانین شرطی می‌تواند بر عملکرد، به ویژه در دستگاه‌های قدیمی‌تر، تأثیر منفی بگذارد.
• بهبود تدریجی (Progressive Enhancement): از بهبود تدریجی استفاده کنید تا اطمینان حاصل کنید که وب‌سایت شما حتی اگر مرورگر از قاعده @when پشتیبانی نکند، به خوبی کار می‌کند. یک تجربه پایه و کاربردی برای همه کاربران فراهم کنید و سپس آن را برای مرورگرهایی که از این ویژگی پشتیبانی می‌کنند، به تدریج بهبود بخشید.

آینده استایل‌دهی شرطی

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

پیشرفت‌های بیشتر در CSS Houdini و استانداردسازی وضعیت‌های سفارشی، قابلیت‌های @when را بیشتر افزایش خواهد داد و امکان کنترل دقیق‌تر بر استایل‌دهی و یکپارچه‌سازی روان‌تر با جاوا اسکریپت را فراهم می‌کند.

نتیجه‌گیری

قاعده @when در CSS راهی قدرتمند و انعطاف‌پذیر برای اعمال استایل‌ها به صورت شرطی بر اساس کوئری‌های کانتینر، وضعیت‌های سفارشی، متغیرهای CSS و معیارهای دیگر ارائه می‌دهد. در حالی که پشتیبانی مرورگرها هنوز در حال تکامل است، این یک ابزار ارزشمند در زرادخانه شما برای ایجاد طراحی‌های وب پویا و واکنش‌گرا است که با زمینه‌ها و ترجیحات مختلف کاربر سازگار می‌شوند. با درک اصول اولیه قاعده @when و پیروی از بهترین شیوه‌ها، می‌توانید پتانسیل کامل آن را آزاد کرده و تجربیات کاربری واقعاً استثنایی ایجاد کنید. به یاد داشته باشید که همیشه به طور کامل در مرورگرها و دستگاه‌های مختلف آزمایش کنید تا از سازگاری و عملکرد بهینه اطمینان حاصل کنید.

با ادامه تکامل وب، پذیرش ویژگی‌های جدید CSS مانند @when برای پیشرو بودن و ارائه تجربیات وب پیشرفته به مخاطبان جهانی حیاتی است.