كيفية عمل تصميم ويب متجاوب أفضل: الدليل الكامل (2026)

ملخص

يقف التصميم المتجاوب الحديث في عام 2026 على خمسة ركائز مستقرة (Baseline-stable): استعلامات الحاوية (Container Queries) (متوفرة على نطاق واسع منذ أغسطس 2025) لكي تتكيف المكونات مع حاويتها وليس مع نافذة العرض؛ الشبكة الفرعية (Subgrid) (متوفرة على نطاق واسع منذ مارس 2026) لمحاذاة العناصر عبر البطاقات المختلفة؛ :has() (منذ ديسمبر 2023) لكي تتمكن التخطيطات من التكيف مع محتواها؛ انتقالات العرض (View Transitions) (متوفرة حديثًا منذ أكتوبر 2025) لتغييرات التخطيط السلسة؛ وصور AVIF (دعم بنسبة +95%) داخل <picture> لملفات أصغر بنسبة ~50% من JPEG. أما CSS الخاص بالأجهزة القابلة للطي (horizontal-viewport-segments، device-posture) فلا يزال في مرحلة التجربة (origin-trial) فقط في Chrome 125+، لذا استخدم polyfill أو التحسين التدريجي.

كان التصميم المتجاوب يعني سابقًا ثلاث نقاط توقف (breakpoints): الموبايل، التابلت، والديسكطوب. هذا أصبح تاريخًا قديمًا الآن.

في عام 2026، أنت تصمم لأكثر من 100 حجم جهاز. هواتف ذكية بشاشات 6-7 بوصة. أجهزة قابلة للطي تفتح لتصل لحجم التابلت. أجهزة ديسكطوب بشاشات 5K. ساعات. نظارات AR. يجب أن تعمل التطبيقات بلا عيوب عبر مجموعة واسعة من السياقات، وقد يكون نفس المكون بعرض 300 بكسل في شريط جانبي أو 1000 بكسل في المساحة الرئيسية.

غيرت استعلامات الحاوية (Container Queries) كل شيء. بدلًا من السؤال "ما هو عرض نافذة العرض؟" أنت تسأل "ما هو عرض الحاوية الخاصة بي؟" يغطي هذا الدليل أدوات التصميم المتجاوب الحديثة: استعلامات الحاوية، CSS Subgrid، الصور المتجاوبة، وكيفية الاختبار عبر التنوع الحقيقي للأجهزة التي يمتلكها المستخدمون.

استعلامات الحاوية: مغير اللعبة

تسمح استعلامات الحاوية للمكونات بالتكيف بناءً على حجمها هي، وليس نافذة العرض. هذا هو أهم تقدم في التصميم المتجاوب منذ استعلامات الوسائط (media queries).

وصلت استعلامات حاوية الحجم إلى Baseline متوفر حديثًا في فبراير 2023 وتخرجت إلى Baseline متوفر على نطاق واسع في أغسطس 2025، مما يعني أنها الآن آمنة للاستخدام في الإنتاج دون الحاجة لبدائل (fallbacks) للجمهور العام.¹

الصيغة الأساسية

/* Define a container context */
.card-container {
  container-type: inline-size; /* Watch the width of this element */
  container-name: card; /* Optional: name it for specificity */
}

/* Query the container size */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@container (max-width: 300px) {
  .card {
    display: block;
  }
}

يعيد مكون البطاقة تشكيل نفسه تلقائيًا بناءً على عرض الحاوية الخاصة به، بغض النظر عن حجم نافذة العرض.

لماذا هذا مهم

النهج القديم باستخدام استعلامات الوسائط (media queries):

/* You have to know the card sits in a sidebar on mobile, main on desktop */
@media (min-width: 768px) {
  .card { grid-template-columns: 1fr 1fr; }
}

النهج الجديد باستخدام استعلامات الحاوية (Container Queries):

