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

Rachel Andrew

בשנה שעברה פרסמנו את הפוסט בבלוג פתרון בעיות בפריסת CSS ובניתוק הזמנת המקור. ההצעה הזו מפורטת בקבוצת העבודה של CSS, והיא נועדה לפתור את הבעיה שבה שינוי הסדר של פריטים ב-flexbox וב-grid גורם לחוויית מעבר לא רציפה בין הפריטים באמצעות מקש Tab. בחלק ההתחלתי של הפוסט מפורטת הבעיה שקבוצת העבודה מנסה לפתור. הדברים התקדמו מאז, והפוסט הזה הוא עדכון קצר לגבי המקום שאנחנו נמצאים בו עכשיו. יש לנו גם תחום ספציפי שבו אנחנו זקוקים למשוב שלכם – איך אנחנו מטפלים בפריטים עם display-contents?

עדכונים בהצעה

עכשיו יש טיוטה של טקסט של מפרט במפרט של רמת תצוגה 4 של CSS. כך נוצר נכס חדש בשם 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;
}

מוסיפים את flex-flow: visual ואז תהליך הקריאה יתבצע לפי הסדר החזותי באנגלית, כלומר משמאל לימין.

.flex {
  display: flex;
  flex-direction: row-reverse;
  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; }

רוצה לנסות?

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