CSS @when: تسلط بر استایل‌دهی شرطی برای طراحی وب مدرن

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

CSS @when چیست؟

قاعده @when یک افزوده قدرتمند به مشخصات CSS است که در کنار قوانین @media یا @supports کار می‌کند. این قاعده به عنوان یک بلوک شرطی عمل می‌کند، به این معنی که اعلان‌های CSS در محدوده آن تنها در صورتی اعمال خواهند شد که شرط مشخص شده به true ارزیابی شود. اساساً، این روشی دقیق‌تر و گویاتر برای کنترل زمان فعال بودن استایل‌های خاص فراهم می‌کند و از شرطی‌سازی سنتی در سطح بلوک با استفاده از @media queries فراتر می‌رود.

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

هم‌افزایی: @when با @media و @supports

قدرت واقعی @when زمانی آشکار می‌شود که در ترکیب با قوانین شرطی موجود استفاده شود:

۱. @when با @media Queries

این مسلماً رایج‌ترین و تأثیرگذارترین مورد استفاده برای @when است. به طور سنتی، شما ممکن است کل قوانین CSS را درون یک @media query قرار دهید. با @when، اکنون می‌توانید اعلان‌های خاصی را در یک قانون بر اساس شرایط media query به صورت شرطی اعمال کنید.

مثال: تایپوگرافی واکنش‌گرا

فرض کنید می‌خواهید اندازه فونت یک پاراگراف را تنظیم کنید، اما فقط زمانی که عرض viewport بیشتر از ۷۶۸ پیکسل باشد. بدون @when، ممکن است این کار را به این صورت انجام دهید:

            .my-paragraph {
  font-size: 16px;
}

@media (min-width: 768px) {
  .my-paragraph {
    font-size: 18px;
  }
}

            

              
                Copy
              
            
          

اکنون، با استفاده از @when، می‌توانید به همین نتیجه به صورت مختصرتر و با کنترل بیشتر دست یابید:

            .my-paragraph {
  font-size: 16px;
  @when (min-width: 768px) {
    font-size: 18px;
  }
}

            

              
                Copy
              
            
          

در این مثال:

• font-size پایه 16px همیشه اعمال می‌شود.
• font-size به اندازه 18px تنها زمانی اعمال می‌شود که عرض viewport برابر با ۷۶۸ پیکسل یا بیشتر باشد.

این رویکرد برای انجام تنظیمات دقیق بر روی ویژگی‌های خاص بر اساس اندازه صفحه، جهت‌گیری یا سایر ویژگی‌های رسانه‌ای، بدون تکرار کل مجموعه‌های قوانین، بسیار مفید است.

مثال جهانی: تطبیق عناصر رابط کاربری برای دستگاه‌های مختلف

یک پلتفرم تجارت الکترونیک جهانی را در نظر بگیرید. یک کارت محصول ممکن است نمای فشرده‌ای را در دستگاه‌های تلفن همراه نمایش دهد اما نمای دقیق‌تری را در صفحه‌های بزرگ‌تر. با استفاده از @when و @media، می‌توانید این انتقال‌ها را به زیبایی مدیریت کنید:

            .product-card {
  padding: 10px;
  text-align: center;
  @when (min-width: 600px) {
    padding: 20px;
    text-align: left;
  }
  @when (min-width: 1024px) {
    padding: 30px;
    display: flex;
    align-items: center;
  }
}

.product-image {
  width: 100%;
  height: 150px;
  @when (min-width: 600px) {
    width: 200px;
    height: 200px;
  }
  @when (min-width: 1024px) {
    width: 250px;
    height: 250px;
    margin-right: 20px;
  }
}

            

              
                Copy
              
            
          

این امر به .product-card و عناصر داخلی آن مانند .product-image اجازه می‌دهد تا استایل‌های خود را به تدریج با افزایش اندازه viewport تطبیق دهند و تجربه‌ای سفارشی را در طیف گسترده‌ای از دستگاه‌ها در سراسر جهان فراهم کنند.

۲. @when با @supports Queries

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

مثال: استفاده از یک ویژگی جدید CSS

تصور کنید می‌خواهید از ویژگی آزمایشی backdrop-filter استفاده کنید. همه مرورگرها یا نسخه‌های قدیمی‌تر از این پشتیبانی نمی‌کنند. می‌توانید از @when با @supports برای اعمال زیبا و تدریجی آن استفاده کنید:

            .modal-background {
  background-color: rgba(0, 0, 0, 0.5);
  @when supports (backdrop-filter: blur(10px)) {
    backdrop-filter: blur(10px);
  }
}

            

              
                Copy
              
            
          

در این مورد:

• background-color همیشه به عنوان یک جایگزین (fallback) اعمال می‌شود.
• backdrop-filter تنها زمانی اعمال می‌شود که مرورگر از اعلان backdrop-filter: blur(10px) پشتیبانی کند.

این برای بهبود تدریجی (progressive enhancement) حیاتی است و تضمین می‌کند که طراحی شما حتی در محیط‌هایی که از جدیدترین ویژگی‌های CSS پشتیبانی نمی‌کنند، کاربردی و از نظر بصری جذاب باشد.

مثال جهانی: بهبود تدریجی برای انیمیشن‌ها

