عشرة تخطيطات حديثة في سطر واحد من CSS

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

Una Kravets

تتيح تنسيقات CSS الحديثة للمطوّرين كتابة قواعد تنسيق فعّالة وقوية ببضع ضغطات مفاتيح فقط. تتناول المحادثة أعلاه وهذه المشاركة اللاحقة 10 أسطر فعّالة من CSS تؤدي بعض المهام الصعبة.

للمتابعة أو تجربة هذه العروض التوضيحية بنفسك، يمكنك الاطّلاع على عملية تضمين الموقع الإلكتروني أعلاه أو الانتقال إلى 1linelayouts.com.

1. Super Centered: place-items: center

بالنسبة إلى التصميم الأول "السطر الواحد"، لنحلّ أكبر لغز في عالم CSS، وهو توسيط العناصر. أردتُ إعلامك بأنّ الأمر أسهل ممّا تتصوّر مع place-items: center.

حدِّد أولاً grid كطريقة display، ثم اكتب place-items: center في العنصر نفسه. ‫place-items هو اختصار لضبط كل من align-items وjustify-items في الوقت نفسه. عند ضبطه على center، يتم ضبط كل من align-items وjustify-items على center.

.parent {
  display: grid;
  place-items: center;
}

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

2. فطيرة البانكيك المفكّكة: flex: <grow> <shrink> <baseWidth>

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

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

يشير الاختصار flex إلى: flex: <flex-grow> <flex-shrink> <flex-basis>.

لهذا السبب، إذا أردت أن تملأ المربّعات حجم <flex-basis>، وأن تصغر عند استخدام أحجام أصغر، ولكن بدون التمدّد لملء أي مساحة إضافية، اكتب: flex: 0 1 <flex-basis>. في هذه الحالة، تكون قيمة <flex-basis> هي 150px، لذا ستبدو على النحو التالي:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

إذا كنت تريد أن تتمدد المربّعات وتملأ المساحة عند الانتقال إلى السطر التالي، اضبط قيمة <flex-grow> على 1، وستبدو على النحو التالي:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

الآن، عند زيادة حجم الشاشة أو تصغيره، يتم تصغير وتكبير هذه العناصر المرنة.

3. يقول الشريط الجانبي: grid-template-columns: minmax(<min>, <max>) …)

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

أضِف هذا كقيمة لـ grid-template-columns مع القيمة التالية: minmax(150px, 25%) 1fr. يحصل العنصر في العمود الأول (الشريط الجانبي في هذه الحالة) على minmax بقيمة 150px في 25%، ويشغل العنصر الثاني (قسم main هنا) المساحة المتبقية كمسار 1fr واحد.

.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

04. Pancake Stack: grid-template-rows: auto 1fr auto

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

ستؤدي إضافة display: grid إلى المكوّن إلى إنشاء شبكة بعمود واحد، ولكن لن يكون ارتفاع المساحة الرئيسية سوى ارتفاع المحتوى مع ظهور التذييل أسفله.

لإبقاء التذييل ثابتًا في أسفل الصفحة، أضِف ما يلي:

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

يضبط ذلك محتوى الرأس والتذييل ليأخذ تلقائيًا حجم العناصر التابعة له، ويطبّق المساحة المتبقية (1fr) على المساحة الرئيسية، بينما سيأخذ الصف الذي تم ضبط حجمه على auto حجم الحد الأدنى لمحتوى العناصر التابعة له، وبالتالي كلما زاد حجم هذا المحتوى، سيزداد حجم الصف نفسه ليتم تعديله.

مايو تنسيق Holy Grail الكلاسيكي: grid-template: auto 1fr auto / auto 1fr auto

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

لكتابة هذه الشبكة بأكملها باستخدام سطر واحد من الرمز، استخدِم السمة grid-template. يتيح لك ذلك ضبط الصفوف والأعمدة في الوقت نفسه.

زوج السمة والقيمة هو: grid-template: auto 1fr auto / auto 1fr auto. تشير الشرطة المائلة بين القائمتَين الأولى والثانية المفصولتَين بمسافات إلى الفاصل بين الصفوف والأعمدة.

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

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

‫06. شبكة من 12 عمودًا: grid-template-columns: repeat(12, 1fr)

