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

Rachel Andrew

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

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

تقسيم المحتوى المضمّن

يحدث تقسيم المحتوى المضمّن عندما ينتقل عنصر مضمّن، مثل سلسلة نصية، إلى أسطر متعدّدة. تحتوي العناصر المضمّنة على مربّع، ولا تحتاج عادةً إلى التفكير فيه، إلا إذا حاولت إضافة خلفية أو حدّ إلى العنصر. في المثال التالي، تتم إضافة خلفية مع 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;
}

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