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