بعد ذلك، لدينا تصميم كلاسيكي آخر: شبكة من 12 عمودًا. يمكنك كتابة شبكات بسرعة في CSS باستخدام الدالة repeat(). يؤدي استخدام: repeat(12, 1fr); لأعمدة نموذج الشبكة إلى توفير 12 عمودًا، كلّ منها بعرض 1fr.

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

الآن لديك شبكة مسار من 12 عمودًا، ويمكننا وضع العناصر الفرعية على الشبكة. إحدى طرق إجراء ذلك هي وضعها باستخدام خطوط الشبكة. على سبيل المثال، سيمتد grid-column: 1 / 13 من السطر الأول إلى السطر الأخير (13) وسيشمل 12 عمودًا. سيمتد النطاق grid-column: 1 / 5; على أول أربعة أرقام.

يمكن كتابة ذلك بطريقة أخرى باستخدام الكلمة الرئيسية span. باستخدام span، يمكنك ضبط خط البداية ثم تحديد عدد الأعمدة التي سيتم توسيعها من نقطة البداية هذه. في هذه الحالة، ستكون grid-column: 1 / span 12 مساوية لـ grid-column: 1 / 13، وستكون grid-column: 2 / span 6 مساوية لـ grid-column: 2 / 8.

.child-span-12 {
  grid-column: 1 / span 12;
}

‫07. ذاكرة الوصول العشوائي (التكرار، التلقائي، الحد الأدنى والحد الأقصى): grid-template-columns(auto-fit, minmax(<base>, 1fr))

في المثال السابع هذا، يمكنك الجمع بين بعض المفاهيم التي تعلّمتها سابقًا لإنشاء تخطيط سريع الاستجابة يتضمّن عناصر فرعية مرنة يتم وضعها تلقائيًا. أنيق جدًا. المصطلحات الأساسية التي يجب تذكُّرها هنا هي repeat وauto-(fit|fill) وminmax()'، ويمكنك تذكُّرها من خلال الاختصار RAM.

في ما يلي الشكل الذي يظهر به كل ذلك معًا:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

أنت تستخدم الأمر repeat مرة أخرى، ولكن هذه المرة، باستخدام الكلمة الرئيسية auto-fit بدلاً من قيمة رقمية صريحة. يتيح ذلك ميزة "الموضع التلقائي" لهذه العناصر الفرعية. يملك هؤلاء الأطفال أيضًا قيمة أساسية دنيا تبلغ 150px وقيمة قصوى تبلغ 1fr، ما يعني أنّهم سيشغلون العرض الكامل 1fr على الشاشات الأصغر حجمًا، وعندما يصل عرض كل منهم إلى 150px، سيبدأون في الانتقال إلى السطر نفسه.

باستخدام auto-fit، سيتم توسيع المربّعات عندما يتجاوز حجمها الأفقي 150 بكسل لملء المساحة المتبقية بالكامل. ومع ذلك، إذا غيّرت القيمة إلى auto-fill، لن يتم تمديدها عند تجاوز حجمها الأساسي في دالة minmax:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

‫08. الترتيب: justify-content: space-between

في التصميم التالي، النقطة الرئيسية التي يجب توضيحها هنا هي justify-content: space-between، والتي تضع العنصرَين الثانويَين الأول والأخير على حواف مربّع الإحاطة، مع توزيع المساحة المتبقية بالتساوي بين العناصر. بالنسبة إلى هذه البطاقات، يتم وضعها في وضع عرض Flexbox، ويتم ضبط الاتجاه على عمود باستخدام flex-direction: column.

يؤدي ذلك إلى وضع العنوان والوصف وكتلة الصورة في عمود عمودي داخل البطاقة الرئيسية. بعد ذلك، يؤدي تطبيق justify-content: space-between إلى تثبيت العنصرَين الأول (العنوان) والأخير (كتلة الصور) على حواف مربع العرض المرن، ويتم وضع النص الوصفي بينهما بمسافات متساوية بين كل نقطة نهاية.

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

‫09. تثبيت "أسلوبي": clamp(<min>, <actual>, <max>)

