CSS @when: تسلط بر اعمال استایل شرطی برای وب جهانی

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

درک نیاز به استایل‌دهی شرطی

وب یک اکوسیستم متنوع است. فقط تنوع سناریوهایی را که یک وب‌سایت ممکن است با آن روبرو شود در نظر بگیرید:

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

پرداختن مؤثر به این تغییرات، تجربه‌ای قوی و کاربرپسند را برای همه، صرف‌نظر از مکان، دستگاه یا ترجیحات شخصی‌شان، تضمین می‌کند. اینجاست که پیشرفت‌های CSS مانند @when ضروری می‌شوند.

معرفی قاعده @when در CSS

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

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

سینتکس و ساختار پایه

ساختار اساسی قاعده at-rule @when به شرح زیر است:

            @when (<condition>) {
  /* CSS declarations to apply when the condition is true */
  property: value;
}

            

              
                Copy
              
            
          

<condition> می‌تواند انواع مختلفی از عبارات CSS باشد، که معمولاً مدیا کوئری‌ها هستند، اما با تکامل مشخصات فنی می‌تواند شامل انواع دیگری از شرایط نیز باشد.

مقایسه @when و @media

در حالی که @when اغلب می‌تواند برای دستیابی به آنچه @media انجام می‌دهد استفاده شود، درک رابطه و تفاوت‌های بالقوه آن‌ها مهم است:

• @media: این استاندارد تثبیت‌شده برای اعمال استایل‌ها بر اساس ویژگی‌های دستگاه یا ترجیحات کاربر است. برای طراحی واکنش‌گرا، استایل‌های چاپ و ویژگی‌های دسترسی‌پذیری مانند prefers-reduced-motion عالی است.
• @when: به عنوان روشی مدرن‌تر و انعطاف‌پذیرتر برای بیان شرایط طراحی شده است. این قاعده به ویژه هنگامی که با تودرتوسازی CSS (CSS Nesting) ترکیب می‌شود، قدرتمند است و امکان استایل‌دهی دقیق‌تر و آگاه از زمینه را فراهم می‌کند. پیش‌بینی می‌شود که این قاعده ترکیبات منطقی پیچیده‌تری از شرایط را مدیریت کند.

@when را به عنوان یک تکامل در نظر بگیرید که می‌تواند عملکرد @media را در یک معماری CSS ساختاریافته‌تر و تودرتو در بر گرفته و به طور بالقوه گسترش دهد.

بهره‌گیری از @when با تودرتوسازی CSS

قدرت واقعی @when زمانی آشکار می‌شود که در ترکیب با تودرتوسازی CSS استفاده شود. این ترکیب امکان استایل‌دهی بسیار خاص و وابسته به زمینه را فراهم می‌کند که پیاده‌سازی آن قبلاً دشوار بود.

تودرتوسازی CSS به شما امکان می‌دهد تا قواعد استایل را درون یکدیگر قرار دهید، که ساختار HTML شما را منعکس می‌کند. این کار باعث می‌شود استایل‌شیت‌ها خواناتر و سازمان‌یافته‌تر شوند.

یک کامپوننت معمولی مانند منوی ناوبری را در نظر بگیرید:

            /* Traditional CSS */
