בקשה לקבלת משוב למפתחים על Read-flow ואלמנטים עם display: content

בשנה שעברה פרסמנו את הפוסט בבלוג פתרון לבעיה של הפרדה בין פריסת ה-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, זה יהיה מאוד שימושי כשנדון בבעיה הזו כקבוצה. אם יש לך מחשבות לגבי מה שציפית שיקרה, זה גם שימושי. עם זאת, הדבר החשוב ביותר הוא לראות את תרחישים השימוש האמיתיים.