תאריך פרסום: 11 ביוני 2025
נגיד שלום לפריצות של גבולות ופסאודו-רכיבים, ונשמח לקבל את 'קישוט הרווח' ב-CSS.
צוות Microsoft Edge שמח להודיע שאפשר עכשיו לנסות את CSS gap decorations – דרך חדשה לעצב את הרווח בין פריטים בפריסות גמישות, רשתות ופריסת עמודות מרובות – בגרסת Chrome 139 ובגרסת Edge 139.
אנחנו מזמינים אותך לנסות את ה-API ולשלוח לנו משוב כדי לעזור לנו לעצב את העתיד שלו.
קישורים מועילים
בעיה
הוספת עיצוב לחוסרים ברכיבי ממשק המשתמש, כמו לוחות שנה, כרטיסים או רשתות נתונים, יכולה לשפר משמעותית את הקריאוּת ולהוסיף לאסתטיקה הכללית. עם זאת, כדי להשיג את האפקט הזה בפריסות של רשתות ושל Flexbox, בדרך כלל נדרשו פתרונות חלופיים לא נוחים עם גבולות, פסאודו-רכיבים או טריקים של רקע. לפעמים הפתרון החלופי הזה עלול לגרום לבעיות מכמה סיבות.
- לא אינטואיטיביים: הם גורמים ליצירת יחסי תלות מבניים לצורך עיצוב חזותי, בניגוד לעקרונות של HTML סמנטי.
- לא נגישות: בדרך כלל הן דורשות רכיבי DOM נוספים, שיכולים להפריע לטכנולוגיות מסייעות כמו קוראי מסך.
- קשה לתחזק אותם: הם דורשים לוגיקה מורכבת של פריסה, וקשה יותר לשמור על עיצוב עקבי בין הרכיבים.
- פגיעה בביצועים: הפתרונות הזמניים האלה עלולים להוסיף רכיבים מיותרים ל-DOM, שיכולים להוביל לבעיות בביצועים.
פלטפורמת האינטרנט כבר תומכת בסטיילינג של פערים באמצעות המאפיין column-rule, אבל בשלב זה התמיכה מוגבלת לפריסות של עמודות מרובות בלבד. מפתחי אינטרנט ביקשו במשך זמן רב דרך עקבית לעיצוב הרווח בין רכיבים בסוגים אחרים של פריסות רלוונטיות, כמו רשת וגמישות.
הפתרון: עיצוב של רווחים ב-CSS
קישוט של רווחים מרחיב את האפשרויות של המאפיין column-rule כך שיעבוד עם סוגים אחרים של פריסה, כמו רשת וגמישות (flexbox), ומציג מאפיין חדש, row-rule, שמשלים אותו. כך אפשר לשמור על עקביות ולשנות את הסגנון של הרווח בין הפריטים בסוגים שונים של פריסות.
לקישוט הרווח ב-CSS יש את היתרונות הבאים:
- אין השפעה על הפריסה: התוספות האלה הן חזותיות בלבד. הם לא משפיעים על הפריסה או על הריווח, כך שאפשר להשתמש בהם בלי חשש לשבירה של עיצובים קיימים.
- תחביר חוזר: בדומה ל-CSS Grid, אפשר להשתמש בתחביר
repeat()כדי ליצור דפוסים של קישוטים בחלקים שונים של מאגר, וכך ליצור עיצובים עשירים ועקביים עם כמות מינימלית של CSS. - תגי עיצוב נקיים יותר: אין צורך ברכיבים נוספים או בפסאודו-רכיבים – רק לעצב את הפערים ישירות.
- התאמה אישית: מאפייני CSS חדשים כמו
*rule-break,*rule-outsetו-gap-rule-paint-orderמאפשרים יותר אפשרויות התאמה אישית מעבר לעיצוב הכלל המסורתי של רוחב, סגנון וצבע.
בעזרת קישוטי הרווח ב-CSS, קל יותר מאי פעם ליצור פריסות דפים ייחודיות מבחינה חזותית וקלות לתחזוקה.
קישוטי פערים בפעולה
כדי לשחק עם קישוטים של רווחים ב-CSS כבר עכשיו, צריך להשתמש בדפדפן שתומך בהם: Edge או Chrome, החל מגרסה 139, ולהעביר את הדגל Enable Experimental Web Platform Features למצב מופעל (ON) בכתובת edge://flags או chrome://flags.
מגרש משחקים אינטראקטיבי למפתחים
כדי לנסות את סוגי הפריסות השונים שבהם יש תמיכה ב-CSS gap decorations, וגם את כל המאפיינים החדשים, כדאי לנסות את האזור האינטראקטיבי למפתחים.
תפריט המבורגרים
בהדגמה של תפריט המבורגר מוסבר איך להשתמש במאפיין column-rule-break: intersection כדי לשבור את הקישורים של הרווח בין העמודות בכל צומת גלוי עם רווחים בין שורות.
הדגמה כוללת גם שימוש ב-column-rule-offset: -15px כדי לשנות את האורך של הקישוטים, ולמשוך אותם מהקצוות של כל צומת.
Notebook
בהדגמה במסמך ה-notebook, row-rule-break: none מוודא שהעיטורים של השורות לא מופסקים בצמתים – הם פועלים ברציפות משמאל לימין של המאגר.
לעומת זאת, column-rule-break: spanning-item מוודא שהעיטורים של העמודות לא מצוירים מאחורי פריטים שחופפים על כמה שורות – הם מתחילים ומסתיימים בפריטים שחופפים על כמה שורות ויוצרים צומת T גלוי.
המאפיין row-rule משתמש בפונקציה repeat() כדי לשלוט במדויק באופן שבו קישוטי הרווח יחולו על קטעים שונים של הפריסה.
כך אפשר ליצור דפוס עיצוב שבו כללי השורות מוסתרים בכותרת ובכותרת התחתונה, עבים יותר סביב התוכן הראשי ועדינים יותר במקומות אחרים.
חדשות יומיות בנושא CSS
בהדמו של Daily CSS News נעשה שימוש בפריסה בסגנון מגזין, ומגדירים קישוטים של רווחים ב-CSS במספר מאגרים של רשתות ו-flexbox.
שימו לב למשחק סודוקו בצד שמאל, שבו נעשה שימוש ברשת 9x9 ובדפוס החוזר כדי לצייר את הקווים הדקים והעבים בין השורות והעמודות:
.sudoku {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 6px;
column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
column-rule-style: solid;
column-rule-color: var(--secondary);
row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
row-rule-style: solid;
row-rule-color: var(--secondary);
}
בקשה לקבלת משוב
אנחנו שמחים לאפשר לך לנסות את התכונה 'קישוט רווחים ב-CSS'. אנחנו חושבים שהתכונה הזו פותרת בעיה נפוצה, ונשמח לקבל ממך משוב כדי שנוכל לשפר אותה בהתאם לצרכים שלך.
התכונה 'קישוט פערים ב-CSS' עדיין מופעלת ב-Chromium. אם תבחרו לבדוק את התכונה, חשוב לזכור שאנחנו עדיין עובדים עליה ויכול להיות שתבחינו מקרים שבהם היא לא פועלת כצפוי. חלק מהמגבלות הנוכחיות כוללות אנימציה של קישוטים של פערים ושימוש במספר גדול מאוד של מסלולים בחלונית.
אם מצאתם באג או אם יש לכם משוב לגבי התכונה, אתם יכולים לשלוח לנו אותו על ידי פתיחת באג חדש ב-Chromium.