ميزات CSS الحديثة التي تبسط التصميمات المتجاوبة

كان بناء التصميمات المتجاوبة يعني سابقًا استعلامات وسائط لا تنتهي، وإزالة العوامات، وحسابات نسب هشة. كنت تكتب دستة من نقاط التوقف فقط لمنع بطاقة من التجاوز على الأجهزة اللوحية. غيرت CSS الحديثة ذلك. ميزات مثل استعلامات الحاوية وclamp() وشبكة CSS تتيح لك كتابة تصميمات تتكيف مع سياقها - وليس فقط مع نافذة العرض - بكود أقل بكثير.

لماذا يبدو التصميم المتجاوب التقليدي معطلاً؟

يعتمد النهج الكلاسيكي على نقاط توقف مبنية على نافذة العرض. تتحقق من عرض الشاشة، ثم تتجاوز الأنماط لكل نطاق. هذا يعمل لتخطيط الصفحة، لكنه ينهار للمكونات القابلة لإعادة الاستخدام. قد تكون بطاقة في شريط جانبي بعرض 300 بكسل، بينما نفس البطاقة في العمود الرئيسي بعرض 800 بكسل. لا تستطيع استعلامات الوسائط لنافذة العرض التمييز بينهما - فهي تعرف حجم الشاشة فقط.

أضافت العوامات وحيل clearfix طبقة أخرى من التعقيد. حتى مع flexbox، غالبًا ما كتب المطورون قواعد زائدة للتعامل مع الحالات الحدية. النتيجة: CSS منتفخ، وسلوك غير متوقع، وصداع في الصيانة.

استعلامات الحاوية: متجاوبة مع العنصر الأب، وليس نافذة العرض

استعلامات الحاوية هي أكبر تحول في التصميم المتجاوب منذ استعلامات الوسائط. بدلاً من السؤال "ما مدى عرض الشاشة؟"، تسأل "ما مدى عرض حاويتي؟". هذا يجعل المكونات قابلة لإعادة الاستخدام حقًا.

لاستخدامها، عرّف سياق احتواء باستخدام container-type، ثم اكتب قواعد @container:

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

.card {
  display: grid;
  gap: 1rem;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 150px 1fr;
  }
}

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

متى تستخدم استعلامات الحاوية مقابل استعلامات الوسائط

• استعلامات الحاوية: للمكونات التي تظهر في سياقات متعددة (البطاقات، الودجات، كتل التنقل).
• استعلامات الوسائط: لتغييرات تخطيط الصفحة (الشبكة العامة، الرأس/التذييل، أنماط الطباعة).

التحجيم المرن باستخدام clamp() وmin()/max()

نقاط التوقف الثابتة تخلق قفزات. يتيح لك clamp() تحديد حجم أدنى ومفضل وأقصى في سطر واحد:

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

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

min() وmax() مفيدتان بنفس القدر. على سبيل المثال، width: min(100% - 2rem, 1200px) ينشئ حاوية مركزية لا تلمس الحواف أبدًا على الشاشات الصغيرة.

شبكة CSS: تخطيطات جوهرية بدون نقاط توقف

تقدم شبكة CSS وظيفتين قويتين للتصميم المتجاوب: auto-fit وminmax(). عند دمجهما، ينشئان شبكة متجاوبة تلتف تلقائيًا:

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

تنتج هذه القاعدة الواحدة أكبر عدد ممكن من الأعمدة، كل منها بعرض 250 بكسل على الأقل. على الهاتف، تحصل على عمود واحد؛ على سطح المكتب، أربعة أو أكثر. لا استعلامات وسائط، لا JavaScript.

لمزيد من التحكم، يتيح لك grid-template-areas تحديد مناطق مسماة وإعادة ترتيبها عند نقاط توقف مختلفة بأقل كود ممكن.

Subgrid لمحاذاة العناصر المتداخلة

يحل Subgrid مشكلة قديمة: محاذاة العناصر الفرعية عبر عناصر شبكة مختلفة. إذا كان لديك صف من البطاقات مع رؤوس ومحتوى وتذييلات، فأنت تريد أن تصطف الرؤوس. يتيح Subgrid لشبكة فرعية أن ترث مسارات العنصر الأب:

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

الآن تتشارك جميع البطاقات نفس ارتفاعات الصفوف، مما يحافظ على محاذاة المحتوى دون ارتفاعات ثابتة أو JavaScript.

Aspect-Ratio: لا مزيد من حيل الحشو

قبل aspect-ratio، كان الحفاظ على صندوق بنسبة 16:9 يتطلب حيلة padding-bottom. الآن هي خاصية واحدة:

.video-thumbnail {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

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

الخصائص المنطقية للتدويل

الخصائص المنطقية مثل margin-inline وpadding-block وinset-inline-start تحل محل الاتجاهات المادية (يسار، يمين، أعلى، أسفل). تتكيف تلقائيًا مع أنماط الكتابة، لذا يعمل تخطيطك في لغات RTL دون CSS إضافي. على سبيل المثال، margin-inline: auto يمركز كتلة أفقيًا في سياقات LTR وRTL.

مقارنة: التقنيات القديمة مقابل الحديثة

تجميع كل شيء: مكون بطاقة متجاوب

لنبنِ بطاقة تتكيف مع حاويتها، وتستخدم تباعدًا مرنًا، وتحافظ على نسبة عرض وسائط:

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

.card {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  border-radius: 4px;
}

@container (min-width: 500px) {
  .card {
    grid-template-columns: 200px 1fr;
    align-items: center;
  }
}

يعمل هذا المكون في أي سياق - شريط جانبي، محتوى رئيسي، أو نافذة منبثقة - دون استعلام وسائط واحد.

دعم المتصفح والبدائل

استعلامات الحاوية مدعومة في جميع المتصفحات الحديثة (Chrome 105+، Firefox 110+، Safari 16+). clamp() والشبكة وaspect-ratio لها دعم أوسع. للمتصفحات الأقدم، يمكنك تقديم بدائل باستخدام @supports:

@supports not (container-type: inline-size) {
  .card {
    display: flex;
    flex-wrap: wrap;
  }
}

عمليًا، يمكن لمعظم المشاريع تبني هذه الميزات اليوم بأقل مخاطرة.

الأسئلة الشائعة

ما هي استعلامات الحاوية وكيف تختلف عن استعلامات الوسائط؟

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

هل يمكنني استخدام clamp() للتباعد المتجاوب؟

نعم. يعمل clamp() مع أي قيمة طول، بما في ذلك الحشو والهامش والفجوة. يوفر تحجيمًا مرنًا بدون نقاط توقف، مما يجعله مثاليًا لأنظمة التباعد المتجاوبة.

هل تحل ميزات CSS الحديثة محل استعلامات الوسائط تمامًا؟

لا. لا تزال استعلامات الوسائط مفيدة لتغييرات تخطيط الصفحة وأنماط الطباعة. الميزات الحديثة مثل استعلامات الحاوية وclamp() تكملها، مما يقلل الحاجة إلى العديد من نقاط التوقف ولكن لا يلغيها تمامًا.

هل أنت مستعد لاختبار CSS المتجاوب الخاص بك؟ استخدم محول HTML إلى صورة لالتقاط لقطات سريعة لتخطيطاتك بأحجام مختلفة والتحقق من كيفية تكيفها.