وب‌سایتی را در نظر بگیرید که دارای انیمیشن‌های ظریف است. برخی از انیمیشن‌های پیشرفته ممکن است به ویژگی‌های جدیدتر CSS مانند animation-composition یا توابع easing خاص متکی باشند. می‌توانید از @when و @supports برای ارائه یک جایگزین یا یک انیمیشن ساده‌تر برای مرورگرهایی که از این ویژگی‌های پیشرفته پشتیبانی نمی‌کنند، استفاده کنید.

            .animated-element {
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;

  @when supports (animation-composition: replace) {
    /* More advanced animation properties or sequences */
    animation: slideIn 1s forwards;
    animation-composition: replace;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  }
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

            

              
                Copy
              
            
          

در اینجا، مرورگرهایی که از animation-composition: replace پشتیبانی می‌کنند، یک دنباله انیمیشن پیچیده‌تر دریافت خواهند کرد، در حالی که بقیه به ویژگی ساده‌تر transition بازمی‌گردند و تجربه‌ای ثابت، هرچند متفاوت، را برای کاربران در سراسر جهان تضمین می‌کنند.

۳. ترکیب @when با چندین شرط

شما همچنین می‌توانید چندین شرط را در یک قانون @when زنجیره‌ای کنید و منطق استایل‌دهی خاص‌تری ایجاد کنید. این کار با استفاده از عملگرهای منطقی مانند and، or و not انجام می‌شود.

مثال: منطق واکنش‌گرای پیچیده

سناریویی را تصور کنید که در آن یک نوار کناری (sidebar) باید فقط در صفحه‌های کوچک‌تر پنهان شود، اما تنها در صورتی که یک تنظیم ترجیحی خاص کاربر (که به صورت فرضی با یک کلاس روی بدنه نشان داده شده) فعال نباشد.

            .sidebar {
  display: block;
  width: 250px;

  /* Hide sidebar on small screens AND not in preference mode */
  @when (max-width: 767px) and not (.no-sidebar-on-mobile) {
    display: none;
  }

  /* Show sidebar on larger screens OR if preference mode is active on small screens */
  @when (min-width: 768px) or (.sidebar-on-mobile) {
    display: block;
  }
}

            

              
                Copy
              
            
          

این سطح از استایل‌دهی شرطی، امکان رفتارهای رابط کاربری بسیار پیچیده و متناسب با زمینه‌ها و تعاملات خاص کاربر را فراهم می‌کند.

سینتکس و بهترین شیوه‌ها

سینتکس پایه برای @when ساده است:

            selector {
  property: value;
  @when (condition) {
    property: value;
  }
}

            

              
                Copy
              
            
          

هنگام ترکیب چندین شرط، سینتکس به این صورت می‌شود:

            selector {
  property: value;
  @when (condition1) and (condition2) {
    property: value;
  }
  @when (condition1) or (condition2) {
    property: value;
  }
  @when not (condition) {
    property: value;
  }
}

            

              
                Copy
              
            
          

بهترین شیوه‌های کلیدی:

• خوانایی را در اولویت قرار دهید: اگرچه @when می‌تواند استایل‌ها را مختصرتر کند، از شرایط تودرتوی بیش از حد پیچیده که ممکن است رمزگشایی آنها دشوار شود، خودداری کنید. در صورت لزوم، منطق پیچیده را به قوانین جداگانه تقسیم کنید.
• بهبود تدریجی: همیشه یک جایگزین مناسب برای مرورگرها یا محیط‌هایی که از ویژگی‌های مورد نظر قوانین @when شما پشتیبانی نمی‌کنند، فراهم کنید، به خصوص هنگام استفاده با @supports.
• عملکرد: در حالی که @when به خودی خود معمولاً کارآمد است، به منطق شرطی بیش از حد پیچیده که ممکن است بر عملکرد تجزیه (parsing) تأثیر بگذارد، توجه داشته باشید، هرچند این موضوع در استفاده‌های معمول به ندرت مشکل‌ساز می‌شود.
• پشتیبانی مرورگر: به پشتیبانی مرورگرها از @when و قوانین همراه آن توجه داشته باشید. از زمان معرفی آن، پذیرش آن در حال رشد است، اما آزمایش در مرورگرهای هدف شما ضروری است. از ابزارهایی مانند Can I Use برای بررسی آخرین اطلاعات سازگاری استفاده کنید.
• دسترسی جهانی: هنگام طراحی برای مخاطبان جهانی، از @when با @media برای پاسخگویی به طیف گسترده‌ای از اندازه‌ها و رزولوشن‌های دستگاه‌های رایج در سراسر جهان استفاده کنید. شرایط مختلف شبکه را نیز در نظر بگیرید؛ ممکن است از media queryهای prefers-reduced-motion در @when برای غیرفعال کردن انیمیشن‌ها برای کاربرانی که این گزینه را انتخاب کرده‌اند، استفاده کنید.
• قابلیت نگهداری: از @when برای نگهداری استایل‌های مرتبط در کنار هم استفاده کنید. اگر مقدار یک ویژگی بر اساس یک شرط تغییر می‌کند، اغلب قابل نگهداری‌تر است که هر دو مقدار پیش‌فرض و شرطی را در یک بلوک قانون داشته باشید، به جای اینکه آنها را در @media queryهای مختلف پراکنده کنید.

پشتیبانی مرورگر و چشم‌انداز آینده

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

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

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

نتیجه‌گیری

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

امروز شروع به آزمایش با @when در پروژه‌های خود کنید تا وب‌سایت‌های هوشمندتر، تطبیق‌پذیرتر و آینده‌نگرانه‌تری بسازید.