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

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

Una Kravets

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

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

1. عند توسيط فائق: 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.

أضِف هذه القيمة كقيمة لأعمدة-نماذج الشبكة مع القيمة التالية: 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;
}

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

6. شبكة ذات 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;
}

7. ذاكرة الوصول العشوائي (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));
}

8. قائمة الانتظار: 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;
}

9. تثبيت أسلوبي: 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 في Chromium 84، وهناك جهد نشط من 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. لمعرفة المزيد من المعلومات، يمكنك مشاهدة الفيديو الكامل وتجربة العروض التوضيحية بنفسك.