التوسيط في CSS

اتّبِع 5 تقنيات للتوسيط أثناء إجراء سلسلة من الاختبارات لمعرفة أيّ منها أكثر مقاومة للتغيير.

Adam Argyle

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

إذا كنت تفضّل الفيديو، يمكنك الاطّلاع على نسخة من هذا المنشور على YouTube:

التحدي

هناك أنواع مختلفة من عمليات التمركز. من حالات الاستخدام المختلفة، وعدد الأشياء التي يجب تركيزها، وما إلى ذلك. لعرض منطق وراء تقنية "الفوز" في التركيز، أنشأت The Resilience Ringer. وهي عبارة عن سلسلة من اختبارات الضغط لكل استراتيجية تركيز للتوازن داخلها ومراقبة أدائها. في النهاية، أكشف عن أسلوب تحقيق أعلى الدرجات، بالإضافة إلى "الأكثر قيمة". نأمل أن تستفيد من تقنيات وحلول جديدة للتوسيط.

The Resilience Ringer

يمثّل رمز Resilience Ringer إيماني بأنّ استراتيجية التوسّط повинна أن تكون مناسبة للتخطيطات الدولية وإطارات العرض المتغيرة الحجم والتعديلات النصية والمحتوى الديناميكي. ساعدت هذه المبادئ في وضع اختبارات المرونة التالية لتقنيات التوسيع من أجل تحملها:

1. مضغوط: يجب أن يكون بإمكان ميزة "المحاذاة في الوسط" التعامل مع التغييرات في العرض.
2. مضغوط: يجب أن يكون من الممكن ضبط التنسيق على الوضع "أعلى الشاشة" مع تغييرات الارتفاع
3. مكرّر: يجب أن يكون التوسيع ديناميكيًا حسب عدد العناصر.
4. تعديل: يجب أن يكون التوسيع ديناميكيًا حسب طول المحتوى ولغته
5. الترتيب: يجب أن يكون التوسيع مستقلاً عن اتجاه المستند ووضع الكتابة.

يجب أن يُظهر الحل الفائز قدرته على التكيف من خلال إبقاء المحتوى في المنتصف أثناء تصغيره وتكبيره وتكراره وتعديله وتبديله في أوضاع اللغات والاتجاهات المختلفة. مركز موثوق به ومرن وآمن

وسيلة الإيضاح

لقد قدّمت بعض الإشارات المرئية بالألوان لمساعدتك في الحفاظ على بعض المعلومات الوصفية في السياق:

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

المتسابقون الخمسة

تتنافس 5 تقنيات للتركيز في حلقة "القدرة على التحمل"، وسيكون هناك تقنية واحدة فقط تحصل على تاج "القدرة على التحمل" 👸.

1. مركز المحتوى

1. سمر: رائع.
2. Squash: رائع.
3. تكرار: رائع.
4. تعديل: رائع.
5. Flow: رائع.

من الصعب التغلب على إيجاز display: grid واختصار place-content. وبما أنّه يتوسّط العناصر الفرعية ويسويها معًا، فهو أسلوب فعّال للتوسيط في مجموعات العناصر التي يُراد قراءتها.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

مناسب للتصاميم الكبيرة التي تحتوي على فقرات وعناوين أو نماذج أولية أو عناصر بشكل عام تحتاج إلى وضعها في منتصف الصفحة بشكل واضح.

2. تعبير لطيف

1. سمير: رائع.
2. Squash: رائع.
3. تكرار: رائع.
4. تعديل: رائع.
5. الخطوات: رائع.

إنّ Gentle Flex هي استراتيجية أكثر دقة تركّز على المركز فقط. إنّه ناعم ولطيف، لأنّه بخلاف place-content: center، لا يتم تغيير أحجام مربّعات الأطفال أثناء التوسيع. يتم تجميع جميع العناصر معًا في وسط الشاشة مع ترك مسافة بينها قدر الإمكان.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

مثالية لكل من التنسيقات الكبيرة والصغيرة

3- Autobot

1. Squish: رائع
2. السكواش: ممتاز
3. مكرّرة: حسنًا
4. تعديل: رائع
5. التجربة: رائعة

تم ضبط الحاوية على أنّها مرنة بدون أنماط محاذاة، في حين تمّ وضع أنماط على العناصر المباشرة باستخدام الهوامش التلقائية. هناك شعور رائع وعاطفي عند استخدام margin: auto على جميع جوانب العنصر.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

مناسبة لتوسيط الرموز أو العناصر الزائفة.

4. مركز الانتفاش

1. Squish: سيئ
2. الحذف: سيئ
3. مكرّر: غير جيد
4. تعديل: رائع.
5. الخطوات: رائع. (ما دامت تستخدم السمات المنطقية)

إنّ المرشّح "مركز رقيق" هو المرشّح الأكثر رواجًا إلى حدّ بعيد، وهو أسلوب ال centrado الوحيد الذي يعتمد على العنصر/العنصر الفرعي بالكامل. هل يمكنك رؤية حدودنا الداخلية الفردية باللون الوردي ؟

.fluffy-center {
  padding: 10ch;
}

مناسب لعرض الكلمات أو العبارات في المنتصف، والعلامات والحبوب والأزرار والرموز وغيرها.

5- Pop & Plop

1. سوش: حسنًا
2. Squash: حسنًا
3. مكرّر: غير جيد
4. التعديل: حسنًا
5. السرعة: جيدة

ويحدث هذا "الظهور" لأنّ الوضع المطلق يُخرج العنصر من مجرى المحتوى المعتاد. تأتي كلمة "plop" في الأسماء من أكثر الأوقات التي أجد فيها هذه الميزة مفيدة: عند وضعها فوق عناصر أخرى. وهي تقنية كلاسيكية وسهلة الاستخدام لمركزة العناصر المتراكبة ، وهي مرنة وديناميكية حسب حجم المحتوى. في بعض الأحيان، ما عليك سوى وضع واجهة المستخدم فوق واجهة مستخدم أخرى.

مناسب للنوافذ المنبثقة والرسائل والتأثيرات المتعلّقة بالارتفاع والانخفاض والنوافذ المنبثقة.

الفائز

إذا كنت على جزيرة وكان بإمكاني استخدام تقنية واحدة فقط للتركيز، ستكون هذه هي…

[drum roll]

Gentle Flex 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

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

منتج الحد الأدنى (MVP)

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

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

الخاتمة

ما هي أنواع العناصر التي تؤدي إلى إيقاف استراتيجيات التوسيع؟ ما هي التحديات الأخرى التي يمكن إضافتها إلى نغمة رنين الثبات؟ لقد فكّرت في الترجمة وأحد مفاتيح التحكّم في الارتفاع التلقائي للحاوية… ماذا غير ذلك؟

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

الريمكسات التي أنشأها المستخدمون

• حيل CSS من خلال مشاركة مدونة