שיפורים בפריסה לוגית עם מקוצרים יחסיים לזרימה

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

אדם ארגייל

אוריול ברופה

החל מ-Chromium 69 (3 בספטמבר 2018), מאפיינים לוגיים וערכים עזרו למפתחים לשלוט על הפריסות הבינלאומיות שלהם באמצעות פריסה לוגית, במקום על סגנונות פיזיים, כיוון ומימדים. ב-Chromium 87, הוספנו קיצורים וקיזוזים כדי שיהיה קל יותר לכתוב את המאפיינים והערכים הלוגיים האלה. כך אפשר לעדכן את Chromium ל-Firefox, שיש לו תמיכה בקיצורים מאז 66. הם מוכנים לשימוש ב-Safari בתצוגה המקדימה הטכנית.

זרימת מסמך

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

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

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

בדקת פעם את הרכיב p בכלי הפיתוח ל-Chrome? אם כן, אולי שמתם לב שסגנונות ברירת המחדל של סוכן המשתמש אינם פיזיים, אלא הגיוניים.

p {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

שירות CSS מגיליון הסגנונות של סוכן המשתמש של Chromium

השוליים לא נמצאים בחלק העליון או התחתון, כמו שקורא באנגלית עשוי להאמין. השעה block-start וblock-end! המאפיינים הלוגיים האלה דומים לחלק העליון והתחתון של קורא באנגלית, אבל גם לקורא יפני כמו מימין לשמאל. נכתבה פעם אחת, והיא פועלת בכל מקום.

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

כיוון החסימה הוא הכיוון של חסימות התוכן החדשות, למשל, "איפה למקם את הפסקה הבאה?". אפשר לחשוב עליו כ'בלוק תוכן', או 'גוש טקסט'. בכל שפה מסדרת את הבלוקים שלה ומסדרת אותם ב-block-axis בהתאם. block-start הוא הצד הראשון שמציבים את הפסקה, בעוד ש-block-end הוא הצד שאליו זורמת הפסקה החדשה.

בכתיבה ידנית ביפנית מסורתית, לדוגמה, כיוון הבלוק עובר מימין לשמאל:

כיוון בתוך השורה הוא הכיוון של האותיות והמילים. חשוב לקחת בחשבון את הכיוון של היד והיד בזמן הכתיבה; הן נעות לאורך inline-axis. inline-start הוא הצד שבו מתחילים לכתוב, ואילו inline-end הוא הצד שבו מסתיימת הכתיבה. הסרטון שלמעלה, inline-axis, נמצא מלמעלה למטה, אבל בסרטון הבא הinline-axis עובר מימין לשמאל.

המשמעות של flow-relative היא שהסגנונות שנכתבו בשפה אחת יהיו לפי הקשר ויוחלו בהתאם לשפות אחרות. התוכן יזרום בהתאם לשפה שעבורה הוא נשלח.

קיצורי דרך חדשים

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

קיצורים שוליים

לא נשלחו אפשרויות חדשות, אבל יש קיצורים שימושיים:
margin-block ו-margin-inline.

margin-block-start: 2ch;
margin-block-end: 2ch;

margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;

אין קיצורי דרך ל "למעלה ולמטה" או ל "שמאל וימין"... עד עכשיו! סביר להניח שאתם מתייחסים לכל 4 הצדדים באמצעות הקיצור של margin: 10px;, ועכשיו אתם יכולים להפנות בקלות ל-2 צדדים משלימים באמצעות הקיצור של המאפיין הלוגי.

margin-inline-start: 4ch;
margin-inline-end: 2ch;

margin-inline: 4ch 2ch;

הוספת קיצורי דרך

לא נשלחו אפשרויות חדשות, אבל יש יותר קיצורי דרך שימושיים:
padding-block ו-padding-inline.

padding-block-start: 2ch;
padding-block-end: 2ch;

padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

וקבוצת הקיצורים המשלימים של inline:

padding-inline-start: 4ch;
padding-inline-end: 2ch;

padding-inline: 4ch 2ch;

מובנה וקיצורים

את המאפיינים הפיזיים top, right, bottom ו-left אפשר לכתוב כערכים לנכס inset. כל ערך של position יכול להפיק תועלת מהגדרת צד עם inset.

.cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
}

