عشرة تخطيطات حديثة في سطر واحد من 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. مجموعة الفطائر: grid-template-rows: auto 1fr auto

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

ستؤدي إضافة 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. ذاكرة الوصول العشوائي (RAM) (تكرار، تلقائي، الحدّ الأدنى): 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));
}

أنت تستخدم التكرار مرة أخرى، ولكن هذه المرة، يتم استخدام الكلمة الرئيسية 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. لمزيد من المعلومات، يمكنك مشاهدة الفيديو الكامل وتجربة العروض التوضيحية بنفسك.