בשנה שעברה פרסמנו את הפוסט בבלוג פתרון לבעיה של הפרדה בין פריסת ה-CSS לבין סדר המקורות.
ההצעה הזו מפורטת בקבוצת העבודה של CSS, והיא נועדה לפתור את הבעיה שבה שינוי הסדר של פריטים ב-flexbox וב-grid גורם לחוויית מעבר לא רציפה בין הפריטים באמצעות מקש Tab. בחלק ההתחלתי של הפוסט מפורטת הבעיה שקבוצת העבודה מנסה לפתור. מאז חלפו כמה חודשים, ורצינו לעדכן אתכם על הסטטוס הנוכחי. יש לנו גם תחום ספציפי שבו אנחנו זקוקים למשוב שלכם – איך אנחנו מטפלים בפריטים עם display-contents
?
עדכונים בהצעה
עכשיו יש טקסט של טיוטת מפרט במפרט של CSS ברמת תצוגה 4.
כך נוצר נכס חדש שנקרא reading-flow
.
הנכס הזה מתווסף לרכיב המכיל של הפריסה הגמישה או של הפריסה בתצוגת רשת (הרכיב עם display: grid
או display: flex
).
המאפיין יכול לקבל את הערכים הבאים:
normal
: פועל לפי סדר הרכיבים ב-DOM, שהוא ההתנהגות הנוכחית.flex-visual
: ההגדרה הזו רלוונטית רק לקונטיינרים גמישים. לפי סדר הקריאה החזותי של פריטים גמישים, תוך התחשבות במצב הכתיבה.flex-flow
: ההגדרה הזו רלוונטית רק לקונטיינרים גמישים. פועל לפי כיוון הזרימה הגמישה.grid-rows
: ההגדרה הזו רלוונטית רק לקונטיינרים של רשת. לפי הסדר החזותי של הפריטים ברשת לפי שורה, תוך התחשבות במצב הכתיבה.grid-columns
: ההגדרה הזו רלוונטית רק לקונטיינרים של רשת. לפי הסדר החזותי של הפריטים ברשת לפי עמודה, תוך התחשבות במצב הכתיבה.grid-order
: ההגדרה הזו רלוונטית רק לקונטיינרים של רשת. הפונקציה מביאה בחשבון את המאפייןorder
, אבל בכל שאר ההיבטים היא פועלת כמוnormal
.
לדוגמה, אם יש לכם שלושה פריטים גמישים בקונטיינר, והגדרתם את הערך של flex-direction
ל-row-reverse
, הם יייצבו בסוף הקונטיינר הגמיש וסדר הפסיק ינוע מימין לשמאל.
.flex {
display: flex;
flex-direction: row-reverse;
}
row-reverse
.מוסיפים את flex-flow: visual
ואז תהליך הקריאה יתבצע לפי הסדר החזותי באנגלית, כלומר משמאל לימין.
.flex {
display: flex;
flex-direction: row-reverse;
reading-flow: flex-visual;
}
reading-flow:flex-visual
.בפריסות של רשתות, משתמשים ב-reading-flow
כדי לפעול לפי השורות או העמודות החזותית ולא לפי סדר המקור. בדוגמה הבאה תהליך הקריאה עוקב אחרי השורות.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 150px);
grid-template-areas: "d b b"
"c c a";
reading-flow: grid-rows;
}
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
reading-flow: grid-rows
.רוצה לנסות?
מאפיין ה-CSS הזה הוא ניסיוני כרגע, אבל אפשר להפעיל אותו לצורך בדיקה. כדי לנסות את התכונה, צריך להתקין את Chrome Dev או את Canary בגרסה 128 ואילך ולהפעיל את דגל סביבת זמן הריצה CSSReadingFlow
.
ריכזנו כאן דוגמאות שיעזרו לכם להתחיל, שכולן פועלות ב-Canary כשהדגל מופעל.
ההתנהגות של בקשות התמיכה מסוג display: contents
עדיין נמצאת בתהליך פיתוח, ועשויה להשתנות בהתאם למשוב שתספקו אחרי שתעיינו בקטע הבא של הפוסט הזה.
רכיבים עם display: contents
ורכיבי אינטרנט
יש בעיה לא פתורה שקבוצת העבודה בנושא CSS צריכה להחליט איך לטפל בה. הבעיה היא מצב שבו לאחד מהצאצאים של רכיב עם reading-flow יש display: contents
, וגם מצב שבו הפריט הוא <slot>
.
בדוגמה הבאה, הרכיבים <div>
מכילים את display: contents
. לכן, כל הרכיבים של <button>
מוגדרים כחלק מהפריסה הגמישה, ולכן reading-flow
מתייחס לסדר שלהם.
.wrapper {
display: flex;
reading-flow: flex-visual;
}
<div class="wrapper">
<div style="display: contents" id="contents1">
<button style="order: 3" id="o3">3</button>
<button style="order: 1" id="o1">1</button>
<div style="display: contents" id=contents2>
<button style="order: 4" id="o4">4</button>
<button style="order: 2" id=o2>2</button>
</div>
</div>
</div>
נשמח לדעת אם יש לך דוגמאות מהעולם האמיתי שגורמות למצב שמתואר בדוגמה הזו. האם יש מקרים שבהם צריך לשנות את הסדר של פריטים שנמצאים בתוך רכיב שיש לו display: contents
עם פריטים שאינם אחים, בגלל שהם אחים של הפריט שיש לו display: contents
.
בנוסף, בזמן שאנחנו פועלים לפתרון הבעיות שקשורות ל-display: contents
, אשמח לקבל דוגמאות למקרים שבהם כדאי להשתמש בנכס reading-flow
עם display: contents
. הבנת התרחישים לדוגמה שבהם אתם משתמשים ב-Google Cloud תעזור לנו לתכנן פתרון שיתאים לצרכים שלכם.
מוסיפים תרחישים לדוגמה לבעיה בקבוצת העבודה של CSS. אם יש לך דוגמאות באתרים פעילים או אם יש לך אפשרות ליצור הדגמה ב-CodePen או ב-JSFiddle, זה יהיה מאוד שימושי כשנדון בבעיה הזו כקבוצה. אם יש לך מחשבות לגבי מה שציפית שיקרה, זה גם שימושי. עם זאת, הדבר החשוב ביותר הוא לראות את תרחישים השימוש האמיתיים.