التوسيط في CSS

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

آدم أرجيل

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

في ما يلي إصدار YouTube من هذه المشاركة إذا كنت تفضّل الفيديوهات:

التحدي

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

رنين الرنين

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

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

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

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

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

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

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

تدخل 5 تقنيات توسيط في Resilience Ringer، وسيتم منح تقنية واحدة فقط رمز Resilience Crown 👸.

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

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

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

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

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

4- فلافي سنتر

1. Squish: سيئة
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 دقيقًا جدًا لدرجة أنه من السهل تجاهله كتقنية توسيط، ولكنه عنصر أساسي في استراتيجيات التوسيط. إنها ذرية للغاية لدرجة أنني أنسى أحيانًا أنني أستخدمها.

الخلاصة

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

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

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

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