کوئری‌های استایل کانتینر CSS: طراحی واکنش‌گرا مبتنی بر استایل برای کاربردهای جهانی

طراحی واکنش‌گرای سنتی به شدت به مدیا کوئری‌ها متکی است و طرح‌بندی و استایل‌های یک وب‌سایت را بر اساس اندازه ویوپورت (viewport) تطبیق می‌دهد. با اینکه این رویکرد مؤثر است، اما می‌تواند منجر به ناهماهنگی‌ها و مشکلاتی در هنگام کار با کامپوننت‌های پیچیده‌ای شود که نیاز دارند در زمینه‌های مختلف درون یک ویوپورت یکسان، خود را تطبیق دهند. کوئری‌های استایل کانتینر CSS یک راه‌حل دقیق‌تر و شهودی‌تر ارائه می‌دهند که به عناصر اجازه می‌دهد به استایل‌های اعمال شده بر روی عنصر نگهدارنده خود پاسخ دهند و رفتاری واقعاً واکنش‌گرای مبتنی بر کامپوننت ارائه دهند.

کوئری‌های استایل کانتینر CSS چه هستند؟

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

به این صورت به آن فکر کنید: به جای پرسیدن «آیا ویوپورت بزرگتر از ۷۶۸ پیکسل است؟»، می‌توانید بپرسید «آیا این کانتینر دارای پراپرتی سفارشی --theme: dark; است؟». این یک دنیای کاملاً جدید از امکانات را برای ایجاد کامپوننت‌های انعطاف‌پذیر و قابل استفاده مجدد باز می‌کند که می‌توانند به طور یکپارچه با تم‌ها، طرح‌بندی‌ها یا تغییرات برندینگ مختلف در سراسر وب‌سایت یا برنامه شما سازگار شوند.

مزایای کوئری‌های استایل کانتینر

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

چگونه از کوئری‌های استایل کانتینر CSS استفاده کنیم

در اینجا خلاصه‌ای از نحوه پیاده‌سازی کوئری‌های استایل کانتینر آورده شده است:

۱. تنظیم کانتینر

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

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

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

به طور جایگزین، از container-type: style برای استفاده از یک کانتینر فقط برای کوئری‌های استایل، و نه کوئری‌های اندازه، یا از container-type: size style برای استفاده از هر دو استفاده کنید. برای کنترل نام کانتینر، از container-name: my-container استفاده کرده و سپس با @container my-container (...) آن را هدف قرار دهید.

۲. تعریف کوئری‌های استایل

اکنون، می‌توانید از قاعده @container style() برای تعریف استایل‌هایی استفاده کنید که هنگام برآورده شدن یک شرط خاص اعمال می‌شوند:

@container style(--theme: dark) {
  .component {
    background-color: #333;
    color: #fff;
  }
}

در این مثال، استایل‌های درون قاعده @container فقط در صورتی به عنصر .component اعمال می‌شوند که عنصر نگهدارنده آن، پراپرتی سفارشی --theme را با مقدار dark داشته باشد.

۳. اعمال استایل‌ها به کانتینر

در نهایت، باید پراپرتی‌های CSS را که کوئری‌های استایل شما بررسی می‌کنند، به عنصر کانتینر اعمال کنید:

<div class="container" style="--theme: dark;">
  <div class="component">این یک کامپوننت است.</div>
</div>

در این مثال، .component یک پس‌زمینه تیره و متن سفید خواهد داشت زیرا کانتینر آن استایل --theme: dark; را مستقیماً در HTML (برای سادگی) اعمال کرده است. بهترین روش، اعمال استایل‌ها از طریق کلاس‌های CSS است. همچنین می‌توانید از جاوا اسکریپت برای تغییر پویای استایل‌ها روی کانتینر استفاده کنید و به‌روزرسانی‌های کوئری استایل را فعال کنید.

مثال‌های عملی برای کاربردهای جهانی

۱. کامپوننت‌های تم‌دار

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

/* CSS */
.app-container {
  --theme: light;
}

@container style(--theme: dark) {
  .card {
    background-color: #333;
    color: #fff;
  }
}

@container style(--theme: light) {
  .card {
    background-color: #f0f0f0;
    color: #333;
  }
}

/* HTML */
<div class="app-container" style="--theme: dark;">
  <div class="card">
    <h2>عنوان کارت</h2>
    <p>محتوای کارت.</p>
  </div>
</div>

در این مثال، کامپوننت .card به طور خودکار بین تم تیره و روشن بر اساس پراپرتی --theme کانتینر خود جابجا می‌شود. این برای سایت‌هایی که کاربران می‌توانند بر اساس ترجیحات خود تم‌های مختلفی را انتخاب کنند، بسیار مفید است.

۲. تنوع‌های طرح‌بندی

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

/* CSS */
.navigation {
  --layout: compact;
}

.footer {
  --layout: expanded;
}

@container style(--layout: compact) {
  .language-selector {
    /* استایل‌ها برای منوی کشویی فشرده */
  }
}

@container style(--layout: expanded) {
  .language-selector {
    /* استایل‌ها برای لیست کامل زبان‌ها */
  }
}

/* HTML */
<nav class="navigation" style="--layout: compact;">
  <div class="language-selector">...

<footer class="footer" style="--layout: expanded;">
  <div class="language-selector">...

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

۳. تطبیق با نوع محتوا

یک وب‌سایت خبری با خلاصه‌های مقالات را در نظر بگیرید. می‌توانید از کوئری‌های استایل کانتینر برای تنظیم نمایش خلاصه‌ها بر اساس اینکه شامل تصویر هستند یا نه، استفاده کنید.

