בשנה שעברה פרסמנו את הפוסט בבלוג
פתרון בעיות של פריסת שירות 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;
}
row-reverse
.צריך להוסיף את השדה flex-flow: visual
, ולאחר מכן תהליך הקריאה יהיה תואם לסדר החזותי
אנגלית, ולכן משמאל לימין.
.flex {
display: flex;
flex-direction: row-reverse;
reading-flow: flex-visual;
}
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; }
reading-flow: grid-rows
.רוצה לנסות?
נכס ה-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 זה יהיה שימושי מאוד כשנדבר על הבעיה הזו. כקבוצה. אם יש לך מחשבות לגבי מה שהיית מצפה שיקרה, זה גם שימושי. אבל, הדבר החשוב ביותר הוא לראות את התרחישים האמיתיים לדוגמה.