בקשה לקבלת משוב למפתחים על Read-flow ואלמנטים עם display: content

Rachel Andrew

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

עדכונים בהצעה

יש עכשיו טיוטת טקסט של מפרט במפרט של רמת תצוגה 4 של CSS. הוספנו נכס חדש בשם reading-flow. המאפיין הזה מתווסף לרכיב שמכיל את הפריסה של פריסת הרשת או הפונקציה הגמישה (הרכיב עם display: grid או display: flex).

המאפיין מקבל את הערכים הבאים:

• normal: מעקב אחר סדר הרכיבים ב-DOM, שהוא הנוכחי או התנהגות המשתמשים.
• flex-visual: המדיניות הזו משפיעה רק על קונטיינרים גמישה. בהתאם סדר הקריאה החזותי של הפריטים הגמישים, תוך התייחסות למצב הכתיבה.
• flex-flow: המדיניות הזו משפיעה רק על קונטיינרים גמישה. עוקב אחר הזרימה הגמישה לכיוון מסוים.
• grid-rows: המדיניות חלה רק על קונטיינרים ברשת. בהתאם לרכיבים החזותיים סידור הפריטים ברשת לפי שורה, תוך התייחסות למצב הכתיבה.
• grid-columns: המדיניות חלה רק על קונטיינרים ברשת. לפי הסדר החזותי של פריטים ברשת לפי עמודות, תוך התייחסות למצב הכתיבה.
• grid-order: המדיניות חלה רק על קונטיינרים ברשת. מביא בחשבון את הנכס order, אבל הוא פועל כמו normal.

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

.flex {
  display: flex;
  flex-direction: row-reverse;
}

צריך להוסיף את השדה flex-flow: visual, ולאחר מכן תהליך הקריאה יהיה תואם לסדר החזותי אנגלית, ולכן משמאל לימין.

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

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

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-areas: "d b b"
                       "c c a";
  reading-flow: grid-rows;
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }

רוצה לנסות?

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

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

רכיבים עם display: contents ורכיבי אינטרנט

יש בעיה שעדיין לא טופלה שצוות ה-CSS יוכל להחליט איך לטפל במצב שבו אחד הצאצאים של יסוד עם זרימת קריאה יש display: contents, באופן דומה אם הפריט היה <slot>.

בדוגמה הבאה, לרכיבים <div> יש display: contents. בעקבות את כל רכיבי <button> מקודמים כדי להשתתף ולכן reading-flow מביא בחשבון את הסדר שלו.

 .wrapper {
   display: flex;
   reading-flow: flex-visual;
 }

<div class="wrapper">
   <div style="display: contents" id="contents1">
     <button style="order: 3" id="o3">3</button>
     <button style="order: 1" id="o1">1</button>
     <div style="display: contents" id=contents2>
       <button style="order: 4" id="o4">4</button>
       <button style="order: 2" id=o2>2</button>
     </div>
   </div>
 </div>

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

בנוסף, אנחנו פועלים לפתרון הבעיות שקשורות לdisplay: contents אפשר לראות דוגמאות שבהן כדאי להשתמש נכס reading-flow עם display: contents. להבין את העולם האמיתי יעזרו לנו לתכנן פתרון שמתאים לצרכים שלכם.

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