عندما نفكر في التنسيقات، غالبًا ما نفكر في التصاميم على مستوى الصفحة. ولكن يمكن أن تتضمّن المكوّنات الأصغر داخل الصفحة تنسيقات مستقلة بذاتها.
من المفترض أن يتم تعديل هذه التنسيقات على مستوى المكوّن تلقائيًا، بغض النظر عن موضعها في الصفحة. قد تحدث حالات لا تعرف فيها ما إذا كان سيتم وضع مكوّن في عمود المحتوى الرئيسي أو الشريط الجانبي أو كليهما. بدون معرفة المكان الذي سينتهي إليه المكوّن، عليك التأكّد من أنّه يمكنه تعديل نفسه ليناسب الحاوية.
شبكة
شبكة 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;
}
تعرّف على كيفية فحص تنسيقات الشبكة في "أدوات مطوّري البرامج في Chrome".
Flexbox
كما يوحي الاسم، يمكنك استخدام flexbox لجعل مكوّناتك مرنة. يمكنك تحديد العناصر التي يجب أن يكون لها حجم أدنى أو أقصى في مكوّنك، والسماح للعناصر الأخرى بالمرونة لتناسب ذلك وفقًا لذلك.
في هذا المثال، تشغل الصورة ربع المساحة المتاحة ويشغل النص ثلاثة أرباعها. ولكن لا يزيد حجم الصورة عن 200 بكسل.
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
تعرّف على كيفية فحص تنسيقات 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;
}
}
تظلّ قاعدة طلب الحاوية لعناصر الوسائط كما هي: لا يتم تطبيق تنسيق flexbox أفقي إلا إذا كان العنصر الذي يتضمّن عنصر الوسائط أوسع من 25em.
تُحدث طلبات الحاوية تغييرًا جذريًا في التنسيقات الصغيرة. يمكن أن تكون مكوّناتك مستقلة بذاتها، بغض النظر عن إطار عرض المتصفّح.
اختبِر معلوماتكَ
اختبِر معلوماتك حول التنسيقات الصغيرة.
هل الشبكة وflexbox مفيدان للتنسيقات الصغيرة؟
في السابق، تعرّفت على التنسيقات الكبيرة على مستوى الصفحة. أنت تعرف الآن التنسيقات الصغيرة على مستوى المكوّن.
بعد ذلك، ستتعمّق أكثر في اللبنات الأساسية للمحتوى وتتعرّف على كيفية جعل صورك متجاوبة. أولاً، ستتعرّف على أسلوب الخط المتجاوب.