بودكاست CSS - 009: التنسيق
تخيل أنك تعمل كمطور، ويقوم زميل المصمم بمنحك تصميمًا لموقع ويب جديد تمامًا. يحتوي التصميم على جميع أنواع التخطيطات والتركيبات المثيرة للاهتمام: تخطيطات ثنائية الأبعاد تراعي عرض إطار العرض وارتفاعه، بالإضافة إلى التخطيطات التي ينبغي أن تكون مرنة ومرنة. كيف تقرر أفضل طريقة لتصميمه باستخدام CSS؟
توفر لنا CSS طرقًا مختلفة لحل مشكلات التخطيط، على المحور الأفقي أو المحور الرأسي أو حتى كليهما. قد يكون اختيار طريقة التخطيط الصحيحة للسياق أمرًا صعبًا، وغالبًا ما قد تحتاج إلى أكثر من طريقة تخطيط واحدة لحل مشكلتك. للمساعدة في هذا الأمر، ستتعرّف في الوحدات التالية على الميزات الفريدة لكل آلية من آليات تنسيق CSS لاتخاذ قرارات مدروسة.
التنسيق: سجلّ موجز
في بدايات الويب، تم وضع تصميمات أكثر تعقيدًا من المستندات البسيطة باستخدام عناصر <table>.
أصبح فصل HTML عن الأنماط المرئية أسهل عندما اعتمدت المتصفحات CSS على نطاق واسع في أواخر التسعينيات.
لقد أتاح CSS للمطوّرين إمكانية تغيير مظهر الموقع الإلكتروني ومضمونه بالكامل بدون لمس HTML على الإطلاق.
وقد ألهمت هذه الإمكانية الجديدة مشاريع مثل The CSS Zen Garden
الذي تم إنشاؤه لإثبات قوة CSS لتشجيع المزيد من المطوّرين على تعلُّمها.
لقد تطورت CSS مع تطور احتياجاتنا لتصميم الويب وتقنية المتصفح. يمكنك قراءة كيفية تطوّر تنسيق CSS وطريقتنا في استخدام التنسيق بمرور الوقت في هذه المقالة التي بقلمها راشيل أندرو.
التخطيط: الحاضر والمستقبل
تتميز لغة CSS الحديثة بأدوات تخطيط قوية للغاية. لدينا أنظمة مخصصة للتخطيط وسنلقي نظرة عالية المستوى على ما لدينا تحت تصرفنا، قبل البحث في المزيد من التفاصيل عن Flexbox وGrid في الوحدات التالية.
فهم السمة display
تنفّذ السمة display شيئين.
أول شيء يفعله هو تحديد ما إذا كان المربع الذي تم تطبيقه على العمل مضمّنًا أو كتلة.
.my-element {
display: inline;
}
تتصرف العناصر المضمنة مثل الكلمات في الجملة.
تجلس بجانب بعضها البعض في الاتجاه المضمّن.
يتم تلقائيًا تضمين العناصر، مثل <span> و<strong>، التي تُستخدم عادةً لتنسيق أجزاء من النص داخل عناصر تحتوي على عناصر مثل <p> (فقرة).
كما أنها تحافظ على المسافة البيضاء المحيطة.
لا يمكنك تعيين عرض وارتفاع واضحين في العناصر المضمنة. وسيتم تجاهل أي هامش لمستوى الكتلة أو مساحة متروكة بواسطة العناصر المحيطة.
.my-element {
display: block;
}
لا تقع عناصر الحظر جنبًا إلى جنب مع بعضها البعض. وينشئون سطرًا جديدًا لأنفسهم. ما لم يتم تغييره بواسطة رمز CSS آخر، سيتم توسيع عنصر الكتلة إلى حجم البُعد المضمّن، وبالتالي يتسع للعرض الكامل في وضع الكتابة الأفقي. وستتم مراعاة الهامش على جميع جوانب عنصر الكتلة.
.my-element {
display: flex;
}
تحدد السمة display أيضًا السلوك الذي يجب أن يتصرف به العناصر الثانوية للعنصر.
على سبيل المثال، يؤدي ضبط السمة display على display: flex إلى جعل المربّع مربّعًا على مستوى الحظر،
وتحويل عناصره الثانوية أيضًا إلى عناصر مرنة.
يتيح ذلك خصائص المرونة التي تتحكم في المحاذاة والترتيب والتدفق.
Flexbox والشبكة
هناك آليات تنسيق رئيسية تنشئ قواعد تنسيق لعناصر متعددة، وهما flexbox وgrid. وهي تشترك في أوجه التشابه، ولكنها مصممة لحل مشكلات التخطيط المختلفة.
Flexbox
.my-element {
display: flex;
}
Flexbox هي آلية تخطيط للتخطيطات أحادية الأبعاد. التنسيق عبر محور واحد، إما أفقيًا أو عموديًا. بشكل افتراضي، سيعمل flexbox على محاذاة عناصر العنصر الثانوية إلى جانب بعضها بعضًا، في الاتجاه المضمّن، وتمديدها في اتجاه الكتلة بحيث تكون جميعها بنفس الارتفاع.
ستظل العناصر على المحور نفسه ولن يتم لفّها عند نفاد المساحة.
بدلاً من ذلك، سيحاولون الضغط على نفس الخط مع بعضهم البعض.
يمكن تغيير هذا السلوك باستخدام السمات align-items وjustify-content وflex-wrap.
يحوّل Flexbox أيضًا العناصر الفرعية إلى عناصر مرنة، ما يعني أنّه يمكنك كتابة قواعد حول سلوكها داخل حاوية مرنة.
يمكنك تغيير المحاذاة والترتيب والتبرير في عنصر فردي.
يمكنك أيضًا تغيير كيفية تقليل حجم النمو أو تقليصه باستخدام السمة flex.
.my-element div {
flex: 1 0 auto;
}
السمة flex هي اختصار للمصطلحات flex-grow وflex-shrink وflex-basis.
يمكنك توسيع المثال أعلاه كما يلي:
.my-element div {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}
يوفّر المطوّرون هذه القواعد المنخفضة المستوى لتلميح للمتصفح إلى الطريقة التي يجب أن يتصرف بها التنسيق عندما تواجهه أبعاد المحتوى وإطار العرض. هذا يجعلها آلية مفيدة للغاية لتصميم الويب سريع الاستجابة.
معرّف الإصدار العالمي (GRid)
.my-element {
display: grid;
}
تتشابه "Grid" (الشبكة) في نواح كثيرة مع flexbox، ولكنها مصممة للتحكم في التخطيطات متعددة المحاور بدلاً من التخطيطات أحادية المحور (المساحة العمودية أو الأفقية).
تتيح لك "Grid" (الشبكة) كتابة قواعد تنسيق على عنصر يتضمّن display: grid،
وتقدّم بعض الأساسيات الجديدة لتصميم التنسيق،
مثل الدالتَين repeat() وminmax().
إحدى وحدات الشبكة المفيدة هي وحدة fr، وهي جزء من المساحة المتبقية، يمكنك إنشاء شبكات تقليدية مكوّنة من 12 عمودًا، مع وجود فجوة بين كل عنصر، باستخدام 3 خصائص CSS:
.my-element {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
يوضح هذا المثال أعلاه تخطيطًا أحادي المحور. عندما يتعامل flexbox في الغالب مع العناصر كمجموعة، تمنحك الشبكة تحكمًا دقيقًا في موضعها في بُعدين. يمكننا تحديد أن العنصر الأول في هذه الشبكة يأخذ صفين و3 أعمدة:
.my-element :first-child {
grid-row: 1/3;
grid-column: 1/4;
}
السمتان grid-row وgrid-column توجّه العنصر الأول في الشبكة إلى بداية العمود الرابع،
من العمود الأول، ثم التمديد إلى الصف الثالث، من الصف الأول.
تخطيط التدفق
إذا كنت لا تستخدم شبكة أو flexbox، فسيتم عرض عناصرك في التدفق العادي. هناك عدد من طرق التخطيط التي يمكنك استخدامها لضبط سلوك العناصر وموضعها عندما تكون في التدفق العادي.
مربّع مضمّن
هل تتذكر كيف لا تحترم العناصر المحيطة هامش الحظر والمساحة المتروكة على عنصر مضمّن؟
من خلال inline-block، يمكنك تنفيذ ذلك.
p span {
display: inline-block;
}
يمنحك استخدام inline-block مربّعًا يحتوي على بعض خصائص العنصر على مستوى الحظر،
لكنه لا يزال يتدفق بشكل مضمّن مع النص.
p span {
margin-top: 0.5rem;
}
عائمة
إذا كانت لديك صورة تقع ضمن فقرة من النص، ألن يكون من المفيد أن يلتف النص حول تلك الصورة كما قد تراه في إحدى الصحف؟ ويمكنك القيام بذلك باستخدام الأعداد العشرية.
img {
float: left;
margin-right: 1em;
}
توجّه السمة float عنصرًا إلى "العائم" في الاتجاه المحدّد.
يتم تعليم الصورة في هذا المثال بحيث تطفو على اليسار،
مما يسمح بعد ذلك للعناصر التابعة "بالتفاف" حولها.
يمكنك ضبط عنصر ليجعله عائمًا left أو right أو inherit.
التخطيط متعدد الأعمدة
وإذا كانت لديك قائمة طويلة من العناصر، مثل قائمة بجميع بلدان العالم، يمكن أن يؤدي ذلك إلى إهدار الكثير من وقت التمرير للمستخدم. وقد يؤدي أيضًا إلى إنشاء مسافة بيضاء زائدة على الصفحة. باستخدام أعمدة CSS متعددة، يمكنك تقسيمه إلى أعمدة متعددة للمساعدة في كلتا المشكلتين.
<h1>All countries</h1>
<ul class="countries">
<li>Argentina</li>
<li>Aland Islands</li>
<li>Albania</li>
<li>Algeria</li>
<li>American Samoa</li>
<li>Andorra</li>
…
</ul>
.countries {
column-count: 2;
column-gap: 1em;
}
يؤدي ذلك إلى تقسيم تلك القائمة الطويلة تلقائيًا إلى عمودين ويضيف فجوة بين العمودين.
.countries {
width: 100%;
column-width: 260px;
column-gap: 1em;
}
بدلاً من تحديد عدد الأعمدة التي يتم تقسيم المحتوى إليها، يمكنك أيضًا تحديد الحد الأدنى للعرض المطلوب باستخدام column-width.
كلما توفرت مساحة أكبر في إطار العرض، سيتم إنشاء المزيد من الأعمدة تلقائيًا وقلل المساحة،
سينخفض عدد الأعمدة أيضًا.
هذا مفيد للغاية في سياقات تصميم الويب سريع الاستجابة.
المكانة في السوق
أخيرًا، في هذه النظرة العامة على آليات التخطيط، تحديد الموضع.
تغيِّر السمة position طريقة عمل عنصر في التدفق العادي للمستند، ومدى ارتباطه بالعناصر الأخرى.
الخيارات المتاحة هي relative وabsolute وfixed وsticky بالقيمة التلقائية التي هي static.
.my-element {
position: relative;
top: 10px;
}
يتم دفع هذا العنصر بمقدار 10 بكسل لأسفل بناءً على موضعه الحالي في المستند، نظرًا لتحديد موضعه بالنسبة إلى نفسه.
تؤدي إضافة position: relative إلى عنصر أيضًا إلى جعله كتلة تضمين أي عناصر فرعية تحتوي على position: absolute.
وهذا يعني أنه سيتم تغيير موضع العنصر الفرعي الآن إلى هذا العنصر تحديدًا،
بدلاً من العنصر الأصل النسبي الأعلى، عندما يتم تطبيق موضع مطلق عليه.
.my-element {
position: relative;
width: 100px;
height: 100px;
}
.another-element {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
}
عند ضبط السمة position على absolute، يتم
إيقاف العنصر خارج تدفق المستند الحالي.
وهذا يعني أمرين:
- يمكنك وضع هذا العنصر في أي مكان تريده باستخدام
topوrightوbottomوleftفي أقرب عنصر رئيسي نسبي له. - تتم إعادة تدفق كل المحتوى المحيط بعنصر مطلق لملء المساحة المتبقية التي تركها هذا العنصر.
يتصرف العنصر الذي يتضمّن القيمة position fixed بالطريقة نفسها التي يتصرف بها العنصر absolute،
مع كون عنصره الرئيسي العنصر الجذر <html>.
تظل عناصر الموضع الثابت مثبّتة من أعلى اليسار استنادًا إلى القيم top وright وbottom وleft التي تضبطها.
ويمكنك الاستفادة من الجوانب الثابتة والثابتة في fixed وجوانب احترام تدفق المستندات الأكثر توقعًا في relative باستخدام sticky.
عند استخدام هذه القيمة، عندما ينتقل إطار العرض بعد العنصر،
يظل مرتبطًا بالقيم top وright وbottom وleft التي تضبطها.
الخاتمة
يوفر تنسيق CSS الكثير من الخيارات والمرونة. للتعرّف بشكل أفضل على إمكانيات CSS Flexbox وGrid، يمكنك المتابعة إلى الوحدات القليلة التالية.
التحقّق من استيعابك
اختبر معلوماتك حول التخطيط
ما هما الإجراءان اللذان تنفّذهما السمة display؟
inline أو block أو none.overflow.لتدفق عدة فقرات إلى أعمدة، ما خاصية CSS الأفضل لهذه المهمة؟
display: gridcolumn-countdisplay: flexfloatماذا يعني أن يكون هناك كتلة خارج التدفق؟
top أو left.position: absolute وإحداثي س وص بناءً على القطعة التي تتضمّن الرمز، وليس ترتيبه مع العناصر التابعة الأخرى.هل يغطّي كل من Flexbox وGrid الأطفال بشكل تلقائي؟
flex-wrap: wrap" أو "repeat(auto-fit, 30ch)".