פתרון בעיות הקשורות לניתוק פריסת ה-CSS והזמנת המקור

נשמח לקבל משוב על פתרון מוצע לבעיה של שיטות פריסה שמסדרות פריטים בסדר שלא קשור למקור של המסמך.

Rachel Andrew

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

הבעיה

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

לדוגמה, שימוש במאפיין order בפריטים גמישים משנה את סדר הפריסה אבל לא את הסדר במקור.

לוחצים על הדוגמה ומקישים על Tab כדי לראות איך סדר הכרטיסיות מנותק מסדר הפריסה באמצעות המאפיין `order`.

כשמשתמשים בפריסה של רשת, יכול להיות ששיטת הפריסה שנבחרה תשבש את סדר הכרטיסיות. לדוגמה, כשמשתמשים בתג grid-auto-flow: dense, שיוצר סדר פריסה אקראי של פריטים.

לוחצים על הדוגמה ומקישים על Tab כדי לראות איך סדר הכרטיסיות מנותק מסדר הפריסה, הפעם על ידי סידור הפריטים ברשת שלא לפי הסדר.

מפתח יכול גם לגרום לניתוק הזה על ידי הצבת פריטים ברשת בסדר שונה מזה שנקבע במקור.

כדאי ללחוץ על הדוגמה ולעבור בין הכרטיסיות כדי לראות איך סדר הכרטיסיות מנותק מסדר הפריסה באמצעות מאפייני מיקום ברשת.

הצעה לפתרון

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

פריסות אקראיות עם `reading-order: auto`

במצבים שיוצרים סדר פריסה אקראי, כמו שימוש בפריסה צפופה בפריסת רשת, כנראה שתרצו שהדפדפן יפעל לפי הפריסה ולא לפי סדר המקור. כדי שזה יקרה, צריך להגדיר לפריטים של flex או grid את המאפיין reading-order עם הערך auto.

קוד ה-CSS הבא יגרום לסדר הקריאה להיות בהתאם למיקום הפריטים שמוצגים בצפיפות בגלל grid-auto-flow: dense.

.cards {
  display: grid;
  grid-auto-flow: dense;
}

.cards li {
  grid-column: auto / span 2;
  reading-order: auto;
}

פריסות לא אקראיות עם `reading-order-items`

בפריסות מסוימות של רשת ו-flex, קל להבין את סדר הפריסה. לדוגמה, בפריסת flex שמשתמשת במאפיין order כדי לסדר מחדש פריטים, יש סדר פריסה ברור שנקבע על ידי המאפיין order. בפריסות אחרות, לא ברור מהו סדר הפריסה האידיאלי, ויכול להיות שיש יותר מאפשרות אחת. לכן, כשמשתמשים בפריסות לא אקראיות, צריך להוסיף את המאפיין grid-order-items למאגר, עם ערכי מילות מפתח שמסבירים את הכוונה לגבי סדר הפריסה.

בדוגמה הבאה מוצג פריסת flex באמצעות row-reverse. לפריטי ה-flex יש reading-order: auto, ול-flex container יש reading-order-items: flex flow כדי לציין שאנחנו רוצים שסדר הקריאה יתבסס גם על הכיוון flex-flow, ולא על סדר חזותי (שאפשר לציין באמצעות flex visual).

.cards {
  display: flex;
  flex-flow: row-reverse;
  reading-order-items: flex flow;
}

.cards li {
  reading-order: auto;
}

בדוגמה הבאה, פריסת רשת נוצרת באמצעות grid-template-areas והפריטים ממוקמים בסדר פריסה שונה מהסדר המקורי. המאפיין reading-order-items משמש כדי לציין שאנחנו צריכים לפעול לפי סדר הפריסה, ולעבור על כל שורה לפני שמתקדמים לשורה הבאה. (grid column יציין את הכיוון ההפוך).

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "a a b b b b"
    "c c d d e e"
    "f f g g h h";
  reading-order-items: grid rows;
}

.a {
  grid-area: a;
  reading-order: auto;
}

האם זה אומר שסדר המקורות לא משנה?

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

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

האם כלי העריכה צריכים להחיל את המאפיינים האלה?

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

נשמח לקבל ממך משוב על ההצעה הזו

נשמח לקבל משוב על התכונה הזו. בפרט, אם יש לכם תרחיש שימוש שלדעתכם לא ייפתר באמצעות הגישה הזו, או אם יש לכם בעיה שקשורה לנגישות בגישה הזו, אתם מוזמנים ליידע את קבוצת העבודה של CSS.

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

תמונה ממוזערת מאת Patrick Tomasso. תודה לכריס הראלסון, טאב אטקינס ואיאן קילפטריק על המשוב והבדיקה.