.navbar {
  background-color: #f8f8f8;
  padding: 1rem;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar li {
  margin-right: 1.5rem;
}

.navbar a {
  text-decoration: none;
  color: #333;
}

/* For mobile */
@media (max-width: 768px) {
  .navbar {
    padding: 0.5rem;
  }
  .navbar ul {
    flex-direction: column;
    align-items: center;
  }
  .navbar li {
    margin-right: 0;
    margin-bottom: 1rem;
  }
}

            

              
                Copy
              
            
          

حال، بیایید ببینیم چگونه تودرتوسازی و @when می‌توانند این را زیباتر کنند:

            /* Using CSS Nesting and @when */
.navbar {
  background-color: #f8f8f8;
  padding: 1rem;

  @when (max-width: 768px) {
    padding: 0.5rem;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;

    @when (max-width: 768px) {
      flex-direction: column;
      align-items: center;
    }

    li {
      margin-right: 1.5rem;

      @when (max-width: 768px) {
        margin-right: 0;
        margin-bottom: 1rem;
      }
    }

    a {
      text-decoration: none;
      color: #333;
    }
  }
}

            

              
                Copy
              
            
          

این ساختار تودرتو با @when چندین مزیت ارائه می‌دهد:

• محلی بودن: استایل‌ها برای شرایط مختلف نزدیک‌تر به انتخاب‌گرهای مربوطه نگهداری می‌شوند، که خوانایی را بهبود می‌بخشد و نیاز به اسکن کل استایل‌شیت را کاهش می‌دهد.
• استایل‌دهی زمینه‌ای: واضح است که استایل‌های درون @when (max-width: 768px) مختص عناصر .navbar، ul و li در آن زمینه هستند.
• قابلیت نگهداری: با تکامل کامپوننت‌ها، استایل‌های شرطی آن‌ها را می‌توان درون بلوک قاعده کامپوننت مدیریت کرد، که به‌روزرسانی‌ها را آسان‌تر می‌کند.

موارد استفاده عملی برای @when

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

۱. بهبودهای طراحی واکنش‌گرا

در حالی که @media اسب بارکش طراحی واکنش‌گرا است، @when می‌تواند آن را اصلاح کند. شما می‌توانید قواعد @when را به صورت تودرتو برای ایجاد نقاط شکست (breakpoint) خاص‌تر یا ترکیب شرایط استفاده کنید.

            .article-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;

  @when (min-width: 600px) {
    grid-template-columns: 1fr 2fr;
  }

  /* Apply specific styles only when it's a 'featured' card AND on larger screens */
  &.featured {
    border: 2px solid gold;

    @when (min-width: 900px) {
      grid-template-columns: 1fr 3fr;
      gap: 2rem;
    }
  }
}

            

              
                Copy
              
            
          

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

۲. مدیریت ترجیحات کاربر

پاسخگویی به ترجیحات کاربر برای دسترسی‌پذیری و رضایت کاربر کلیدی است. @when می‌تواند با ویژگی‌های رسانه‌ای مانند prefers-color-scheme و prefers-reduced-motion استفاده شود.

            .theme-toggle {
  /* Default styles */
  background-color: lightblue;
  color: black;

  /* Dark mode */
  @when (prefers-color-scheme: dark) {
    background-color: #333;
    color: white;
  }

  /* Reduce animation if preferred */
  @when (prefers-reduced-motion: reduce) {
    transition: none;
    animation: none;
  }
}

            

              
                Copy
              
            
          

این رویکرد تمام استایل‌های مرتبط با تم را درون انتخاب‌گر نگه می‌دارد و مدیریت حالت‌های بصری مختلف را آسان می‌کند.

۳. مدیریت وضعیت پیشرفته

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

            .button {
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;

  /* Styling for a disabled button */
  @when ([disabled]) {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #ccc;
  }

  /* Styling for a 'loading' state indicated by a class */
  @when (.loading) {
    position: relative;
    pointer-events: none;

    &::after {
      content: '';
      /* ... spinner styles ... */
      animation: spin 1s linear infinite;
    }
  }
}

/* Example animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

            

              
                Copy
              
            
          

در اینجا، @when ([disabled]) استایل‌ها را زمانی اعمال می‌کند که عنصر دارای صفت disabled باشد، و @when (.loading) استایل‌ها را زمانی اعمال می‌کند که عنصر کلاس .loading را نیز داشته باشد. این برای نشان دادن بصری وضعیت‌های برنامه قدرتمند است.

۴. تشخیص ویژگی و سازگاری بین مرورگرها

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

به عنوان مثال، اگر یک ویژگی جدید CSS در دسترس باشد اما به طور جهانی پشتیبانی نشود، می‌توانید آن را با یک جایگزین (fallback) استفاده کنید:

            .element {
  /* Fallback styles */
  background-color: blue;

  /* Use newer feature if available */
  @when (supports(display: grid)) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

            

              
                Copy
              
            
          

این مثال ایده اعمال شرطی را با پشتیبانی از ویژگی ترکیب می‌کند. با این حال، توجه داشته باشید که @supports روش مستقیم‌تر و از نظر معنایی صحیح‌تر برای مدیریت تشخیص ویژگی برای اعمال قواعد است.

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

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

