تاريخ النشر: 11 حزيران (يونيو) 2025
يمكنك الآن التخلّص من عمليات اختراق الحدود والعناصر الصورية، والاستفادة من زخارف CSS الفراغ.
يسرّ فريق Microsoft Edge الإعلان عن توفّر زينة الفواصل في CSS، وهي طريقة جديدة لتنسيق الفجوات بين العناصر في تنسيقات الشبكة المرنة والشبكة والمتعددة الأعمدة، في الإصدار التجريبي للمطوّرين من Chrome وEdge 139.
ننصحك بتجربة هذه الواجهة ومشاركة ملاحظاتك للمساعدة في تطويرها.
روابط مفيدة
المشكلة
يمكن أن يؤدي استخدام التنسيقات في الفواصل بين عناصر واجهة المستخدم، مثل التقاويم أو البطاقات أو شبكات البيانات، إلى تحسين سهولة القراءة بشكل كبير وتعزيز المظهر الجمالي العام. ومع ذلك، كان تحقيق هذا التأثير في تنسيقات الشبكة وflexbox يتطلّب عادةً حلولًا بديلة غير ملائمة باستخدام الحدود أو العناصر الزائفة أو حيل الخلفية. يمكن أن تؤدي هذه الحلول البديلة إلى حدوث مشاكل لعدة أسباب.
- غير واضحة: تُعرِض هذه العناصر تبعيات هيكلية للتصميم المرئي، وهو ما يخالف مبادئ HTML الدلالية.
- غير مناسبة لتسهيل الاستخدام: غالبًا ما تتطلّب عناصر DOM إضافية، ما قد يؤدي إلى تعطيل التكنولوجيات المساعِدة، مثل برامج قراءة الشاشة.
- صعوبة الصيانة: تتطلّب هذه التصاميم منطق تنسيق معقّدًا وتصعّب تطبيق أسلوب متّسق على جميع المكوّنات.
- تأثيرها السلبي على الأداء: قد تؤدي حلول المشاكل البديلة هذه إلى إضافة عناصر غير ضرورية إلى واجهة DOM، ما قد يؤدي إلى مشاكل في الأداء.
على الرغم من أنّ منصة الويب تتيح حاليًا استخدام column-rule
لإضافة الفواصل في التنسيق، يقتصر ذلك حاليًا على التنسيقات التي تتضمّن
عدة أعمدة
فقط. لطالما طلب مطوّرو الويب طريقة متّسقة لتنسيق الفجوات
في أنواع التنسيقات الأخرى ذات الصلة، مثل الشبكة وFlexbox.
الحلّ: زخارف الفجوات في CSS
تعمل زينة الفجوات على توسيع نطاق استخدام السمة column-rule للعمل مع أنواع التنسيق
الأخرى، مثل الشبكة وصندوق المرونة، وتقديم سمة row-rule جديدة
لإكمالها. ويؤدي ذلك إلى تحقيق اتساق وتخصيص جديد لكيفية تنسيق الفجوات في مختلف أنواع التنسيقات.
توفّر زخارف الفجوات في CSS المزايا التالية:
- لا تأثير في التنسيق: تكون الزينة مرئية فقط. ولا تؤثر هذه العناصر في التنسيق أو المسافة، لذا يمكنك استخدامها بدون خوف من تعطيل التصاميم الحالية.
- بنية التكرار: على غرار CSS Grid، يمكنك استخدام بنية
repeat()ل إنشاء أنماط من الزخارف في أجزاء مختلفة من الحاوية، ما يتيح إنشاء تصميمات غنية ومتسقة باستخدام الحد الأدنى من CSS. - ترميز أكثر وضوحًا: لا حاجة إلى عناصر إضافية أو عناصر زائفة، ما عليك سوى تنسيق الفجوات مباشرةً.
- إمكانية التخصيص: توفّر خصائص CSS الجديدة، مثل
*rule-breakو*rule-outsetوgap-rule-paint-order، المزيد من خيارات التخصيص إلى جانب تصميم القواعد التقليدية للعرض والأسلوب واللون.
باستخدام زخارف الفجوات في CSS، أصبح من الأسهل من أي وقتٍ مضى إنشاء تنسيقات صفحات مختلفة من الناحية المرئية وقابلة للصيانة.
مثال على استخدام زينة الفجوات
للاستفادة من زخارف الفواصل في CSS اليوم، استخدِم متصفّحًا يتيح استخدامها: Edge
أو Chrome، بدءًا من الإصدار 139، وبدِّل علامة
تفعيل ميزات Web Platform التجريبية بالانتقال إلى
edge://flags أو chrome://flags.
ملعب المطوّرين التفاعلي
لتجربة الأنواع المختلفة من التنسيقات التي تتيح استخدام زخارف الفواصل في CSS، واستخدام جميع السمات الجديدة، ننصحك بتجربة مساحة المطوّرين التفاعلية.
قائمة البرغر
يوضّح عرض توضيحي لقائمة شطيرة البرغر
كيفية استخدام السمة column-rule-break: intersection لفصل زخارف فجوات عمود
عند كل تقاطع مرئي مع فجوات الصفوف.
يستخدم العرض الترويجي أيضًا column-rule-offset: -15px لضبط طول
الزينة، وإبعادها عن حواف كل تقاطع.
ورقة ملاحظات
في العرض التمهيدي لدفتر الملاحظات،
يضمنrow-rule-break: none عدم انقطاع زينة الصفوف عند
التقاطعات، حيث يتم عرضها باستمرار من اليسار إلى اليمين في الحاوية.
من ناحية أخرى، يضمن الخيار column-rule-break: spanning-item عدم طلاء زينة عمود
خلف العناصر التي تمتد على الصفحة، حيث تبدأ وتنتهي عند
العناصر التي تمتد على الصفحة لتشكيل تقاطع T مرئي.
تستخدِم السمة row-rule الدالة repeat() للتحكّم بدقة
في كيفية تطبيق زخارف الفجوات على أقسام مختلفة من التنسيق.
يتيح ذلك استخدام نمط تصميم يتم فيه إخفاء قواعد الصفوف في الرأس والقدم، ويكون النمط أكثر سمكًا حول المحتوى الرئيسي وأكثر رقة في أماكن أخرى.
أخبار CSS اليومية
يستخدِم عرض CSS Daily News تخطيطًا على غرار المجلات ويحدِّد زخارف الفجوات في CSS على مستوى حاويات شبكة وصندوق مرن متعددة.
لاحظ لعبة Sudoku على يسار الصفحة، والتي تستخدم شبكة 9×9 والنمط المتكرّر لرسم الخطوط الرقيقة والسميكة بين الصفوف والأعمدة:
.sudoku {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 6px;
column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
column-rule-style: solid;
column-rule-color: var(--secondary);
row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
row-rule-style: solid;
row-rule-color: var(--secondary);
}
طلب الملاحظات
يسرّنا أن ندعوك لتجربة زينة الفواصل في CSS. نعتقد أنّها تحلّ مشكلة مهمة، ونريد معرفة ملاحظاتك بشأنها لنتمكّن من تحسينها لتلبية احتياجاتك.
لا تزال ميزة زخارف الفجوات في CSS قيد التنفيذ في Chromium. إذا اختبرت هذه الميزة، يُرجى العِلم بأنّنا ما زلنا نعمل عليها بنشاط وأنّه قد تواجهك حالات لا تعمل فيها الميزة على النحو المتوقّع. تشمل بعض الصعوبات الحالية المتعلّقة بالحدود القصوى استخدام عدد كبير جدًا من مسارات الشبكة وإضافة زخارف متحركة للفواصل.
إذا رصدت خطأ أو كان لديك أي ملاحظات حول الميزة، يمكنك مشاركة ملاحظاتك من خلال فتح خطأ جديد في Chromium.