המאפיין box-decoration-break בגרסה 130 של Chrome

Rachel Andrew

פורסם: 11 באוקטובר 2024

ב-Chrome 130, מאפיין ה-CSS‏ box-decoration-break עם הערך 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;
}

אותו הדבר קורה אם יש גבולות לתיבות שמפוצלות כשמדפיסים את הדף. אם תיבה מחולקת על פני שני דפים, הגבול של התיבה יושלם בדף הראשון ואז תיפתח תיבה חדשה בדף השני.