/* The card doesn't care where it is—it adapts to its space */
@container (min-width: 400px) {
  .card { grid-template-columns: 1fr 1fr; }
}

هذا يعني أن نفس مكون Card يعمل في:

• شريط جانبي بعرض 300 بكسل (عمود واحد)
• نافذة منبثقة (modal) بعرض 600 بكسل (عمودان)
• منطقة رئيسية بعرض 1200 بكسل (عمودان)
• جزء أيسر من جهاز قابل للطي (عمود واحد)

دون كتابة إصدارات متعددة أو استعلامات وسائط.

مثال عملي: بطاقة مدونة

// Component stays the same—CSS adapts it
export function BlogCard({ post }) {
  return (
    <article className="card">
      <img src={post.image} alt={post.title} className="card-image" />
      <h3>{post.title}</h3>
      <p>{post.excerpt}</p>
      <a href={post.url}>Read more</a>
    </article>
  );
}

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

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Narrow: stacked layout */
@container (max-width: 350px) {
  .card-image {
    height: 150px;
  }
}

/* Wide: side-by-side */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 250px 1fr;
  }

  .card-image {
    height: auto;
  }
}

/* Very wide: larger image */
@container (min-width: 700px) {
  .card {
    grid-template-columns: 350px 1fr;
  }
}

نفس المكون يعمل الآن بشكل مثالي في أي سياق.

CSS Subgrid للتخطيطات المتجاوبة المعقدة

تسمح الشبكة الفرعية (Subgrid) للشبكات الفرعية بوراثة مسارات الشبكة الأب. هذا يحل كوابيس المحاذاة.

أصبحت الشبكة الفرعية (Subgrid) Baseline متوفرة على نطاق واسع في 15 مارس 2026، مع دعم عبر Chrome 117+، Edge 117+، Firefox 71+، و Safari 16+.² يمكنك الاعتماد عليها في الإنتاج اليوم.

المشكلة: بدون الشبكة الفرعية (Subgrid)

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* These rows don't align across cards! */
}

كل بطاقة لها ارتفاعات صفوف مختلفة لأن محتواها يختلف. بدون الشبكة الفرعية، تكون محاذاة الأزرار في الأسفل مستحيلة.

الحل: مع الشبكة الفرعية (Subgrid)

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto; /* Define rows for all children */
  gap: 1rem;
}

.card {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid; /* Inherit parent's rows */
}

الآن تتم محاذاة أزرار جميع البطاقات في الأسفل تلقائيًا.

مثال عملي: شبكة منتجات

export function ProductGrid({ products }) {
  return (
    <div className="product-grid">
      {products.map(product => (
        <article key={product.id} className="product-card">
          <img src={product.image} alt={product.name} />
          <h3>{product.name}</h3>
          <p className="description">{product.description}</p>
          <p className="price">{product.price}</p>
          <button>Add to Cart</button>
        </article>
      ))}
    </div>
  );
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-template-rows: auto 1fr auto auto auto; /* Image, title, description, price, button */
  gap: 1rem;
}

.product-card {
  display: grid;
  grid-template-columns: subgrid; /* Inherit parent columns */
  grid-template-rows: subgrid; /* Inherit parent rows */
}

img {
  grid-column: 1;
  grid-row: 1;
}

h3 {
  grid-column: 1;
  grid-row: 2;
}

.description {
  grid-column: 1;
  grid-row: 3;
}

.price {
  grid-column: 1;
  grid-row: 4;
}

button {
  grid-column: 1;
  grid-row: 5;
}

تتم محاذاة جميع الأزرار بشكل مثالي، بغض النظر عن طول المحتوى.

:has() — تخطيطات متجاوبة تتكيف مع المحتوى

تسمح الفئة الزائفة العلائقية :has() للعنصر الأب بتنسيق نفسه بناءً على ما بداخله. وصلت إلى Baseline متوفر حديثًا في ديسمبر 2023 وهي الآن قابلة للتشغيل البيني عبر Chrome و Edge و Safari و Firefox.³

