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

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

Rachel Andrew

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

הבעיה

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

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

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

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

הפתרון המוצע

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

מעקב אחרי פריסות אקראיות באמצעות reading-order: auto

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

האם כדאי להשתמש בכלים ליצירת פוסטים כדי להחיל את המאפיינים האלה?

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

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

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

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

תמונה ממוזערת של Patrick Tomasso. תודה על המשוב והבדיקה של Chris Harrelson,‏ Tab Atkins ו-Ian Kilpatrick.