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

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

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

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

معرّف الإصدار العالمي (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 مفيدان للتخطيطات الدقيقة؟

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

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