ساختاردهی صفحه با CSS container

با رشد پیچیدگی رابط‌های کاربری و نیاز به ساخت کامپوننت‌های قابل استفاده مجدد، محدودیت‌های media query که فقط اندازهٔ پنجرهٔ مرورگر را می‌بینند آشکار شد. CSS Container (یا Container Queries) امکان طراحی واکنش‌گرا را به سطحی جدید می‌برد: حالا می‌توان رفتار یک کامپوننت را بر اساس اندازهٔ کانتینری که در آن قرار دارد تغییر داد، نه صرفاً بر اساس viewport. این رویکرد باعث ایجاد رابط‌های انعطاف‌پذیرتر، مستقل و قابل ترکیب می‌شود.

مزایا به‌صورت خلاصه

• طراحی مولفه‌ای (component-driven) و قابل استفادهٔ مجدد
• کاهش پیچیدگی CSS و حذف نیاز به overrideهای سنگین
• افزایش خوانایی و نگهداری کد
• عملکرد بهتر در شرایط مناسب (کاهش محاسبات مجدد برای کل صفحه)

مبانی: چگونه کار می‌کند؟

برای فعال‌سازی container query ابتدا باید یک عنصر والد «کانتینر» تعریف شود با دستور container-type یا container-name. سپس از قانون @container برای نوشتن شرط‌ها مشابه media query استفاده می‌کنیم. نمونهٔ سادهٔ زیر این مفهوم را نشان می‌دهد.

<div class="card-wrapper">
  <article class="card">
    <h2>عنوان</h2>
    <p>متن نمونه...</p>
  </article>
</div>

/* CSS */.card-wrapper {
  container-type: inline-size; /* این عنصر اکنون کانتینر است */}

.card {
  padding: 1rem;
  background: #fff;
}

@container (min-width: 40rem) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

توضیح: در این مثال، .card-wrapper با container-type: inline-size تعریف شده است که به معنی «اندازهٔ طولی» کانتینر (معمولاً عرض) برای محاسبات است. سپس با @container (min-width: 40rem) قوانین اختصاصی زمانی اعمال می‌شوند که عرض کانتینر بزرگ‌تر یا مساوی 40rem شود. برخلاف media query، این شرط به اندازهٔ کل صفحه وابسته نیست بلکه به اندازهٔ .card-wrapper بستگی دارد.

نمونهٔ پیشرفته: نام‌گذاری کانتینرها و چند شرط

گاهی لازم است چند کانتینر در یک صفحه داشته باشیم و بخواهیم به‌صورت انتخابی به یکی هدف بگیریم؛ برای این منظور از container-name استفاده می‌کنیم.

.panel {
  container-type: size;      /* اندازهٔ عرض و ارتفاع */  container-name: sidebar;  /* نام کانتینر برای هدف‌گیری */}

@container sidebar (max-width: 20rem) {
  .panel .title {
    font-size: 0.9rem;
  }
}

@container sidebar (min-width: 20rem) and (max-width: 40rem) {
  .panel { padding: 1.5rem; }
}

توضیح: این کد یک کانتینر با نام sidebar می‌سازد و سپس با استفاده از نام آن، دو شرط مختلف با محدودهٔ اندازه تعریف می‌کند. استفاده از container-type: size یعنی هم عرض و هم ارتفاع برای شرط‌ها در دسترس خواهد بود.

تفاوت با Media Queries

• Media Queries به ابعاد viewport نگاه می‌کنند؛ Container Queries به ابعاد عنصر والد.
• Container Queries برای طراحی کامپوننت‌ها مفیدتر است چون رفتار آن‌ها مستقل از اندازهٔ کل صفحه قابل کنترل است.
• در ترکیب با Grid یا Flex، Container Query اجازه می‌دهد هر آیتم بر پایهٔ فضای اختصاص‌یافتهٔ خودش تغییر کند.

مثال عملی: کارت‌هایی که در ستون‌های مختلف تغییر می‌کنند

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.card {
  container-type: inline-size;
  background: #f9f9f9;
  padding: 1rem;
}

@container (min-width: 28rem) {
  .card { font-size: 1.1rem; }
}

@container (min-width: 40rem) {
  .card { display: grid; grid-template-columns: 1fr 120px; align-items: center; }
}

توضیح: در این مثال هر کارت خودش کانتینر است. وقتی عرض کارت به 28rem برسد اندازهٔ فونت افزایش می‌یابد. اگر کارت فضای بیشتری داشته باشد (40rem)، ساختار آن به دو ستون تبدیل می‌شود. چنین رفتاری در media query امکان‌پذیر نیست مگر با پیچیدگی زیاد.

بهترین تمرین‌ها و نکات عملکردی

• فقط عناصر لازم را کانتینر کنید؛ تعریف بی‌رویهٔ container-type می‌تواند هزینهٔ رندر داشته باشد.
• اگر فقط عرض مهم است، از inline-size استفاده کنید تا محدودهٔ محاسبات محدودتر شود.
• برای پیمایش سازنده‌ها (nested containers)، به توالی قرارگیری و بلوک‌بندی دقت کنید—هر کانتینر مستقل است.
• برای پشتیبانی مرورگرها وضعیت پشتیبانی را بررسی کنید و در صورت نیاز به fallback با media queries یا جاوااسکریپت عمل کنید.

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

نکته: وضعیت دقیق پشتیبانی ممکن است تغییر کند؛ برای اطلاعات به‌روز از منابعی مثل CanIUse یا MDN استفاده کنید.

محدودیت‌ها و نکات احتیاطی

• Container Query بر اساس اندازهٔ کانتینر محاسبه می‌شود؛ اگر عنصر والد اندازهٔ پویایی داشته باشد، نتایج ممکن است پیچیده شوند.
• برخی ویژگی‌ها (مانند محاسبات پیچیدهٔ اندازه یا عناصر position خارج از جریان) ممکن است نیاز به تست دقیق داشته باشند.
• اگر نیاز به پشتیبانی برای مرورگرهای قدیمی دارید، ترکیب با media queries یا پلیفیل‌های جاوااسکریپت ممکن است لازم باشد.

خلاصه و توصیهٔ کاربردی

CSS Container Queries ابزار قدرتمندی برای ساخت کامپوننت‌های مستقل و واکنش‌گرا است. با تعریف هوشمندانهٔ کانتینرها، استفاده از inline-size برای موارد عرضی و نام‌گذاری کانتینرها برای هدف‌گیری دقیق، می‌توانید رابط‌های منعطف و مقیاس‌پذیر بسازید. هم‌زمان عملکرد و سازگاری را مد نظر قرار دهید و قبل از استقرار در پروژه‌های بزرگ، تست‌های سازگاری و عملکرد انجام دهید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال