Chromium يصل إلى ثغرة Flexbox

تتوفّر السمة gap في محرّكات تخطيط CSS Flexbox وMulti-Column في Chromium.

Adam Argyle

David Grogan

فجوة CSS

المصطلح الأساسي: gap هو التباعد بين العناصر التابعة. قد يكون هذا النوع من المسافات معروفًا باسم "المزاريب" أو "الأزقة". وهي المساحة التي تتلامس فيها حواف مربّع الأطفال فقط.

gap هو موضع نسبي، ما يعني أنّه يتغيّر ديناميكيًا استنادًا إلى اتجاه تدفّق المحتوى. على سبيل المثال، سيتم تعديل gap تلقائيًا حسب قيم writing-mode أو direction المختلفة التي تحدّدها للمستخدمين الدوليين. يخفّف ذلك بشكل كبير من عبء تحديات المسافات بالنسبة إلى مؤلف المكوّن وCSS. توسيع نطاق الرموز البرمجية بشكل أقل:

مثال على إمكانية استخدام ميزة "الفجوة" في عملية الترجمة، إذ إنّها تتعامل مع التغييرات في الاتجاه ووضع الكتابة: Codepen | تغريدة

توافُق المتصفح

Browser Support

• 57
• 16
• 52
• 10.1

Source

الاستخدام

تقبل gap أي طول أو نسبة مئوية من CSS كقيمة.

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}

يمكن تمرير طول واحد إلى Gap، وسيتم استخدامه لكل من الصف والعمود.

الاختزال

.grid {
  display: grid;
  gap: 10px;
}

ضبط الصفوف والأعمدة معًا في الوقت نفسه

موسَّعة

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}

يمكن تمرير طولَين إلى Gap، وسيتم استخدامهما للصف والعمود.

الاختزال

.grid {
  display: grid;
  gap: 10px 5%;
}

ضبط الصفوف والأعمدة بشكل منفصل في الوقت نفسه

موسَّعة

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

‫Flexbox gap

قبل توفّر gap في Flexbox، كانت الاستراتيجيات تتضمّن هوامش سالبة أو أدوات اختيار معقّدة أو أدوات اختيار من الفئة الزائفة من النوع :first أو :last أو وسائل أخرى لإدارة المساحة الخاصة بمجموعة من العناصر الفرعية التي يتم ترتيبها وتغليفها بشكل ديناميكي.

المحاولات السابقة

في ما يلي أنماط استخدمها الأشخاص للحصول على مسافات شبيهة بالفجوات.

أدوات اختيار الفئة الصورية

.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}

بومة خضعت لعملية قطع الفص الجبهي

.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}

المصدر

مع ذلك، لا تشكّل العناصر المذكورة أعلاه بديلاً كاملاً عن gap، وغالبًا ما تحتاج إلى تعديلات @media أو :lang() لتناسب حالات الالتفاف أو أوضاع الكتابة أو اتجاهها. قد لا تبدو إضافة طلب بحث واحد أو اثنين من طلبات البحث الخاصة بالوسائط أمرًا سيئًا، ولكن يمكن أن تتراكم هذه الطلبات وتؤدي إلى منطق تخطيط معقّد.

كان هدف المؤلّف أعلاه في الواقع ألا تتلامس أي من العناصر الفرعية.

The Antidote: gap

.layout {
  display: flex;
  gap: 10px;
}

ملاحظة: تنتقل ملكية المسافة من العنصر الثانوي إلى العنصر الرئيسي

في المثالَين الأولَين (بدون Flexbox gap)، يتم استهداف العناصر الفرعية وتحديد المسافة بينها وبين العناصر الأخرى. في مثال فجوة الترياق، يكون الحاوية هي المسؤولة عن المسافة. يمكن لكل طفل التخفيف من العبء، مع الحفاظ على ملكية المساحة. تبسيط الاتّساق إعادة ترتيب العناصر أو تغيير إطارات العرض أو إزالة العناصر أو إضافة عناصر جديدة وما إلى ذلك، مع الحفاظ على تباعد متسق بين العناصر لا يتم إضافة أدوات اختيار أو طلبات بحث وسائط جديدة، بل يتم إضافة مساحة فقط.

تحديثات "أدوات مطوّري البرامج في Chromium"

تتضمّن هذه التحديثات تغييرات في "أدوات مطوّري البرامج في Chromium". لاحظ كيف يتعامل جزء الأنماط مع grid-gap وgap الآن 👍

تعرض "أدوات مطوّري البرامج" كلاً من grid-gap وgap، مع عرض gap المستخدَمة أسفل grid-gap للسماح بالتتالي باستخدام أحدث بنية.

تتوافق "أدوات مطوّري البرامج" مع كل من grid-gap وgap، وذلك لأنّ gap هي في الأساس اسم مستعار للصيغ السابقة.

إمكانية توفير تنسيق جديد

من خلال Flexbox gap، نقدّم لك مزايا تتجاوز مجرد الراحة. نوفّر لك إمكانية إنشاء تخطيطات قوية ومثالية ومتباعدة بشكل مناسب. في الفيديو ونموذج الرمز أدناه، لا يمكن لـ Grid تحقيق التنسيق الذي يمكن لـ Flexbox تحقيقه. يجب أن تحتوي الشبكة على عدد متساوٍ من الصفوف والأعمدة، حتى إذا تم تعيينها بشكل أساسي.

تغريدة

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

متعدد الأعمدة gap

بالإضافة إلى أنّ Flexbox يتيح استخدام بنية gap، تتيح تخطيطات الأعمدة المتعددة أيضًا استخدام بنية gap الأقصر.

article {
  column-width: 40ch;
  column-gap: 5ch;
  gap: 5ch;
}

رائع جدًا.