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

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;
}

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