תאריך פרסום: 15 במאי 2026
קישוטי רווח ב-CSS זמינים ב-Chrome וב-Edge החל מגרסה 149. עיצוב הרווחים בין פריסות של רשת, flexbox ופריסות מרובות עמודות בלי להשתמש בגבולות או בפסאודו-אלמנטים. התכונה הזו פותחה בשיתוף פעולה בין הצוותים של Microsoft Edge ו-Google Chrome.
הבעיה
כדי לסגור פערים בסגנון בין פריטים בפריסה, תמיד נדרשו פתרונות עקיפים. גבולות בפריטים בודדים, פסאודו-אלמנטים, פריצות רקע. יש עלויות לגישות האלה:
- הם תלויים במבנה. כדי להוסיף מפריד ויזואלי, צריך לשנות את תגי העיצוב או לכתוב סלקטורים לפריטים ספציפיים.
- הם מפריעים לנגישות. רכיבי DOM נוספים מופיעים בעץ הנגישות כשהם לא אמורים להופיע.
- קשה לתחזק אותם. פריסות רספונסיביות שוברות את ההנחות שעליהן התבסס העיצוב של הרווחים.
- הן פוגעות בביצועים. ככל שיש יותר צמתי DOM, כך יש יותר עבודה בפריסה.
- הארגונומיה של הכתיבה בהם לא טובה. לעתים קרובות נדרשו חישובים גיאומטריים מורכבים כדי שהדברים יפעלו בצורה נכונה.
המאפיין column-rule מטפל בעיטורים של רווחים בפריסות מרובות עמודות, אבל בעבר לא הייתה פונקציונליות מקבילה ב-grid וב-flexbox.
הפתרון
מאגרי תגים של Grid ו-Flexbox מקבלים עכשיו column-rule. נכס row-rule חדש מטפל בפערים אופקיים. העיטורים האלה הם ויזואליים בלבד ולא משפיעים על פריסות קיימות. אם משתמשים במאפיין column-rule בפריסות מרובות עמודות, ההתנהגות הקיימת נשארת ללא שינוי.
לדוגמה, הנה קונטיינר גמיש עם שלוש חלוניות שמשתמש ברשימת סגנונות לכללי העמודות והשורות שלו:
.flex-split {
column-rule-width: 2px;
column-rule-style: dashed, solid;
column-rule-color: #d4d0c8;
}
כפי שמודגם בדוגמה הזו, גם row-rule וגם column-rule מקבלים את אותו קיצור דרך לרוחב, לסגנון ולצבע. אפשר להשתמש בקיצור הדרך rule כדי להגדיר את שניהם בבת אחת.
נכסים חדשים
אבל לא רק הוספנו את column-rule למצבי פריסה אחרים ואת המקבילה של row. הוספנו גם אמצעי בקרה לשינוי העיצובים:
איך הם נשברים בנקודות הצטלבות, כמה הם מוסטים מקצוות הרווחים, מתי הם
מופיעים ביחס לפריטים ואיך משנים את הסגנונות ברווחים. אפשר להנפיש גם את הרוחב, הצבע והשוליים של הקו.
התחביר repeat()
הקישוטים של הרווח תומכים ב-repeat() לערכי הרוחב, הסגנון והצבע שלהם. כך אפשר לשנות את העיטורים בין הרווחים בפריסה קצרה, בדומה לתחביר repeat() שמשמש להגדרות של רצועות בפריסה:
.settings-panel {
row-rule: 1px solid #243352;
row-rule-width: repeat(2, 1px), 4px;
}
כך, לשני הרווחים הראשונים בין השורות מוקצה כלל של 1px, ולרווח השלישי מוקצה כלל של 4px. אם יש יותר רווחים בין השורות מאשר ערכים, המערכת חוזרת על עצמה. אפשר גם להעביר כמה ערכים ישירות בלי repeat(). לדוגמה, סגנונות שונים של כללי שורות לסירוגין לגבולות של שעה וחצי שעה ביומן:
.calendar {
row-rule-width: 2px, 1px;
row-rule-style: solid, dashed;
row-rule-color: #e8e4df, #f0ece7;
}
שליטה במעברי קישוט
המאפיינים column-rule-break ו-row-rule-break קובעים את ההתנהגות של העיטורים בנקודות החיתוך של הרווחים:
-
normal(ברירת מחדל): ההתנהגות תלויה בסוג מאגר התגים. מידע נוסף זמין במפרט. -
none: קישוטים מוצגים ברציפות לאורך צמתים. -
intersection: העיטורים נקטעים במקומות שבהם יש רווחים בין שורות ועמודות.
לדוגמה, אם מגדירים rule-break ל-intersection ב-grid container, הכללים נשברים בצמתים של הרווחים במקום להמשיך:
.dashboard {
column-rule-style: solid;
column-rule-color: #fbbf24, #34d399;
column-rule-width: 1px, 3px;
column-rule-break: intersection;
row-rule: 1px solid #1e1e36;
}
אם מגדירים את rule-break לערך none, הכללים פועלים ברציפות דרך הצמתים:
.grid {
column-rule: 1px solid #5a9e9e;
row-rule: 1px solid #c27a6b;
rule-break: none;
}
אפשר לנסות את הערך הזה בסביבת המשחקים האינטראקטיבית.
הארכה או קיצור של קישוטים
המאפיינים column-rule-inset ו-row-rule-inset קובעים עד כמה העיטורים יתארכו בתוך רווח. אפשר להגדיר את השוליים הפנימיים בכל הצדדים בבת אחת באמצעות קיצור הדרך, או להגדיר שוליים פנימיים אסימטריים באמצעות column-rule-inset-cap (לנקודות קצה שאין בהן פערים מצטלבים) ו-column-rule-inset-junction (לנקודות קצה שחוצות פערים אחרים).
הערכים יכולים להיות אורכים, אחוזים או מילת המפתח overlap-join, שמאחדת את קישוטי הרווחים לפינות. לדוגמה, אם מגדירים את rule-inset ל-5px, כל הקישוטים מתכווצים פנימה ב-5px:
.container {
display: flex;
flex-wrap: wrap;
column-rule: 1px solid #2a2a45;
column-rule-color: #60a5fa, #34d399, #a78bfa;
rule-inset: 5px;
row-rule: 1px solid #2a2a45;
}
אם מגדירים את rule-inset-cap ל-0px ואת rule-inset-junction ל-10px, מקבלים קישוטים שצמודים לקצוות הקונטיינר אבל מוסטים פנימה בנקודות החיתוך. הדגמה של לוח הבקרה שמוצגת בהמשך משתמשת בגישה הזו, והתמונות הממוזערות מונפשות כשמעבירים מעליהן את העכבר:
.dashboard {
rule-inset-cap: 0px;
rule-inset-junction: 10px;
transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
rule-inset-junction: 0px;
}
חשיפה
המאפיינים column-rule-visibility-items ו-row-rule-visibility-items קובעים מתי הכללים יוצגו על סמך סמיכות הפריטים:
-
normal(ברירת מחדל): תלוי בסוג הקונטיינר. -
all: הכללים מופיעים בכל פער, גם אם הוא ריק. -
around: כללים מופיעים בכל מקום שבו יש פריט אחד או יותר סמוכים. -
between: הקווים מופיעים רק בין שני פריטים סמוכים.
הקיצור rule-visibility-items מגדיר את שניהם בבת אחת.
הגדרת rule-visibility-items לערך between תציג כללים רק בין פריטים סמוכים:
section {
rule: 2px solid black;
rule-visibility-items: between;
}
לעומת זאת, אם מגדירים את הערך rule-visibility-items ל-all, הכללים יוצגו בכל הרווחים, גם אם אין פריטים סמוכים:
section {
rule: 2px solid black;
rule-visibility-items: all;
}
כדי לראות את ההבדל, מחליפים את הערך בהדגמה החיה.
הנפשת קישוטים
אפשר להנפיש את הרוחב, הצבע והשוליים של הכלל. אפשר להגדיר את המעבר הזה כשמעבירים את העכבר מעל הרכיב או בכל שינוי אחר במצב. הדגמה של מרכז הבקרה שמוצגת קודם מציגה מעבר בין צבעים ובין שוליים בהעברת העכבר:
.dashboard {
column-rule-color: #fbbf24, #34d399;
rule-inset-junction: 10px;
transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}
.dashboard:hover {
column-rule-color: #3b82f6, #3b82f6;
rule-inset-junction: 0px;
}
הדגמות
כל ההדגמות שמוצגות בפוסט הזה זמינות באתר ההדגמה של Edge.
בפוסט בבלוג על גרסת הניסיון למפתחים יש עוד כמה הדגמות, כולל סביבת משחקים אינטראקטיבית, תפריט המבורגר, פריסת מחברת ופריסה בסגנון מגזין עם רשת סודוקו.
שינויים מאז תקופת הניסיון למפתחים
אם ניסיתם את התכונה 'קישוטים של רווחים' במהלך תקופת הניסיון למפתחים (Chrome 139), חשוב לשים לב לשינויים הבאים:
- התכונה זמינה כברירת מחדל, ואין צורך בדגלים.
- חלק משמות המאפיינים עודכנו בהתאם למפרט העדכני (לדוגמה,
column-rule-outsetו-row-rule-outsetהפכו ל-column-rule-insetו-row-rule-inset). - נוספו הנכסים
column-rule-visibility-itemsו-row-rule-visibility-items. - נוספה תמיכה באנימציות.
שימוש בעיטורים של פערים היום
הקישוטים של הרווחים פועלים ב-Chrome וב-Edge, החל מגרסה 149. אם קישוטי הרווחים הם קישוטים בלבד, התכונה היא שיפור מתקדם. בדפדפנים ללא תמיכה, הרווחים מוצגים כרגיל ללא קישוטים גלויים. אנחנו מפתחים polyfill לדפדפנים שעדיין לא תומכים ב-API הזה.
אפשר לדווח על באגים במעקב אחר בעיות ב-Chromium. מידע נוסף זמין במפרט של קישוטי רווחים ב-CSS.