التنسيق

بودكاست CSS - 009: التنسيق

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

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

التخطيط: سجل موجز

في الأيام الأولى للويب، تم وضع تصميمات أكثر تعقيدًا من مستند بسيط باستخدام عناصر <table>. أصبح فصل HTML عن الأنماط المرئية أسهل بعد استخدام 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 والشبكة. وهي تشترك في أوجه التشابه، ولكنها مصممة لحل مشكلات التخطيط المختلفة.

إطار مرن

.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;
}

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

شبكة

.my-element {
    display: grid;
}

تشبه Grid في كثير من الجوانب flexbox، ولكنه مصمم للتحكم في التخطيطات متعددة المحاور بدلاً من التخطيطات أحادية المحور (المساحة الرأسية أو الأفقية).

تتيح لك الشبكة كتابة قواعد التنسيق على عنصر يشتمل على 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 أحد العناصر إلى "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 فإنها تفصِل العنصر من تدفق المستند الحالي. وهذا يعني شيئين:

1. يمكنك وضع هذا العنصر في أي مكان تريده، باستخدام top وright وbottom وleft في أقرب عنصر رئيسي له.
2. تتم إعادة تدفق كل المحتوى المحيط لعنصر مطلق لملء المساحة المتبقية التي يتركها هذا العنصر.

يتصرف عنصر ذو القيمة position بقيمة fixed بطريقة مماثلة لآلية absolute، ويكون عنصرها الرئيسي عنصر <html> الجذر. تبقى عناصر الموضع الثابت ثابتة من أعلى اليسار استنادًا إلى القيم top وright وbottom وleft التي تحدّدها.

يمكنك تحقيق الارتساء تم إصلاح جوانب fixed والجوانب التي يمكن توقُّعها أكثر في relative للاستجابة للمستندات باستخدام sticky. وباستخدام هذه القيمة، وعندما يتم تمرير إطار العرض عبر العنصر، يبقى ثابتًا في القيم top وright وbottom وleft التي تحدّدها.

الخاتمة

هناك الكثير من الخيارات والمرونة في تنسيق CSS. لمزيد من التفاصيل عن مزايا CSS Flexbox وGrid، انتقِل إلى الوحدات القليلة التالية.

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

اختبر معلوماتك حول التخطيط