position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;

position: absolute;
inset: 1px 2px 3px 4px;

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

תכונות חדשות

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

position: absolute;
top: 10px;
bottom: 10px;

position: absolute;
inset-block: 10px;

position: absolute;
left: 10px;
right: 20px;

position: absolute;
inset-inline: 10px 20px;

קריאות נוספות ורשימה מלאה של קיצורי דרך וארוכה זמינות ב-MDN.

קיצורי גבול

לגבול, וגם למאפיינים המקננים שלו color, style ו-width, יש גם קיצורים לוגיים חדשים.

border-top-color: hotpink;
border-bottom-color: hotpink;

border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;

border-left-style: dashed;
border-right-style: dashed;

border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;

border-left-width: 1px;
border-right-width: 1px;

border-inline-width: 1px;
/* or */
border-inline-width: 1px 1px;

קריאות נוספות ורשימה מלאה של מקשי קיצור וארכות גבולות זמינות ב-MDN.

דוגמה לתכונה הלוגית <figure>

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

אפשר גם לנסות!

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

מילוי Polyfilling ותמיכה בדפדפנים שונים

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

p {
  /* for unsupporting browsers */
  margin-top: 1ch;
  margin-bottom: 2ch;

  /* for supporting browsers to use */
  /* and unsupporting browsers to ignore and go 🤷‍♂️ */
  margin-block: 1ch 2ch;
}

אבל זה לא בדיוק פתרון מלא שמתאים לכולם. הנה חלופה בכתב יד שמשתמשת בפסאודו-בורר של :lang() כדי לטרגט שפות ספציפיות, מתאימה את הריווח הפיזי שלהן, ואז בסוף מוצג הריווח הלוגי בדפדפנים תומכים:

/* physical side styles */
p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

/* adjusted physical side styles per language */
:lang(ja) {
  p {
    /* zero out styles not useful for traditional Japanese */
    margin-top: 0;
    margin-bottom: 0;

    /* add appropriate styles for traditional Japanese */
    margin-right: 1ch;
    margin-left: 2ch;
  }
}

/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}

/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
  /* remove any potential physical cruft.. */
  margin: 0;
  /* explicitly set logical value */
  margin-block: 1ch 2ch;
}

אפשר גם להשתמש ב-@supports כדי לקבוע אם לספק חלופות לנכס פיזי:

p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

@supports (margin-block: 0) {
  p {
    margin-block: 1ch 2ch;
  }
}

ל-Sass, ל-PostCSS, ל-Emotion ולפלטפורמות נוספות יש חבילות אוטומטיות של זמני build ו/או זמני build עם מגוון רחב של חלופות או פתרונות. בדקו כל אחד מהם כדי לראות איזה מהם תואם לשרשרת הכלים שלכם ולאסטרטגיה הכוללת של האתר.

המאמרים הבאים

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

margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;

margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;

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

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

html {
  flow-mode: physical;
  /* or */
  flow-mode: logical;
  /* now all margin/padding/etc references are logical */
}

/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */

זה קשה! אתם יכולים להצביע, להביע את דעתכם – אנחנו רוצים לשמוע את דעתכם.

רוצים ללמוד או לחקור יותר מאפיינים לוגיים? הנה הפניה מפורטת, יחד עם מדריכים ודוגמאות, ב-MDN 🤓

משוב

• כדי להציע שינויים בתחביר ה-CSS של קיצורים יחסיים לזרימה, קודם צריך לבדוק את הבעיות הקיימות במאגר של csswg-drafts. אם אף אחת מהבעיות הקיימות לא תואמת להצעה, יוצרים בעיה חדשה.
• על מנת לדווח על באגים ביישום של קיצורי דרך יחסיים לזרימה ב-Chromium, קודם בודקים את הבעיות הקיימות ב-Chromium 'מעקב אחר באגים'. אם אף אחת מהבעיות הקיימות לא תואמת לאף אחת מהבעיות הקיימות, יוצרים בעיה חדשה.