التوسيط في CSS

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

Adam Argyle

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

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

التحدي

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

The Resilience Ringer

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

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

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

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

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

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

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

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

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

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

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

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

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

2. Gentle Flex

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- Autobot

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

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

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

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

4. Fluffy Center

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

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

.fluffy-center {
  padding: 10ch;
}

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

5- Pop & Plop

1. Squish: حسنًا
2. الاسكواش: لا بأس
3. مكرّر: سيئ
4. تعديل: fine
5. التدفّق: جيد

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

مناسب لـ النوافذ المنبثقة والرسائل القصيرة والرسائل، والمكدّسات وتأثيرات العمق، والنوافذ المنبثقة.

الفائز

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

[قرع الطبول]

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 Tricks مع مشاركة مدونة