الخاصية Box-decoration-break لـ Chrome 130

Rachel Andrew

تاريخ النشر: 11 تشرين الأول (أكتوبر) 2024

في الإصدار 130 من Chrome، تتوفّر box-decoration-break خاصية CSS التي تحمل القيمة clone ، مع إتاحة التجزئة المضمّنة والبلوكية. توضّح هذه المشاركة سبب استخدام هذه الميزة وكيفية استخدامها.

ملاحظة: يدعم Firefox أيضًا هذه السمة بالكامل. في Safari، يمكن استخدام box-decoration-break مع البادئة -webkit-، وفقط للتقسيم المضمّن

التقسيم المضمّن

يحدث التقطُّع المضمّن عندما يتم تقسيم عنصر مضمّن، مثل سلسلة من النصوص، على عدة أسطر. تحتوي العناصر المضمّنة على مربع، وهو ما لا تحتاج عادةً إلى التفكير فيه، ما لم تحاول إضافة الخلفية أو الحد إلى العنصر. في المثال التالي، تكون الخلفية مع border-radius مضافًا إلى علامة span. لا ينحني الحدّ إلا في بداية السلسلة ونهايتها.

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
}

القيمة الأولية لسمة box-decoration-break هي slice، ما يؤدي إلى تطبيق تأثير التقطيع على المربّعات. box-decoration-break: clone المتوافق حديثًا مع ذلك، أن كل خط يبدأ وينتهي بحدود دائرية.

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
  box-decoration-break: clone;
}

حظر التجزئة

تحدث عملية تقسيم المحتوى إلى أجزاء إذا قسّمت المحتوى إلى أعمدة باستخدام تنسيق مؤلف من عدة أعمدة، أو عند الطباعة وقسمة المحتوى إلى صفحات.

في المثال التالي، تم تقسيم المحتوى إلى أعمدة، ولكل فقرة حدود. عند استخدام القيمة الأولية slice، يتم تقسيم المربّعات في قاعدة وعمود الأعمدة.

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
}

باستخدام box-decoration-break: clone، عندما يتم تقسيم مربّع، يتم لف كل جزء بالحدود.

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
  box-decoration-break: clone;
}

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