تنسيقات مصغَّرة

عندما نفكر في التخطيطات، غالبًا ما نفكر في التصميمات على مستوى الصفحة. ولكن يمكن أن يكون للمكونات الأصغر داخل الصفحة تخطيطات مستقلة.

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

تخطيط من عمودين، أحدهما واسع والآخر ضيق. يتمّ وضع كائنات الوسائط بشكل مختلف حسب ما إذا كانت في العمود العريض أو الضيق.

معرّف الإصدار العالمي (GRid)

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

في هذا المثال، تنشئ العناصر الزائفة ::before و::after خطوطًا زخرفية على أي من جانبي العنوان. العنوان نفسه عبارة عن حاوية على شكل شبكة. يتم وضع العناصر الفردية بحيث تملأ الخطوط دائمًا المساحة المتاحة.

h1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1em;
}
h1::before,
h1::after {
  content: "";
  border-top: 0.1em double black;
  align-self: center;
}
أدوات المطوّرين في Firefox تعرض طبقة على شكل مربّعات أدوات المطوّرين في Chrome تعرض طبقة على شكل مربّعات
تحتوي المتصفّحات المتوافقة مع أجهزة الكمبيوتر المكتبي مثل Firefox وChrome على أدوات للمطوّرين يمكنها أن تعرض لك خطوط الشبكة والمساحات المركّبة على تصميمك.

تعرَّف على كيفية فحص تنسيقات الشبكة في "أدوات مطوري البرامج في Chrome".

صندوق مرنة

يمكنك استخدام flexbox كما يوحي الاسم لإضفاء مرونة على المكوّنات. يمكنك إعلان العناصر في المكون الذي ينبغي أن يكون لها حد أدنى أو أقصى للحجم والسماح للعناصر الأخرى بالانسيابية وفقًا لذلك.

في هذا المثال، تشغل الصورة ربع المساحة المتاحة ويشغل النص الأرباع الثلاثة الأخرى. ولكن لا يزيد حجم الصورة عن 200 بكسل أبدًا.

.media {
  display: flex;
  align-items: center;
  gap: 1em;
}
.media-illustration {
  flex: 1;
  max-inline-size: 200px;
}
.media-content {
  flex: 3;
}
أدوات المطوّرين في Firefox تعرض طبقة flexbox مركّبة. أدوات المطوّرين في Chrome تعرض طبقة flexbox مركّبة
يمكن أن تساعدك أدوات المطوّرين في Firefox وChrome في عرض شكل مكوّنات flexbox.

تعرَّف على كيفية فحص تنسيقات Flexbox في "أدوات مطوري البرامج في Chrome".

طلبات البحث عن الحاويات

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

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

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

لإعداد تقرير عن أبعاد أيّ حاوية، استخدِم طلبات بحث الحاويات.

للبدء، حدد العناصر التي تعمل كحاويات.

main,
aside {
  container-type: inline-size;
}

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

إذا كان أحد المكوّنات داخل إحدى هذه الحاويات، يمكنك تطبيق الأنماط بشكل مشابه لكيفية تطبيق استعلامات الوسائط.

.media-illustration {
  max-width: 200px;
  margin: auto;
}

@container (min-width: 25em) {
  .media {
    display: flex;
    align-items: center;
    gap: 1em;
  }

  .media-illustration {
    flex: 1;
  }

  .media-content {
    flex: 3;
  }
}

إذا كان هناك عنصر وسائط داخل حاوية أضيق من 25em، لن يتم تطبيق أنماط flexbox. يتم ترتيب الصورة والنص اللذين يظهران عموديًا.

وإذا كان عرض العنصر الذي يتضمّن الصورة أكبر من 25em، ستظهر الصورة والنص جنبًا إلى جنب.

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

حاويتان بأحجام مختلفة.

دمج الطلبات

يمكنك استخدام استعلامات الوسائط لتنسيق الصفحة واستعلامات الحاوية للمكونات داخل الصفحة.

في هذا المثال، تتضمّن البنية العامة للصفحة عنصر main وعنصر aside. وهناك كائنات وسائط داخل كلا العنصرين.

<body>
  <main>
     <div class="media">…</div>
     <div class="media">…</div>
  </main>
  <aside>
     <div class="media">…</div>
  </aside>
</body>

يطبِّق الاستعلام عن الوسائط تنسيقًا شبكيًا على العنصرَين main وaside عندما يكون إطار العرض أعرض من 45em.

@media (min-width: 45em) {
  body {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
}

تظلّ قاعدة طلب بحث الحاوية الخاصة بعناصر الوسائط كما هي: لا تطبِّق تنسيقًا أفقيًّا للعرض المرن إلا إذا كان العنصر الذي يتضمّن الصورة أكبر من 25em.

تخطيط من عمودين، أحدهما واسع والآخر ضيق. يتمّ وضع كائنات الوسائط بشكل مختلف حسب ما إذا كانت في العمود العريض أو الضيق.

تعتبر استعلامات الحاوية العامل الأساسي للتخطيطات الصغيرة. يمكن أن تكون المكونات مستقلة عن إطار عرض المتصفح.

التحقق من فهمك

اختبر معلوماتك عن التخطيطات الدقيقة.

هل استخدام الشبكة والإطار flexbox مفيدان للتخطيطات الدقيقة؟

صحيح
🎉 إجابة صحيحة
خطأ
إجابة غير صحيحة يعتبر كل من الشبكة وflexbox مفيدين للغاية، حتى بالنسبة إلى "أصغر" التخطيطات.

لقد تعرفت في السابق على تخطيطات ماكرو على مستوى الصفحة. الآن أنت تعرف عن التخطيطات المصغَّرة على مستوى المكون.

بعد ذلك، ستتعمق أكثر في الوحدات الأساسية للمحتوى وستتعلم كيفية جعل صورك سريعة الاستجابة. أولاً، ستتعرف على أسلوب الخط سريع الاستجابة.