في ما يلي بعض التقنيات التي لا تتوافق مع الكثير من المتصفحات، ولكنّها تتضمّن بعض الآثار المثيرة للاهتمام على التصاميم وتصميم واجهات المستخدم المتجاوبة. في هذا العرض التوضيحي، يتم ضبط العرض باستخدام clamp على النحو التالي: width: clamp(<min>, <actual>, <max>).

يضبط هذا الإعداد الحدّ الأدنى والأقصى المطلقين للحجم، بالإضافة إلى الحجم الفعلي. مع القيم، يمكن أن يبدو ذلك على النحو التالي:

.parent {
  width: clamp(23ch, 60%, 46ch);
}

الحدّ الأدنى للحجم هنا هو 23ch أو 23 وحدة حرف، والحدّ الأقصى هو 46ch أو 46 حرفًا. تستند وحدات عرض الأحرف إلى حجم خط العنصر (وتحديدًا عرض رمز 0). الحجم "الفعلي" هو %50، ما يمثّل% 50 من عرض العنصر الرئيسي لهذا العنصر.

إنّ وظيفة clamp() هنا هي السماح لهذا العنصر بالاحتفاظ بعرض بنسبة% 50 إلى أن تصبح نسبة% 50 إما أكبر من 46ch (في إطارات العرض الأوسع) أو أصغر من 23ch (في إطارات العرض الأصغر). يمكنك أن ترى أنّه كلما قمت بتكبير حجم العنصر الرئيسي وتصغيره، يزداد عرض هذه البطاقة إلى الحدّ الأقصى المثبَّت وينخفض إلى الحدّ الأدنى المثبَّت. بعد ذلك، يظلّ العنصر في المنتصف في العنصر الأصل لأنّنا طبّقنا خصائص إضافية لتوسيطه. يؤدي ذلك إلى توفير تنسيقات أكثر وضوحًا، لأنّ النص لن يكون عريضًا جدًا (أكثر من 46ch) أو مضغوطًا وضيّقًا جدًا (أقل من 23ch).

هذه أيضًا طريقة رائعة لتنفيذ الطباعة المتجاوبة. على سبيل المثال، يمكنك كتابة: font-size: clamp(1.5rem, 20vw, 3rem). في هذه الحالة، سيبقى حجم خط العنوان محصورًا دائمًا بين 1.5rem و3rem، ولكنّه سيزداد وينقص استنادًا إلى القيمة الفعلية 20vw ليتناسب مع عرض إطار العرض.

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

10. Respect for Aspect: aspect-ratio: <width> / <height>

وأخيرًا، أداة التنسيق الأخيرة هذه هي الأكثر تجريبية بين الأدوات. تمت إضافة هذه الميزة مؤخرًا إلى Chrome Canary في الإصدار 84 من Chromium، ويبذل فريق Firefox جهودًا نشطة لتنفيذها، ولكنها غير متاحة حاليًا في أي إصدارات ثابتة من المتصفح.

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

باستخدام السمة aspect-ratio، عندما أغيّر حجم البطاقة، يحافظ المربّع المرئي الأخضر على نسبة العرض إلى الارتفاع 16:9. نحن نحترم نسبة العرض إلى الارتفاع باستخدام aspect-ratio: 16 / 9.

.video {
  aspect-ratio: 16 / 9;
}

للحفاظ على نسبة عرض إلى ارتفاع تبلغ 16 × 9 بدون هذه السمة، عليك استخدام padding-top حلّ بديل وتوفير مساحة متروكة تبلغ 56.25% لضبط نسبة الارتفاع إلى العرض. سنتيح قريبًا سمة لهذا الغرض لتجنُّب الاختراق والحاجة إلى احتساب النسبة المئوية. يمكنك إنشاء مربّع بنسبة 1 / 1، ونسبة 2 إلى 1 مع 2 / 1، وأي شيء آخر تحتاجه لتغيير حجم هذه الصورة بنسبة حجم محدّدة.

.square {
  aspect-ratio: 1 / 1;
}

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

الخاتمة

شكرًا لك على متابعة هذه الرحلة من خلال 10 أسطر فعّالة من CSS. لمزيد من المعلومات، شاهِد الفيديو الكامل وجرِّب العروض التوضيحية بنفسك.