بالنسبة للتصميم المتجاوب، هذا أمر ضخم — فهو يتيح لك تغيير التخطيط دون كتابة JavaScript أو إضافة فئات مساعدة إضافية:

/* Card with no image collapses to a tighter layout */
.card:not(:has(img)) {
  padding-block: 0.75rem;
}

/* Form whose submit button is :disabled dims the whole row */
.form-row:has(button:disabled) {
  opacity: 0.6;
}

/* Grid that contains a featured item gives it extra columns */
.grid:has(.feature) {
  grid-template-columns: 2fr 1fr 1fr;
}

اجمع بين :has() واستعلامات الحاوية ويمكنك بناء مكونات تستجيب لكل من حجمها ومحتواها — وهما الساقان المفقودتان في CSS المتجاوب قبل عام 2023.

انتقالات العرض لتغييرات التخطيط

وصلت انتقالات العرض لنفس المستند (Same-document View Transitions) إلى Baseline متوفر حديثًا في أكتوبر 2025، مع دعم Chrome 114+، Edge 114+، Safari 17+، و Firefox 144+ لـ API.⁴ عندما تقلب نقطة توقف تخطيطك من عمود واحد إلى عمودين، يمكن لـ View Transitions إجراء تلاشي متقاطع للتغيير بدلاً من القفز المفاجئ.

function toggleSidebar() {
  if (!document.startViewTransition) {
    // Older browsers: just update the DOM
    document.body.classList.toggle('sidebar-open');
    return;
  }

  document.startViewTransition(() => {
    document.body.classList.toggle('sidebar-open');
  });
}

/* Slow down the default fade for smoother layout shifts */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 250ms;
}

يتراجع API بشكل لائق — إذا كان المتصفح لا يدعمه، فسيظل تحديث DOM يعمل بدون رسوم متحركة، لذا من الآمن اعتماده كتحسين تدريجي.

الصور المتجاوبة

يجب أن تتكيف الصور مع نافذة العرض، الجهاز، وكثافة البكسل.

عنصر <picture>

تقديم صور مختلفة بناءً على حجم نافذة العرض:

<picture>
  <!-- Desktop: full-width image -->
  <source media="(min-width: 1200px)" srcset="hero-2000w.avif" />

  <!-- Tablet: medium image -->
  <source media="(min-width: 768px)" srcset="hero-1000w.avif" />

  <!-- Mobile: small image -->
  <source media="(max-width: 767px)" srcset="hero-500w.avif" />

  <!-- Fallback for older browsers -->
  <img src="hero-500w.jpg" alt="Hero section" />
</picture>

سمة srcset

دع المتصفح يختار أفضل دقة:

<img
  src="image-400w.avif"
  srcset="
    image-400w.avif 400w,
    image-800w.avif 800w,
    image-1200w.avif 1200w,
    image-2000w.avif 2000w
  "
  sizes="
    (max-width: 600px) 100vw,
    (max-width: 1200px) 90vw,
    1000px
  "
  alt="Product image"
/>

هذا يخبر المتصفح:

• على الشاشات التي يصل عرضها إلى 600 بكسل، قم بتحميل صورة تمثل 100% من عرض نافذة العرض
• على الشاشات من 600 إلى 1200 بكسل، قم بتحميل 90% من عرض نافذة العرض
• للشاشات الأكبر، قم بتحميل صورة ثابتة بعرض 1000 بكسل
• استخدم دائمًا أصغر صورة تغطي ذلك العرض

يختار المتصفح من srcset (400w، 800w، إلخ) بناءً على حساباته.

تنسيق AVIF

AVIF هو ترميز الصور الحديث المفضل. اعتبارًا من عام 2026، يتمتع بـ دعم عالمي للمتصفحات بنسبة >95% (Chrome و Edge و Firefox و Safari تدعمه جميعًا بشكل أصلي)،⁵ لذا يمكنك جعل AVIF مصدرك الأساسي بأمان والاحتفاظ بـ WebP/JPEG فقط كبديل دفاعي للعملاء القدامى.

