التوسيط في 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. 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 من خلال مشاركة مدونة