• بومی‌سازی: در حالی که CSS مستقیماً ترجمه زبان را مدیریت نمی‌کند، می‌تواند با نیازهای زبانی سازگار شود. به عنوان مثال، متن ممکن است بر اساس زبان گسترش یا منقبض شود. شما می‌توانید از @when با کوئری‌های کانتینر یا شرایط اندازه viewport برای تنظیم طرح‌بندی‌ها برای رشته‌های متنی طولانی‌تر یا کوتاه‌تر که در زبان‌های مختلف رایج است، استفاده کنید.
• استانداردهای دسترسی‌پذیری: پایبندی به استانداردهای دسترسی‌پذیری جهانی (مانند WCAG) به معنای در نظر گرفتن کاربران دارای معلولیت است. @when (prefers-reduced-motion: reduce) یک مثال عالی است. شما همچنین می‌توانید از @when برای اطمینان از کنتراست رنگ کافی در تم‌های مختلف یا حالت‌های روشن/تاریک استفاده کنید.
• عملکرد: استایل‌شیت‌های بزرگ و پیچیده می‌توانند بر عملکرد تأثیر بگذارند. با استفاده از @when و تودرتوسازی، می‌توانید استایل‌ها را به صورت منطقی گروه‌بندی کنید. با این حال، اطمینان حاصل کنید که معماری CSS شما کارآمد باقی می‌ماند. از قواعد @when بیش از حد خاص یا عمیقاً تودرتو که می‌تواند منجر به مشکلات پیچیده آبشاری (cascading) شود، خودداری کنید.
• قابلیت نگهداری: با تکامل وب، انتظارات کاربران و قابلیت‌های دستگاه‌ها نیز تغییر می‌کنند. CSS با ساختار خوب با استفاده از تودرتوسازی و @when برای به‌روزرسانی و نگهداری آسان‌تر خواهد بود. مستندسازی منطق شرطی شما نیز یک عمل خوب است.
• آینده‌نگری: ویژگی‌های جدید CSS مانند @when و تودرتوسازی را بپذیرید. با بالغ شدن پشتیبانی مرورگر، کدبیس شما برای بهره‌برداری از این ابزارهای قدرتمند در موقعیت بهتری قرار خواهد گرفت.

مثال: یک کارت محصول جهانی

بیایید یک کارت محصول را تصور کنیم که باید برای مناطق مختلف و ترجیحات کاربر سازگار شود:

            .product-card {
  border: 1px solid #eee;
  padding: 1rem;
  text-align: center;

  /* Styles for dark mode */
  @when (prefers-color-scheme: dark) {
    background-color: #222;
    color: #eee;
    border-color: #444;
  }

  /* Styles for smaller screens, common in many global mobile markets */
  @when (max-width: 500px) {
    padding: 0.75rem;
    text-align: left;

    .product-image {
      float: left;
      margin-right: 0.75rem;
      max-width: 100px;
    }

    .product-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  /* Styles for a specific promotional campaign, maybe for a regional holiday */
  /* This would likely be controlled by a JS-added class */
  @when (.holiday-promo) {
    border-left: 5px solid red;
    animation: pulse 2s infinite;
  }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

            

              
                Copy
              
            
          

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

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

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

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

ملاحظات کلیدی برای پشتیبانی:

• پلی‌فیل‌ها و ترنسپایلرها: برای پروژه‌هایی که اکنون به پشتیبانی گسترده نیاز دارند، می‌توان از پیش‌پردازنده‌هایی مانند Sass یا PostCSS برای دستیابی به منطق شرطی مشابه استفاده کرد. ابزارهایی مانند PostCSS با پلاگین‌ها حتی می‌توانند ویژگی‌های مدرن CSS را به سینتکس قدیمی‌تر تبدیل کنند.
• تشخیص ویژگی: همیشه از جداول پشتیبانی مرورگر (مانند caniuse.com) برای بررسی وضعیت فعلی @when و تودرتوسازی CSS استفاده کنید.
• بهبود تدریجی: با این فرض طراحی کنید که ویژگی‌های جدیدتر ممکن است در همه جا در دسترس نباشند. جایگزین‌های مناسب (graceful fallbacks) ارائه دهید.

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

نتیجه‌گیری

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

با پذیرش @when، شما می‌توانید:

• CSS تمیزتر و سازمان‌یافته‌تری بنویسید.
• قابلیت نگهداری استایل‌شیت‌های خود را بهبود بخشید.
• رابط‌های بسیار تطبیق‌پذیر برای دستگاه‌های متنوع و ترجیحات کاربر بسازید.
• دسترسی‌پذیری و تجربه کاربری را در مقیاس جهانی افزایش دهید.

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

شروع به آزمایش با تودرتوسازی CSS و @when در پروژه بعدی خود کنید تا سطح جدیدی از کنترل و بیانگری را در استایل‌دهی خود باز کنید!