<picture>
  <!-- Use AVIF for modern browsers -->
  <source srcset="image.avif" type="image/avif" />

  <!-- Fallback to WebP -->
  <source srcset="image.webp" type="image/webp" />

  <!-- Fallback to JPEG -->
  <img src="image.jpg" alt="Description" />
</picture>

التوفير النموذجي (تختلف النتائج حسب الصورة):

التنسيق	الحجم التقريبي	مقارنة بـ JPEG
JPEG	100 KB	الأساس
WebP	65–75 KB	أصغر بنسبة ~25–35%
AVIF	50–60 KB	أصغر بنسبة ~40–50%

AVIF أصغر بنسبة 20–30% تقريبًا من WebP بنفس الجودة المدركة، وحوالي نصف حجم JPEG للمحتوى الفوتوغرافي النموذجي.⁶ الصور غير المفقودة (Lossless) والاصطناعية قد تكسر هذا الترتيب — قم بإجراء اختبار قياسي على عينة ممثلة من أصولك الخاصة قبل الاستغناء تمامًا عن WebP.

التصميم المتجاوب لأشكال الأجهزة الجديدة

الأجهزة القابلة للطي

تحتوي الأجهزة القابلة للطي على شاشتين يفصل بينهما مفصل. نافذة العرض تحتوي حرفيًا على فجوة.

لا تزال لغة CSS للأجهزة القابلة للطي تجريبية حتى عام 2026 — حيث تقدم Chrome ميزات Viewport Segments و Device Posture خلف تجربة المصدر (Chrome 125+).⁷ ميزات الوسائط القياسية هي horizontal-viewport-segments (مفصل عمودي ← أعمدة متجاورة) و vertical-viewport-segments (مفصل أفقي ← صفوف مكدسة)، مقترنة بمتغيرات البيئة env(viewport-segment-*).

/* Detect a vertically-hinged dual-screen / foldable */
@media (horizontal-viewport-segments: 2) {
  .layout {
    display: grid;
    /* Width of the left segment */
    grid-template-columns:
      env(viewport-segment-width 0 0)
      1fr;
  }

  /* Avoid placing critical UI over the hinge gap */
  .hinge-gutter {
    width: calc(
      env(viewport-segment-left 1 0) -
      env(viewport-segment-right 0 0)
    );
  }
}

/* Posture-based fallback */
@media (device-posture: folded) {
  body {
    /* Adjust spacing when the device is folded */
  }
}

نظرًا لأن بناء الجملة (syntax) مخصص لتجربة المصدر فقط، قم بشحن polyfill لجمهور الإنتاج (Viewport Segments CSS Polyfill على GitHub) أو استخدم اكتشاف الميزات مع @supports والتحسين التدريجي. لا توجد ميزة وسائط fold-left / fold-right في المواصفات — تدوينات المدونات القديمة التي تذكر تلك الأسماء تسبق بناء الجملة الموحد. اختبر على Samsung Galaxy Z Fold أو Google Pixel Fold باستخدام محاكيات Android مع تمكين تجربة المصدر للأجهزة القابلة للطي.

الشاشات الكبيرة (>1920 بكسل)

لا تمد المحتوى إلى ما لا نهاية. استخدم أقصى عرض (max-width) والتوسيط:

body {
  max-width: 1400px;
  margin: 0 auto;
}

/* For ultra-wide screens, add whitespace */
@media (min-width: 2560px) {
  body {
    max-width: 1600px;
  }
}

الساعات والشاشات الصغيرة

الساعات الذكية الأصلية (watchOS، Wear OS) لا تشغل متصفح ويب للأغراض العامة، لذا تتعلق هذه الحالة في الغالب بـ webviews المدمجة الضيقة والشاشات الداخلية الصغيرة جدًا للأجهزة القابلة للطي. اجعل التصميم بنظام العمود الواحد، مع أهداف لمس أكبر (44 بكسل كحد أدنى):

