قانون @when در CSS را کاوش کنید، یک ویژگی قدرتمند که امکان اعمال استایل شرطی بر اساس پشتیبانی مرورگر، اندازه ویوپورت و موارد دیگر را فراهم می‌کند. با مثال‌های عملی بیاموزید.
قانون @when در CSS: تسلط بر اعمال استایل شرطی
دنیای CSS دائماً در حال تحول است و راه‌های قدرتمندتر و انعطاف‌پذیرتری برای استایل‌دهی به صفحات وب به توسعه‌دهندگان ارائه می‌دهد. یکی از این ویژگی‌ها که در حال جلب توجه است، قانون @when است که با نام CSS Conditional Rules Module Level 1 نیز شناخته می‌شود. این قانون به شما امکان می‌دهد تا استایل‌های CSS را به صورت شرطی، بر اساس برآورده شدن شرایط خاص، اعمال کنید. این یک ابزار قدرتمند برای طراحی واکنش‌گرا، تشخیص ویژگی‌ها و ایجاد شیوه‌نامه‌های (stylesheets) قوی‌تر و سازگارتر است.
قانون @when در CSS چیست؟
قانون @when یک at-rule شرطی در CSS است که به شما اجازه می‌دهد استایل‌هایی را تعریف کنید که فقط در صورت درست بودن شرایط خاصی اعمال می‌شوند. به آن مانند یک دستور if برای CSS خود فکر کنید. برخلاف مدیا کوئری‌ها (media queries) که عمدتاً بر ویژگی‌های ویوپورت (اندازه صفحه، جهت‌گیری و غیره) تمرکز دارند، @when یک روش عمومی‌تر و قابل توسعه‌تر برای مدیریت استایل‌دهی شرطی فراهم می‌کند. این قانون، at-ruleهای شرطی موجود مانند @supports و @media را گسترش می‌دهد.
مزایای کلیدی استفاده از @when
- خوانایی بهتر کد: با قرار دادن منطق شرطی در بلوک‌های
@when، درک و نگهداری CSS خود را آسان‌تر می‌کنید. هدف از اعمال استایل‌های خاص واضح‌تر می‌شود. - انعطاف‌پذیری بیشتر:
@whenمی‌تواند شرایط پیچیده‌تری را نسبت به مدیا کوئری‌های سنتی مدیریت کند، به خصوص زمانی که با کوئری‌های ویژگی (feature queries) و منطق مبتنی بر جاوا اسکریپت (با استفاده از CSS Custom Properties) ترکیب شود. - تشخیص ساده‌تر ویژگی‌ها:
@whenبه طور یکپارچه با@supportsادغام می‌شود و به شما امکان می‌دهد استایل‌ها را فقط زمانی اعمال کنید که ویژگی‌های خاص مرورگر در دسترس باشند. این برای بهبود تدریجی (progressive enhancement) بسیار مهم است. - استایل‌دهی معنایی‌تر:
@whenبه شما اجازه می‌دهد تا عناصر را بر اساس وضعیت یا زمینه آنها استایل‌دهی کنید، که منجر به CSS معنایی‌تر و قابل نگهداری‌تر می‌شود. به عنوان مثال، استایل‌دهی عناصر بر اساس دیتا اتریبیوت‌ها یا پراپرتی‌های سفارشی که توسط جاوا اسکریپت تنظیم شده‌اند.
نحو (Syntax) قانون @when
نحو اصلی قانون @when به شرح زیر است:
@when <condition> {
/* قوانین CSS برای اعمال زمانی که شرط درست است */
}<condition> می‌تواند هر عبارت بولین معتبری باشد که به true یا false ارزیابی می‌شود. این عبارت اغلب شامل موارد زیر است:
- مدیا کوئری‌ها: شرایط مبتنی بر ویژگی‌های ویوپورت (مثلاً، عرض صفحه، جهت‌گیری دستگاه).
- کوئری‌های ویژگی (@supports): شرایط مبتنی بر پشتیبانی مرورگر از ویژگی‌های خاص CSS.
- جبر بولین: ترکیب چندین شرط با استفاده از عملگرهای منطقی (
and،or،not).
مثال‌های عملی از @when در عمل
بیایید چند مثال عملی را برای نشان دادن قدرت و تطبیق‌پذیری قانون @when بررسی کنیم.
۱. طراحی واکنش‌گرا با @when و مدیا کوئری‌ها
رایج‌ترین مورد استفاده برای @when طراحی واکنش‌گرا است، جایی که شما استایل‌ها را بر اساس اندازه صفحه تنظیم می‌کنید. در حالی که مدیا کوئری‌ها به تنهایی می‌توانند این کار را انجام دهند، @when یک رویکرد ساختاریافته‌تر و خواناتر را فراهم می‌کند، به خصوص هنگام کار با شرایط پیچیده.
@when (min-width: 768px) and (max-width: 1023px) {
body {
font-size: 18px;
line-height: 1.6;
}
.container {
width: 720px;
margin: 0 auto;
}
}در این مثال، استایل‌های داخل بلوک @when فقط زمانی اعمال می‌شوند که عرض صفحه بین 768px و 1023px باشد (اندازه معمول تبلت). این یک روش واضح و مختصر برای تعریف استایل‌ها برای محدوده‌های خاص ویوپورت فراهم می‌کند.
نکته بین‌المللی‌سازی: طراحی واکنش‌گرا برای مخاطبان جهانی بسیار مهم است. اندازه‌های مختلف صفحه نمایش را در مناطق مختلف در نظر بگیرید. به عنوان مثال، استفاده از موبایل در برخی کشورها بیشتر است، که طراحی اول-موبایل (mobile-first) را حتی مهم‌تر می‌کند.
۲. تشخیص ویژگی با @when و @supports
@when می‌تواند با @supports ترکیب شود تا استایل‌ها فقط زمانی اعمال شوند که یک ویژگی خاص CSS توسط مرورگر پشتیبانی می‌شود. این به شما امکان می‌دهد تا وب‌سایت خود را به صورت تدریجی بهبود بخشید، تجربه بهتری برای کاربران با مرورگرهای مدرن فراهم کنید و در عین حال سازگاری با مرورگرهای قدیمی‌تر را حفظ کنید.
@when supports(display: grid) {
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
}
}
@when not supports(display: grid) {
.container {
/* استایل‌های جایگزین برای مرورگرهایی که از گرید پشتیبانی نمی‌کنند */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: calc(50% - 10px); /* تنظیم عرض برای مرورگرهای قدیمی‌تر */
}
}در اینجا، ما از @supports برای بررسی اینکه آیا مرورگر از CSS Grid Layout پشتیبانی می‌کند، استفاده می‌کنیم. اگر پشتیبانی کند، استایل‌های مبتنی بر گرید را به .container اعمال می‌کنیم. در غیر این صورت، استایل‌های جایگزین با استفاده از فلکس‌باکس (flexbox) ارائه می‌دهیم تا اطمینان حاصل شود که طرح‌بندی مشابهی در مرورگرهای قدیمی‌تر به دست می‌آید.
نکته دسترسی‌پذیری جهانی: تشخیص ویژگی برای دسترسی‌پذیری مهم است. مرورگرهای قدیمی‌تر ممکن است از ویژگی‌های جدیدتر ARIA یا عناصر معنایی HTML5 پشتیبانی نکنند. جایگزین‌های مناسبی ارائه دهید تا اطمینان حاصل شود که محتوا همچنان قابل دسترسی باقی می‌ماند.
۳. ترکیب مدیا کوئری‌ها و کوئری‌های ویژگی
قدرت واقعی @when از توانایی آن در ترکیب مدیا کوئری‌ها و کوئری‌های ویژگی برای ایجاد قوانین استایل‌دهی شرطی پیچیده‌تر و دقیق‌تر ناشی می‌شود.
@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
.modal {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
}
}در این مثال، عنصر .modal تنها زمانی پس‌زمینه محو خواهد داشت که عرض صفحه حداقل 768px باشد و مرورگر از ویژگی backdrop-filter پشتیبانی کند. این به شما امکان می‌دهد تا جلوه‌های بصری جذابی در مرورگرهای مدرن ایجاد کنید و از مشکلات احتمالی عملکرد یا اشکالات رندر در مرورگرهای قدیمی‌تر جلوگیری کنید.
۴. استایل‌دهی بر اساس پراپرتی‌های سفارشی (متغیرهای CSS)
@when همچنین می‌تواند در ترکیب با پراپرتی‌های سفارشی CSS (که به عنوان متغیرهای CSS نیز شناخته می‌شوند) برای ایجاد استایل‌دهی پویا و مبتنی بر وضعیت استفاده شود. شما می‌توانید با استفاده از جاوا اسکریپت مقدار یک پراپرتی سفارشی را به‌روز کنید و سپس از @when برای اعمال استایل‌های مختلف بر اساس آن مقدار استفاده کنید.
ابتدا، یک پراپرتی سفارشی تعریف کنید:
:root {
--theme-color: #007bff; /* رنگ تم پیش‌فرض */
--is-dark-mode: false;
}
سپس، از @when برای اعمال استایل‌ها بر اساس مقدار پراپرتی سفارشی استفاده کنید:
@when var(--is-dark-mode) = true {
body {
background-color: #333;
color: #fff;
}
a {
color: #ccc;
}
}
در نهایت، از جاوا اسکریپت برای تغییر مقدار پراپرتی سفارشی --is-dark-mode استفاده کنید:
document.getElementById('darkModeToggle').addEventListener('click', function() {
document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});این به کاربران امکان می‌دهد بین تم‌های روشن و تاریک جابجا شوند و CSS به صورت پویا بر اساس مقدار پراپرتی سفارشی به‌روز می‌شود. توجه داشته باشید که مقایسه مستقیم متغیرهای CSS در `@when` ممکن است در همه مرورگرها به طور کامل پشتیبانی نشود. به جای آن، ممکن است نیاز به استفاده از یک راه حل جایگزین با یک مدیا کوئری داشته باشید که مقدار غیر صفر را بررسی می‌کند:
@when ( --is-dark-mode > 0 ) { ... }با این حال، اطمینان حاصل کنید که پراپرتی سفارشی برای عملکرد صحیح این روش، یک مقدار عددی داشته باشد.
نکته دسترسی‌پذیری: ارائه تم‌های جایگزین (مانند حالت تاریک) برای دسترسی‌پذیری بسیار مهم است. کاربران با اختلالات بینایی ممکن است از تم‌های با کنتراست بالا بهره‌مند شوند. اطمینان حاصل کنید که سوئیچ تم شما از طریق کیبورد و صفحه‌خوان‌ها قابل دسترسی است.
۵. استایل‌دهی بر اساس دیتا اتریبیوت‌ها
شما همچنین می‌توانید از @when با دیتا اتریبیوت‌ها برای استایل‌دهی عناصر بر اساس مقادیر داده‌های آنها استفاده کنید. این می‌تواند برای ایجاد رابط‌های کاربری پویا که در آن ظاهر عناصر بر اساس تعامل کاربر یا به‌روزرسانی داده‌ها تغییر می‌کند، مفید باشد.
برای مثال، فرض کنید لیستی از وظایف دارید و هر وظیفه یک اتریبیوت data-status دارد که وضعیت آن را نشان می‌دهد (مثلاً، "todo"، "in-progress"، "completed"). شما می‌توانید از @when برای استایل‌دهی متفاوت هر وظیفه بر اساس وضعیت آن استفاده کنید.
[data-status="todo"] {
/* استایل‌های پیش‌فرض برای وظایف todo */
color: #333;
}
@when attribute(data-status string equals "in-progress") {
[data-status="in-progress"] {
color: orange;
font-style: italic;
}
}
@when attribute(data-status string equals "completed") {
[data-status="completed"] {
color: green;
text-decoration: line-through;
}
}توجه: پشتیبانی از شرط آزمون attribute() ممکن است در حال حاضر در همه مرورگرها محدود باشد یا به طور کامل پیاده‌سازی نشده باشد. همیشه به طور کامل تست کنید.
سازگاری مرورگر و Polyfillها
تا اواخر سال ۲۰۲۴، پشتیبانی مرورگرها از قانون @when هنوز در حال تکامل است. در حالی که بسیاری از مرورگرهای مدرن از عملکرد اصلی پشتیبانی می‌کنند، برخی از مرورگرهای قدیمی‌تر ممکن است این کار را نکنند. بنابراین، بررسی جداول سازگاری و استفاده از جایگزین‌های مناسب یا polyfillها در صورت لزوم بسیار مهم است.
همیشه با منابعی مانند Can I use... مشورت کنید تا وضعیت پشتیبانی فعلی مرورگرها از @when و ویژگی‌های مرتبط را بررسی کنید.
بهترین شیوه‌ها برای استفاده از @when
- شرایط را ساده نگه دارید: از شرایط بیش از حد پیچیده در بلوک‌های
@whenخودداری کنید. منطق پیچیده را به بخش‌های کوچک‌تر و قابل مدیریت‌تر تقسیم کنید. - جایگزین‌ها را فراهم کنید: همیشه برای مرورگرهایی که از ویژگی‌های مورد استفاده شما در قوانین
@whenپشتیبانی نمی‌کنند، استایل‌های جایگزین ارائه دهید. این کار یک تجربه ثابت را در مرورگرهای مختلف تضمین می‌کند. - به طور کامل تست کنید: CSS خود را در مرورگرها و دستگاه‌های مختلف تست کنید تا اطمینان حاصل شود که قوانین
@whenشما همانطور که انتظار می‌رود کار می‌کنند. - از کامنت‌های معنادار استفاده کنید: به CSS خود کامنت اضافه کنید تا هدف هر قانون
@whenو شرایطی که بر اساس آن است را توضیح دهید. این کار درک و نگهداری کد شما را آسان‌تر می‌کند. - عملکرد را در نظر بگیرید: از استفاده بیش از حد از قوانین
@whenخودداری کنید، زیرا می‌توانند به طور بالقوه بر عملکرد تأثیر بگذارند. CSS خود را بهینه‌سازی کنید تا تعداد قوانینی که نیاز به ارزیابی دارند را به حداقل برسانید.
نتیجه‌گیری
قانون @when یک افزونه قدرتمند به جعبه ابزار CSS است که به توسعه‌دهندگان راهی انعطاف‌پذیرتر و گویاتر برای اعمال شرطی استایل‌ها ارائه می‌دهد. با ترکیب آن با مدیا کوئری‌ها، کوئری‌های ویژگی و پراپرتی‌های سفارشی CSS، می‌توانید شیوه‌نامه‌های قوی‌تر، سازگارتر و قابل نگهداری‌تری ایجاد کنید. در حالی که پشتیبانی مرورگرها هنوز در حال تکامل است، @when یک ویژگی است که ارزش کاوش و گنجاندن در گردش کار توسعه وب مدرن شما را دارد.
همانطور که وب به تکامل خود ادامه می‌دهد، تسلط بر ویژگی‌هایی مانند @when برای ایجاد تجربیات جذاب، قابل دسترس و با عملکرد بالا برای کاربران در سراسر جهان ضروری خواهد بود. قدرت استایل‌دهی شرطی را در آغوش بگیرید و امکانات جدیدی را در توسعه CSS خود باز کنید.