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

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

Una Kravets

تتيح تنسيقات CSS الحديثة للمطوّرين كتابة قواعد تنسيق فعّالة ومفيدة للغاية ببضع نقرات فقط. تتناول المحادثة أعلاه والمقالة اللاحقة 10 أسطر قوية من CSS تُجري بعض الإجراءات المهمة.

لمتابعة هذه العروض التوضيحية أو استخدامها بنفسك، يمكنك الاطّلاع على رمز Glitch المضمّن أعلاه، أو الانتقال إلى 1linelayouts.glitch.me.

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. The Deconstructed Pancake: 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;
}

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

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

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

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

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

لجعل التذييل ثابتًا في أسفل الصفحة، أضِف ما يلي:

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

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

مايو تنسيق "كأس القديس جرجس" الكلاسيكي: 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 من السطر الأول إلى السطر الأخير (الثالث عشر) وسيمتد على 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. Clamping My Style: clamp(<min>, <actual>, <max>)

في ما يلي بعض الأساليب التي لا تتوافق مع بعض المتصفّحات، ولكنّها تتضمن بعض التأثيرات المثيرة للاهتمام في التنسيقات وتصميم واجهة المستخدم الحسّاسة للسياق. في هذا العرض التجريبي، يتم ضبط العرض باستخدام أداة الربط على النحو التالي: 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. الالتزام بنسبة العرض إلى الارتفاع: aspect-ratio: <width> / <height>

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

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

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

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

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

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

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

الخاتمة

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