@container (max-width: 280px) {
  button {
    padding: 0.75rem 1rem; /* 44px+ height */
  }

  .card {
    display: block; /* No grid */
  }
}

اختبار التصميم المتجاوب

وضع الجهاز في Chrome DevTools

F12 ← تبديل شريط أدوات الجهاز (Ctrl+Shift+M). اختبر:

• جميع نقاط التوقف (breakpoints)
• تفاعلات اللمس
• نسب بكسل الجهاز

أطر عمل الاختبار المتجاوب

تسمح لك BrowserStack و Sauce Labs و LambdaTest بالاختبار على أجهزة حقيقية.

التحقق من صحة CSS

# Check for responsive issues
npx stylelint "**/*.css"

اختبار A/B للتخطيطات المتجاوبة

استخدم أعلام الميزات (feature flags) لاختبار التباينات:

export function CardLayout({ post }) {
  const isNewLayout = useFeatureFlag('new-card-layout');

  return isNewLayout ? (
    <CardNewLayout post={post} />
  ) : (
    <CardOldLayout post={post} />
  );
}

قم بقياس معدل الارتداد، والتفاعل، والتحويل لكل متغير. البيانات هي التي تقود القرارات، وليس التخمينات.

أهم النقاط المستفادة

التصميم المتجاوب في عام 2026:

1. استعلامات الحاوية (Container Queries) أولاً: صمم مكونات تتكيف مع سياقها، وليس مع منفذ العرض (viewport)
2. Subgrid للمحاذاة: تخطيطات معقدة بخطوط أساس متسقة
3. الصور المتجاوبة: AVIF + srcset لملفات أصغر وأداء أفضل
4. احتضان أشكال الأجهزة الجديدة: الأجهزة القابلة للطي والشاشات الكبيرة هي حالات استخدام حقيقية
5. الاختبار المكثف: استخدم أجهزة حقيقية، وليس فقط الكمبيوتر المحمول الخاص بك
6. قياس التأثير: اختبر تغييرات التخطيط عبر اختبار A/B وكرر بناءً على البيانات

لم يعد الويب يقتصر على ثلاثة أحجام فقط. قم ببناء مكونات تتكيف بسلاسة مع التنوع اللانهائي للأجهزة في أيدي المستخدمين.

---

Footnotes

1. "CSS Container Queries (Size)" — Can I use and "August 2025 Baseline monthly digest" — web.dev. Size container queries reached Baseline Newly available in February 2023 and Baseline Widely available in August 2025. ↩

2. "CSS Subgrid" — Can I use and "March 2026 Baseline monthly digest" — web.dev. Subgrid hit Baseline Widely available on 15 March 2026. ↩

3. ":has() CSS relational pseudo-class" — Can I use and "Baseline 2023" — web.dev. :has() reached Baseline Newly available in December 2023 with Firefox 121. ↩

4. "View Transitions API (single-document)" — Can I use and "Same-document view transitions have become Baseline Newly available" — web.dev. Same-document View Transitions hit Baseline Newly available on 14 October 2025 with Firefox 144. ↩

5. "AVIF image format" — Can I use. Global support exceeds 95% across Chrome, Edge, Firefox and Safari in 2026. ↩

6. "Comparing AVIF vs WebP file sizes at the same DSSIM" — Ctrl blog and "Using Modern Image Formats: AVIF And WebP" — Smashing Magazine. AVIF is typically ~50% smaller than JPEG and ~20–30% smaller than WebP at the same perceived quality, but results vary per image. ↩

7. "Origin trial for Foldable APIs" — Chrome for Developers and "horizontal-viewport-segments" — MDN. The Viewport Segments and Device Posture features are origin-trial only as of Chrome 125 onward and are not yet Baseline. ↩