التوسيط في CSS

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

Adam Argyle

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

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

التحدي

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

The Resilience Ringer

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

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

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

التسمية التوضيحية

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

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

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

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

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

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

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

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

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

2. تعبير لطيف

1. سمير: رائع.
2. الاسكواش: رائع!
3. تكرار: رائع.
4. تعديل: رائع.
5. التدفق: رائع!

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

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

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

3- روبوت تلقائي

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- موسيقى "بوب" و"بلوب"

1. إسفنج: حسنًا
2. الاسكواش: حسنًا
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 من خلال مشاركة مدونة