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

Rachel Andrew

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

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

במפרט CSS Display Level 4 יש עכשיו טקסט של מפרט בטיוטה. השינוי הזה מציג נכס חדש בשם reading-flow. המאפיין הזה מתווסף לרכיב המכיל של פריסת flex או grid (הרכיב עם display: grid או display: flex).

המאפיין מקבל את הערכים הבאים:

• ‫normal: מעקב אחרי סדר הרכיבים ב-DOM, שזו ההתנהגות הנוכחית.
• ‫flex-visual: ההגדרה הזו משפיעה רק על קונטיינרים גמישים. בהתאם לסדר הקריאה החזותי של פריטי Flex, תוך התחשבות במצב הכתיבה.
• ‫flex-flow: ההגדרה הזו משפיעה רק על קונטיינרים גמישים. הכיוון של flex-flow.
• ‫grid-rows: משפיע רק על קונטיינרים של רשתות. הסדר הוא לפי הסדר החזותי של הפריטים ברשת, בשורה, תוך התחשבות במצב הכתיבה.
• ‫grid-columns: משפיע רק על קונטיינרים של רשתות. הסדר הוא לפי הסדר החזותי של הפריטים ברשת לפי עמודה, תוך התחשבות במצב הכתיבה.
• ‫grid-order: משפיע רק על קונטיינרים של רשתות. הפונקציה לוקחת בחשבון את הנכס order, אבל פועלת כמו normal.

לדוגמה, אם יש לכם שלושה פריטים גמישים במיכל, והגדרתם את flex-direction שלהם ל-row-reverse, הם יסתדרו מהסוף של מיכל הפריטים הגמישים, וסדר המעבר באמצעות Tab יהיה מימין לשמאל.

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

מוסיפים תרחישים לדוגמה לבעיה של קבוצת העבודה בנושא CSS. אם יש לך דוגמאות באתרים פעילים או שאתה יכול ליצור הדגמה ב-CodePen או ב-JSFiddle, זה יעזור לנו מאוד כשנדון בבעיה הזו כקבוצה. אם יש לך רעיונות לגבי מה שאתה מצפה שיקרה, זה גם יכול לעזור. עם זאת, הדבר הכי חשוב הוא לראות את תרחישי השימוש האמיתיים.