زخارف الفجوات: متاحة الآن في Chromium

Javier Contreras

Sam Davis Omekara

تاريخ النشر: 15 مايو 2026

تتوفّر زخارف الفجوات في CSS في Chrome وEdge بدءًا من الإصدار 149. يمكنك تنسيق الفجوات بين تخطيطات الشبكة وFlexbox والتخطيطات المتعدّدة الأعمدة بدون استخدام الحدود أو العناصر الزائفة. تم إنشاء هذه الميزة بالتعاون بين فريقَي Microsoft Edge وGoogle Chrome.

المشكلة

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

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

تتعامل السمة column-rule مع زخارف الفجوات للتخطيطات المتعدّدة الأعمدة، ولكن الشبكة وFlexbox لم تتضمّنا سابقًا وظائف مكافئة.

الحل

تقبل حاويات الشبكة وFlexbox الآن السمة column-rule. تتعامل سمة row-rule الجديدة مع الفجوات الأفقية. هذه الزخارف مرئية فقط ولا تؤثر في التخطيطات الحالية. إذا كنت تستخدم السمة column-rule في التخطيطات المتعدّدة الأعمدة، سيظل السلوك الحالي كما هو.

على سبيل المثال، إليك حاوية Flex تتضمّن ثلاث لوحات تستخدم قائمة بأنماط قواعد الأعمدة والصفوف:

.flex-split {
  column-rule-width: 2px;
  column-rule-style: dashed, solid;
  column-rule-color: #d4d0c8;
}

كما هو موضّح في هذا المثال، تقبل كلّ من row-rule وcolumn-rule الاختصار نفسه للعرض والنمط واللون. استخدِم الاختصار rule لضبط كلتيهما في آنٍ واحد.

السمات الجديدة

لم ننقل السمة column-rule إلى أوضاع التخطيط الأخرى ونضيف السمة row المكافئة فحسب. لقد قدّمنا أيضًا عناصر تحكّم لضبط زخارفك بدقة: كيفية تقسيمها عند التقاطعات، ومقدار المسافة التي تبعدها عن حواف الفجوات، ومتى تظهر بالنسبة إلى العناصر، وكيفية تغيير الأنماط في الفجوات. يمكن أيضًا تحريك عرض القاعدة ولونها والمسافات البادئة.

بنية repeat()‎

تتيح زخارف الفجوات استخدام repeat() لقيم العرض والنمط واللون. يسمح لك ذلك بتغيير الزخارف في الفجوات في شكل مختصر، على غرار بنية repeat() المستخدَمة لتعريفات المسارات في الشبكة:

.settings-panel {
  row-rule: 1px solid #243352;
  row-rule-width: repeat(2, 1px), 4px;
}

يمنح ذلك أول فجوتَين في الصف قاعدة بعرض 1 بكسل، والثالثة قاعدة بعرض 4 بكسل، مع التكرار إذا كان هناك فجوات أكثر من القيم. يمكنك أيضًا تمرير قيم متعدّدة مباشرةً بدون repeat()‎. على سبيل المثال، يمكنك استخدام أنماط قواعد صفوف متناوبة لحدود الساعة ونصف الساعة في تقويم:

.calendar {
  row-rule-width: 2px, 1px;
  row-rule-style: solid, dashed;
  row-rule-color: #e8e4df, #f0ece7;
}

التحكّم في تقسيم الزخارف

تتحكّم السمتان column-rule-break وrow-rule-break في كيفية عمل الزخارف عند تقاطعات الفجوات:

• normal (تلقائي): يعتمد السلوك على نوع الحاوية. تتوفّر مزيد من المعلومات في المواصفات.
• none: تستمر الزخارف بشكلٍ متواصل عبر التقاطعات.
• intersection: تنقطع الزخارف عند تقاطع فجوات الصفوف والأعمدة.

على سبيل المثال، إذا ضبطت rule-break على intersection في حاوية شبكة، تنقطع القواعد عند تقاطعات الفجوات بدلاً من أن تستمر:

.dashboard {
  column-rule-style: solid;
  column-rule-color: #fbbf24, #34d399;
  column-rule-width: 1px, 3px;
  column-rule-break: intersection;
  row-rule: 1px solid #1e1e36;
}

إذا ضبطت rule-break على none، تستمر القواعد بشكلٍ متواصل عبر التقاطعات:

.grid {
  column-rule: 1px solid #5a9e9e;
  row-rule: 1px solid #c27a6b;
  rule-break: none;
}

يمكنك تجربة هذه القيمة في ساحة العرض التفاعلية.

توسيع الزخارف أو تقليصها

تتحكّم السمتان column-rule-inset وrow-rule-inset في مقدار المسافة التي تمتدها الزخارف داخل الفجوة. يمكنك ضبط المسافات البادئة على جميع الجوانب في آنٍ واحد باستخدام الاختصار، أو استهداف المسافات البادئة بشكلٍ غير متماثل باستخدام column-rule-inset-cap (لنقاط النهاية التي ليس لها فجوات متقاطعة) وcolumn-rule-inset-junction (لنقاط النهاية التي تتقاطع مع فجوات أخرى).