/* CSS */
.article-summary {
  --has-image: false;
}

@container style(--has-image: true) {
  .article-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

/* HTML (با تصویر) */
<div class="article-summary" style="--has-image: true;">
  <img src="..." alt="..." />
  <div>...
</div>

/* HTML (بدون تصویر) */
<div class="article-summary" style="--has-image: false;">
  <div>...
</div>

این امر امکان نمایش جذاب‌تر و آموزنده‌تر خلاصه‌های مقالات را فراهم می‌کند و تجربه کاربری را بهبود می‌بخشد. توجه داشته باشید که تنظیم مستقیم پراپرتی `--has-image` در HTML ایده‌آل نیست. یک رویکرد بهتر استفاده از جاوا اسکریپت برای تشخیص وجود تصویر و افزودن یا حذف پویای یک کلاس (مثلاً `.has-image`) به عنصر `.article-summary` است و سپس تنظیم پراپرتی سفارشی `--has-image` در داخل قاعده CSS برای کلاس `.has-image`.

۴. استایل‌دهی محلی‌سازی شده

برای وب‌سایت‌های بین‌المللی، می‌توان از کوئری‌های استایل کانتینر برای تطبیق استایل‌ها بر اساس زبان یا منطقه استفاده کرد. به عنوان مثال، ممکن است بخواهید از اندازه‌های فونت یا فاصله‌گذاری متفاوتی برای زبان‌هایی با متن طولانی‌تر استفاده کنید.

/* CSS */
.locale-container {
  --language: en;
}

@container style(--language: ja) {
  .text {
    font-size: 1.1em;
    letter-spacing: 0.05em;
  }
}

@container style(--language: ar) {
  .text {
    direction: rtl;
  }
}

/* HTML */
<div class="locale-container" style="--language: ja;">
  <p class="text">...</p>
</div>

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

۵. ملاحظات دسترسی‌پذیری

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

/* CSS */
body {
  --high-contrast: false;
}

@media (prefers-contrast: more) {
  body {
    --high-contrast: true;
  }
}

@container style(--high-contrast: true) {
  .component {
    background-color: black;
    color: white;
  }
}

/* HTML */
<div class="component">...

این امر تضمین می‌کند که وب‌سایت شما برای همه، صرف‌نظر از توانایی‌هایشان، قابل استفاده و در دسترس باشد. به استفاده از مدیا کوئری `@media (prefers-contrast: more)` برای تشخیص حالت کنتراست بالا در سطح سیستم عامل و سپس تنظیم پراپرتی سفارشی `--high-contrast` توجه کنید. این به شما امکان می‌دهد تا تغییرات استایل را با استفاده از یک کوئری استایل بر اساس تنظیمات سیستم کاربر فعال کنید.

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

• از نام‌های توصیفی برای پراپرتی‌های سفارشی استفاده کنید: نام‌هایی را انتخاب کنید که به وضوح هدف پراپرتی را نشان دهند (مثلاً --theme به جای --t).
• کوئری‌های استایل را ساده نگه دارید: از منطق پیچیده در داخل کوئری‌های استایل برای حفظ خوانایی و عملکرد اجتناب کنید.
• با یک پایه محکم شروع کنید: از CSS سنتی و مدیا کوئری‌ها برای طرح‌بندی و استایل‌دهی اولیه استفاده کنید. کوئری‌های استایل کانتینر باید CSS موجود شما را تقویت کنند، نه جایگزین آن شوند.
• عملکرد را در نظر بگیرید: در حالی که کوئری‌های استایل کانتینر به طور کلی کارآمد هستند، به تعداد کوئری‌هایی که استفاده می‌کنید و پیچیدگی استایل‌هایی که فعال می‌کنند، توجه داشته باشید. استفاده بیش از حد از آنها می‌تواند بر عملکرد، به ویژه در دستگاه‌های قدیمی‌تر، تأثیر بگذارد.
• به طور کامل تست کنید: کامپوننت‌های خود را در زمینه‌ها و مرورگرهای مختلف تست کنید تا از تطبیق صحیح آنها اطمینان حاصل کنید.
• از فال‌بک (Fallback) استفاده کنید: برای مرورگرهایی که هنوز به طور کامل از کوئری‌های استایل کانتینر پشتیبانی نمی‌کنند، استایل‌های جایگزین ارائه دهید. از کوئری‌های ویژگی (`@supports`) می‌توان برای اعمال شرطی کد کوئری استایل استفاده کرد.
• کامپوننت‌های خود را مستندسازی کنید: به وضوح کاربرد مورد نظر هر کامپوننت و پراپرتی‌های سفارشی که به آنها متکی است را مستند کنید.
• آبشار (Cascade) را در نظر بگیرید: به یاد داشته باشید که آبشار هنوز در داخل کوئری‌های استایل کانتینر اعمال می‌شود. هنگام تعریف استایل‌های خود به ویژگی (specificity) و وراثت توجه داشته باشید.
• از جاوا اسکریپت به ندرت استفاده کنید: در حالی که می‌توانید از جاوا اسکریپت برای تغییر پویای استایل‌ها روی کانتینر استفاده کنید، سعی کنید استفاده از آن را به حداقل برسانید. تا حد امکان برای تغییرات استایل به CSS تکیه کنید.

پشتیبانی مرورگرها

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

نتیجه‌گیری

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

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

منابع

• مستندات وب MDN: کوئری‌های کانتینر CSS
• کوئری‌های استایل کانتینر CSS – نگاهی اولیه
• پلی‌فیل‌های کوئری‌های استایل کانتینر