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

السمة gap في CSS متوفّرة لمحرّكات تنسيق CSS Flexbox وتصاميم متعددة الأعمدة في Chromium.

آدم أرجيل

ديفيد غرغان

الفجوة في CSS

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

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

الاستخدام

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

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

يمكن تجاوز الفجوة بطول واحد، وسيتم استخدامه لكلٍ من الصف والعمود.

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

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

يمكن تمرير الفجوة بين طولين، وسيتم استخدامهما للصف والعمود.

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

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

الإطار المرن gap

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

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

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

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

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

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

ما كان يقصده الكاتب أعلاه حقًا هو عدم لمس أي من العناصر الفرعية.

The Antidute: الفجوة

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

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

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

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

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

إمكانات تصميم جديدة

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

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

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

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

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

ممتاز.