يمكن أن تكون القيم أطوالاً أو نسبًا مئوية أو الكلمة الرئيسية overlap-join التي تربط زخارف الفجوات في الزوايا. على سبيل المثال، يؤدي ضبط rule-inset على 5 بكسل إلى تقليص جميع الزخارف بمقدار 5 بكسل:

.container {
  display: flex;
  flex-wrap: wrap;
  column-rule: 1px solid #2a2a45;
  column-rule-color: #60a5fa, #34d399, #a78bfa;
  rule-inset: 5px;
  row-rule: 1px solid #2a2a45;
}

يؤدي ضبط rule-inset-cap على 0 بكسل وrule-inset-junction على 10 بكسل إلى ظهور زخارف متساطحة عند حواف الحاوية ولكنها تبدأ من الداخل عند التقاطعات. يستخدم العرض التوضيحي للوحة البيانات الموضّح سابقًا هذا الأسلوب، ويتم تحريك المسافات البادئة عند التمرير:

.dashboard {
  rule-inset-cap: 0px;
  rule-inset-junction: 10px;
  transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
  rule-inset-junction: 0px;
}

مستوى الرؤية

تتحكّم السمتان column-rule-visibility-items وrow-rule-visibility-items في وقت ظهور القواعد استنادًا إلى تجاور العناصر:

• normal (تلقائي): يعتمد على نوع الحاوية.
• all: تظهر القواعد في كل فجوة، حتى الفجوات الفارغة.
• around: تظهر القواعد في أي مكان يتضمّن عنصرًا واحدًا أو أكثر من العناصر المجاورة.
• between: لا تظهر القواعد إلا بين عنصرَين متجاورَين.

يضبط الاختصار rule-visibility-items كلتيهما في آنٍ واحد. سيؤدي ضبط rule-visibility-items على between إلى عرض القواعد بين العناصر المجاورة فقط:

section {
  rule: 2px solid black;
  rule-visibility-items: between;
}

من ناحية أخرى، سيؤدي ضبط rule-visibility-items على all إلى عرض القواعد في كل فجوة، حتى تلك التي لا تتضمّن عناصر مجاورة:

section {
  rule: 2px solid black;
  rule-visibility-items: all;
}

يمكنك تبديل القيمة في العرض التوضيحي المباشر للاطّلاع على الفرق.

تحريك الزخارف

يمكن تحريك عرض القاعدة ولونها والمسافات البادئة. يمكنك نقلها عند التمرير أو أي تغيير آخر في الحالة. ينقل العرض التوضيحي للوحة البيانات الموضّح سابقًا ألوان القواعد والمسافات البادئة عند التمرير:

.dashboard {
  column-rule-color: #fbbf24, #34d399;
  rule-inset-junction: 10px;
  transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}

.dashboard:hover {
  column-rule-color: #3b82f6, #3b82f6;
  rule-inset-junction: 0px;
}

العروض التوضيحية

تتوفّر جميع العروض التوضيحية الموضّحة في هذه المشاركة على موقع Edge الإلكتروني للعروض التوضيحية.

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

التغييرات التي تم إجراؤها منذ الإصدار التجريبي للمطوّرين

إذا جرّبت زخارف الفجوات خلال الإصدار التجريبي للمطوّرين (Chrome 139)، يُرجى العِلم بالتغييرات التالية:

• تتوفّر الميزة تلقائيًا، ولا حاجة إلى استخدام أي علامات.
• تم تعديل بعض أسماء السمات لتتوافق مع أحدث المواصفات (على سبيل المثال، أصبح اسم السمتَين column-rule-outset وrow-rule-outset‏ column-rule-inset وrow-rule-inset).
• تمت إضافة السمتَين column-rule-visibility-items وrow-rule-visibility-items.
• تمت إضافة إمكانية استخدام الصور المتحركة.

استخدام زخارف الفجوات اليوم

تعمل زخارف الفجوات في Chrome وEdge بدءًا من الإصدار 149. إذا كانت زخارف الفجوات لأغراض تزيينية فقط، تكون الميزة تحسينًا تدريجيًا. في المتصفّحات التي لا تتوافق معها، يتم عرض الفجوات بشكلٍ عادي بدون أي زخارف مرئية. يتم حاليًا تطوير إضافة polyfill للمتصفّحات التي لا تتوافق معها بعد.

يمكنك الإبلاغ عن الأخطاء في أداة تتبُّع المشاكل في Chromium. لمزيد من المعلومات الأساسية، اطّلِع على مواصفات زخارف الفجوات في CSS.

روابط مفيدة

• مواصفات زخارف الفجوات في CSS
• مشاركة المدونة الخاصة بالإصدار التجريبي للمطوّرين (Chrome 139)
• إعلان Edge
• شرح على GitHub