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

בדוגמה הבאה מוצג פריסת flex באמצעות row-reverse. הפריטים הגמישים הם reading-order: auto, והקונטיינר הגמיש הוא 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. תודה לכריס הארלסון, טאב אטקינס ואיאן קילפטריק על המשוב והבדיקה.