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

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

Rachel Andrew

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

הבעיה

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

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

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

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

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

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

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

הפתרון המוצע

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

בדוגמה הבאה מוצגת פריסה גמישה באמצעות 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. תודה לכריס הרלסון (Chris Harrelson), לטאב אטקינס (Tab Atkins) וליאן קילפטריק (Ian Kilpatrick) על המשוב והבדיקה.