تخطيط حديث مع CSS Container Queries

CSS container queries تمثل من أهم قدرات layout المضافة لمنصة الويب في السنوات الأخيرة. على عكس media queries التي تستجيب لأبعاد viewport، container queries تُ enable المكوّنات للتكيف حسب حجم parent container. هذا shift من page-level إلى component-level responsiveness يحل مشكلة longstanding في design systems: بناء مكوّنات reusable حقًا تبدو صحيحة في أي context دون global breakpoint overrides.

Container Queries مقابل Media Queries

media queries أحدثت ثورة في responsive design بالسماح للأنماط بالتغيير حسب viewport width. لكن viewport width proxy ضعيف للمساحة المتاحة لمكوّن فردي. sidebar widget وdashboard card وfull-width hero section كلها بعرض مختلف حتى عندما viewport identical.

هذا mismatch يجبر المطورين على workarounds awkward:

• تمرير breakpoint props من parent components لت override child styles.
• استخدام JavaScript resize observers لت toggle classes حسب element width.
• إنشاء duplicate component variants لـ layout contexts مختلفة.
• الاعتماد على CSS grid وflexbox tricks ت break عند layout change.

container queries تeliminate هذه workarounds. مكوّن wrapped في container context ي adjust internal layout تلقائيًا عند تغيّر allocated space — سواء بسبب viewport resize أو sidebar toggle أو grid column reflow.

قاعدة @container

container queries تستخدم constructين CSS: خاصية container-type على parent element وat-rule @container على descendant styles. parent يُ declare نفسه query container، والأبناء يكتبون conditional styles حسب container dimensions.

/* Parent establishes a query container */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Each card container enables size queries for its children */
.product-card {
  container-type: inline-size;
  container-name: card;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Child styles respond to container width, not viewport */
@container card (min-width: 400px) {
  .product-card .card-body {
    display: flex;
    gap: 1rem;
  }

  .product-card .card-image {
    width: 40%;
    flex-shrink: 0;
  }

  .product-card .card-details {
    flex: 1;
  }
}

@container card (max-width: 399px) {
  .product-card .card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

خاصية container-type تقبل inline-size (width في horizontal writing modes) وsize (width وheight) أو normal (no container). معظم use cases layout تحتاج inline-size فقط، وهو الأكثر performance لأن browser ي track dimension واحد فقط.

Container Query Units

container queries أدخلت CSS length units جديدة reference query container dimensions بدل viewport. هذه units تُ enable fluid typography وspacing ي scale مع component size.

• cqw — 1% من query container width.
• cqh — 1% من query container height.
• cqi — 1% من query container inline size.
• cqb — 1% من query container block size.
• cqmin — الأصغر من cqi وcqb.
• cqmax — الأكبر من cqi وcqb.

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

.stat-widget .value {
  /* Font size scales with container width */
  font-size: clamp(1.5rem, 5cqi, 3rem);
}

.stat-widget .label {
  font-size: clamp(0.75rem, 2.5cqi, 1rem);
}

ادمج container query units مع clamp() لـ typography scale smoothly داخل مكوّن دون hard breakpoint jumps. stat widget في narrow sidebar column ي render text أصغر، بينما نفس المكوّن في wide dashboard panel ي render text أكبر — automatically، دون props أو JavaScript.

Style Queries وContainer Query Features

beyond size queries، CSS container queries specification يتضمن style queries تستجيب لـ computed style values للـ container. يمكن query custom property values، giving components awareness لـ parent theme context.

.theme-container {
  container-type: inline-size;
  --variant: default;
}

.theme-container[data-variant="compact"] {
  --variant: compact;
}

@container style(--variant: compact) {
  .nested-component {
    padding: 0.5rem;
    font-size: 0.875rem;
  }
}

style queries powerful خاصة في design systems حيث container يضبط semantic tokens وchild components adapt density وspacing وtypography accordingly. هذا النمط يستبدل prop-drilling variant flags عبر component trees.

بناء Responsive Components دون Media Queries

الهدف العملي لـ container queries مكوّنات تعمل correctly في كل مكان تُوضع. consider data table component في full-page view وmodal dialog وdashboard widget. مع media queries alone، كل three instances تشترك نفس breakpoint logic tied لـ viewport width، producing broken layouts في context واحد على الأقل.

مع container queries، table component ي define responsive behavior خاص:

• فوق 600px container width — اعرض كل columns في standard table layout.
• 400px إلى 600px — أخفِ columns low-priority، قلّل padding.
• تحت 400px — switch لـ stacked card layout بـ label-value pairs.

.data-table-wrapper {
  container-type: inline-size;
  container-name: table;
  overflow-x: auto;
}

@container table (max-width: 399px) {
  .data-table thead {
    display: none;
  }

  .data-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
  }

  .data-table td {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
  }

  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
  }
}

هذا المكوّن zero knowledge عن parent layout. drop it في أي container ويتكيف. ذلك وعد container queries fulfilled.

تكامل Framework

CSS frameworks حديثة embrace container queries natively. Tailwind CSS v4 يتضمن container query variants — prefix utilities بـ @ متبوعًا breakpoint لت apply styles حسب container size. styled-components وCSS-in-JS libraries تدعم @container at-rule في template literals دون configuration إضافي.

في React component libraries، establish container context عند component root ودع internal elements تستخدم container queries لـ layout decisions. document أي components container-aware حتى consumers يعرفون avoid constraining them تحت minimum functional width.

Browser Support وProgressive Enhancement

container queries enjoy broad browser support في 2026، coverage عبر Chrome وFirefox وSafari وEdge. للنسبة الصغيرة من legacy browsers بدون support، apply progressive enhancement: design default styles للـ container size الأكثر شيوعًا، ثم add container query overrides للمتصفحات الداعمة.

استخدم @supports rule لـ detect container query support وprovide media query fallbacks حيث necessary:

/* Fallback for browsers without container query support */
@media (max-width: 600px) {
  .product-card .card-body {
    flex-direction: column;
  }
}

/* Enhanced layout for supporting browsers */
@supports (container-type: inline-size) {
  @container card (max-width: 399px) {
    .product-card .card-body {
      flex-direction: column;
    }
  }
}

container queries mark نضج CSS كلغة لـ component-driven design. ب shift responsive logic من page level إلى component level، تُ enable design systems حيث كل مكوّن truly self-contained وadaptive وreusable. embrace container queries في مشروعك القادم واختبر responsive design كما كان م intended always.