گشایش طراحی واکنش‌گرا: راهنمای جامع کوئری‌های کانتینر CSS

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

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

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

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

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

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

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

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

پیاده‌سازی کوئری‌های کانتینر CSS شامل دو مرحله کلیدی است: تعریف کانتینر و نوشتن کوئری‌ها.

۱. تعریف کانتینر

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

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

شما همچنین می‌توانید از container-name برای نام‌گذاری کانتینر خود استفاده کنید، که می‌تواند برای هدف قرار دادن کانتینرهای خاص در کوئری‌های شما مفید باشد. برای مثال:

.card-container {
  container-type: inline-size;
  container-name: cardContainer;
}

این کد عنصر با کلاس .card-container را به عنوان یک کانتینر تعریف می‌کند. ما inline-size را مشخص کرده‌ایم تا کوئری‌ها بر اساس عرض کانتینر مجاز باشند. ما همچنین نام cardContainer را به آن داده‌ایم.

۲. نوشتن کوئری‌های کانتینر

هنگامی که کانتینر را تعریف کردید، می‌توانید با استفاده از دستور @container کوئری‌های کانتینر بنویسید. سینتکس آن شبیه به مدیا کوئری‌ها است:

@container cardContainer (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

این کوئری استایل‌های داخل آکولادها را فقط زمانی اعمال می‌کند که کانتینری به نام cardContainer حداقل عرض 400 پیکسل داشته باشد. این کوئری عنصر .card (احتمالاً فرزند .card-container) را هدف قرار داده و چیدمان آن را تنظیم می‌کند. اگر کانتینر باریک‌تر از 400 پیکسل باشد، این استایل‌ها اعمال نخواهند شد.

حالت کوتاه: شما همچنین می‌توانید از نسخه کوتاه دستور `@container` استفاده کنید، زمانی که نیازی به مشخص کردن نام کانتینر ندارید:

@container (min-width: 400px) {
  /* استایل‌هایی که وقتی کانتینر حداقل 400 پیکسل عرض دارد اعمال می‌شوند */
}

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

بیایید به چند مثال عملی نگاه کنیم که چگونه می‌توانید از کوئری‌های کانتینر برای ایجاد چیدمان‌های واکنش‌گرا و سازگارتر استفاده کنید.

مثال ۱: کامپوننت کارت

این مثال نشان می‌دهد که چگونه یک کامپوننت کارت را بر اساس عرض کانتینرش تطبیق دهیم. کارت محتوای خود را در یک ستون نمایش می‌دهد زمانی که کانتینر باریک است و در دو ستون زمانی که کانتینر گسترده‌تر است.

HTML:

<div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Card Image" class="card-image">
    <div class="card-content">
      <h3>Card Title</h3>
      <p>This is some sample content for the card.</p>
      <a href="#">Learn More</a>
    </div>
  </div>
</div>

CSS:

.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-image {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 10px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

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

مثال ۲: منوی ناوبری

این مثال نشان می‌دهد که چگونه یک منوی ناوبری را بر اساس فضای موجود تطبیق دهیم. هنگامی که کانتینر باریک است، آیتم‌های منو در یک منوی کشویی نمایش داده می‌شوند. هنگامی که کانتینر گسترده‌تر است، آیتم‌های منو به صورت افقی نمایش داده می‌شوند.

HTML:

<nav class="nav-container">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 10px;
}

.nav-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-container li {
  margin-bottom: 5px;
}

.nav-container a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

@container (min-width: 600px) {
  .nav-container ul {
    display: flex;
  }

  .nav-container li {
    margin-right: 10px;
    margin-bottom: 0;
  }

  .nav-container a {
    display: inline-block;
  }
}

در این مثال، .nav-container به عنوان کانتینر تعریف شده است. هنگامی که عرض کانتینر کمتر از 600 پیکسل باشد، آیتم‌های منو به صورت یک لیست عمودی نمایش داده می‌شوند. هنگامی که عرض کانتینر 600 پیکسل یا بیشتر باشد، آیتم‌های منو با استفاده از flexbox به صورت افقی نمایش داده می‌شوند.

مثال ۳: لیست محصولات

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

HTML:

<div class="product-listing-container">
  <div class="product-item">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name 1</h3>
    <p class="price">$19.99</p>
  </div>
  <div class="product-item">
    <img src="product2.jpg" alt="Product 2">
    <h3>Product Name 2</h3>
    <p class="price">$24.99</p>
  </div>
</div>

CSS:

.product-listing-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 10px;
}

.product-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.product-item h3 {
  margin-top: 0;
  font-size: 1.2em;
}

.product-item .price {
  font-weight: bold;
  color: #007bff;
}

@container (min-width: 400px) {
  .product-item {
    width: 50%;
    padding: 15px;
  }
}

@container (min-width: 768px) {
  .product-item {
    width: 33.33%;
  }
}

این کد CSS ابتدا `product-listing-container` را به عنوان یک کانتینر تعیین می‌کند. برای کانتینرهای باریک (کمتر از 400 پیکسل)، هر آیتم محصول 100٪ عرض را اشغال می‌کند. با بزرگ‌تر شدن کانتینر از 400 پیکسل، آیتم‌های محصول در دو ستون چیده می‌شوند. فراتر از 768 پیکسل، آیتم‌های محصول در سه ستون نمایش داده می‌شوند.

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

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

برای پشتیبانی از مرورگرهای قدیمی‌تر، می‌توانید از یک polyfill استفاده کنید. یک گزینه محبوب container-query-polyfill است که می‌توان آن را در npm و GitHub پیدا کرد. Polyfillها شکاف ویژگی‌های پشتیبانی نشده را پر می‌کنند و به شما امکان می‌دهند حتی در مرورگرهای قدیمی‌تر نیز از کوئری‌های کانتینر استفاده کنید.

بهترین شیوه‌ها برای استفاده از کوئری‌های کانتینر

در اینجا چند روش برتر برای استفاده از کوئری‌های کانتینر آورده شده است:

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

اشتباهات رایج و نحوه اجتناب از آن‌ها

• وابستگی‌های دَوَرانی: مراقب باشید که بین کوئری‌های کانتینر وابستگی‌های دَوَرانی ایجاد نکنید. به عنوان مثال، اگر اندازه کانتینر تحت تأثیر استایل‌های اعمال شده در داخل کوئری کانتینر قرار گیرد، می‌تواند منجر به رفتار غیرمنتظره شود.
• بیش از حد خاص بودن (Over-Specificity): از استفاده از انتخابگرهای بیش از حد خاص در کوئری‌های کانتینر خود اجتناب کنید. این می‌تواند نگهداری کد شما را دشوار کرده و منجر به تداخل با سایر استایل‌ها شود.
• نادیده گرفتن کانتینرهای تودرتو: هنگام استفاده از کانتینرهای تودرتو، اطمینان حاصل کنید که کوئری‌های شما کانتینر صحیح را هدف قرار می‌دهند. ممکن است برای جلوگیری از سردرگمی نیاز به استفاده از نام‌های کانتینر خاص‌تری داشته باشید.
• فراموش کردن تعریف کانتینر: یک اشتباه رایج فراموش کردن تعریف یک عنصر به عنوان کانتینر با استفاده از `container-type` است. بدون این، کوئری‌های کانتینر کار نخواهند کرد.

کوئری‌های کانتینر در مقابل مدیا کوئری‌ها: انتخاب ابزار مناسب

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

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

به طور کلی، از کوئری‌های کانتینر زمانی استفاده کنید که نیاز به تطبیق استایل یک کامپوننت بر اساس اندازه کانتینر آن دارید، و از مدیا کوئری‌ها زمانی استفاده کنید که نیاز به انجام تنظیمات چیدمان سراسری بر اساس اندازه ویوپورت دارید. اغلب، ترکیبی از هر دو تکنیک بهترین رویکرد است.

آینده طراحی واکنش‌گرا با کوئری‌های کانتینر

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

نتیجه‌گیری

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

منابع

• CSS Containment Module Level 3 (مشخصات W3C)
• کوئری‌های کانتینر CSS - اسناد وب MDN
• Container Query Polyfill در گیت‌هاب