التوسيط في CSS

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

Adam Argyle

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

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

التحدي

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

The Resilience Ringer

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

  1. مضغوط: يجب أن يتمكّن التوسيط من التعامل مع التغييرات في العرض
  2. Squashed: centering should be able to handle changes to height
  3. مكرّر: يجب أن يكون التوسيط ديناميكيًا لعدد العناصر
  4. تعديل: يجب أن يكون التوسيط ديناميكيًا حسب طول المحتوى ولغته
  5. Flow: يجب أن يكون التوسيط مستقلاً عن اتجاه المستند ووضع الكتابة

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

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

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

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

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

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

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

تعديل المحتوى وتكراره باستخدام VisBug
  1. سحق: رائع!
  2. الاسكواش: رائع!
  3. مكرّر: رائع!
  4. التعديل: رائع!
  5. التدفّق: رائع

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

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
الإيجابيات
  • يتم توسيط المحتوى حتى في المساحة المحدودة وعند تجاوزه الحدّ المسموح به
  • تتركّز كل مهام التعديل والصيانة في مكان واحد
  • تضمن الفجوة تباعدًا متساويًا بين العناصر الثانوية التي يبلغ عددها n
  • تنشئ الشبكة صفوفًا تلقائيًا
السلبيات
  • يحدّد العنصر الفرعي الأوسع (max-content) العرض لجميع العناصر الأخرى. سيتم تناول هذا الموضوع بمزيد من التفصيل في قسم المرونة اللطيفة.

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

2. Gentle Flex

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

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

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
الإيجابيات
  • يتعامل فقط مع المحاذاة والاتجاه والتوزيع
  • إجراء التعديلات والصيانة في مكان واحد
  • تضمن الفجوة تباعدًا متساويًا بين العناصر الثانوية التي يبلغ عددها n
السلبيات
  • أكبر عدد من أسطر الرموز البرمجية

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

3- Autobot

  1. الضغط: رائع
  2. الاسكواش: رائع
  3. مكرّر: جيد
  4. التعديل: رائع
  5. التدفّق: رائع

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

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
الإيجابيات
  • خدعة ممتعة
  • سريع وبسيط
السلبيات
  • نتائج غير متوقعة عند تجاوز السعة
  • يعني الاعتماد على التوزيع بدلاً من الفجوة أن التخطيطات يمكن أن تحدث مع الأطفال الذين يلمسون الجوانب
  • لا يبدو أن "دفع" العنصر إلى موضعه هو الخيار الأمثل، ويمكن أن يؤدي إلى تغيير في حجم مربّع العنصر الفرعي

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

4. Fluffy Center

  1. الضغط: سيئ
  2. الاسكواش: سيئ
  3. مكرّر: سيئ
  4. تعديل: رائع!
  5. Flow: رائع! (طالما أنّك تستخدم السمات المنطقية)

إنّ تقنية "المركز المرن" هي الأفضل من حيث الاسم، وهي التقنية الوحيدة التي تعتمد بالكامل على العنصر أو العنصر الفرعي. هل ترى الحدود الوردية الداخلية الفردية؟

.fluffy-center {
  padding: 10ch;
}
الإيجابيات
  • حماية المحتوى
  • خطر ذري
  • كل اختبار يحتوي سرًا على استراتيجية التمركز هذه
  • المسافة بين الكلمات هي فجوة
السلبيات
  • وهم عدم الفائدة
  • هناك تعارض بين الحاوية والعناصر، لأنّ كل منها يفرض حجمه بشكل صارم

مناسبة للتوسيط الذي يركّز على الكلمات أو العبارات، والعلامات، والأزرار، والشرائح، والمزيد.

5- Pop & Plop

  1. الضغط: مقبول
  2. الاسكواش: جيد
  3. مكرّر: سيئ
  4. التعديل: جيد
  5. التدفق: جيد

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

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

مناسبة للنوافذ المشروطة ورسائل الإعلام والرسائل والمجموعات وتأثيرات العمق والنوافذ المنبثقة.

الفائز

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

[قرع الطبول]

Gentle Flex 🎉

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

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

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

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

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

الخاتمة

ما هي أنواع الأشياء التي تكسر استراتيجيات التمركز لديك؟ ما هي التحديات الأخرى التي يمكن إضافتها إلى "تحدّي الصمود"؟ فكرت في الترجمة ومفتاح الارتفاع التلقائي في الحاوية… ماذا أيضًا؟

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

ريمكسات من المنتدى