التوسيط في CSS

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

Adam Argyle

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

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

التحدي

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

رنين المرونة

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

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

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

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

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

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

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

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

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

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

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

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

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

2. مرنة

1. Squish: رائع.
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. إسفنج: رائع
2. الاسكواش: رائع
3. تكرار: مقبول
4. التعديل: رائع
5. التدفق: رائع

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

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

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

4. فلافي سنتر

1. إسفنج: سيئ
2. الاسكواش: سيئ
3. تكرار: سيئ
4. التعديل: رائع.
5. التدفق: رائع! (طالما أنك تستخدم خصائص منطقية)

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

.fluffy-center {
  padding: 10ch;
}

مثالي للتمركز بين الكلمات أو العبارات، والعلامات، والحبوب، والأزرار، والرقائق، أخرى.

5- موسيقى بوب انزلاق

1. إسفنج: حسنًا
2. الاسكواش: حسنًا
3. تكرار: سيئ
4. التعديل: جيد
5. التدفق: جيد

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

خيار مثالي للأشكال المشروطة، والإشعارات الأولية، والرسائل، والحزم، والتأثيرات المعمّقة، والنوافذ المنبثقة.

الفائز

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

[رمية طبول]

Gentle Flex 🎉

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

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

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

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

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

الخاتمة

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

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

ريمكسات من إنشاء المنتدى

• نصائح حول CSS مع مشاركة مدونة