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

קיצורי דרך חדשים לנכסים לוגיים ונכסי inset חדשים ל-Chromium.

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

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

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

תהליך יצירת המסמך

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

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

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

בדקתם פעם את הרכיב 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! המאפיינים הלוגיים האלה דומים ל'למעלה' ול'למטה' של קורא אנגלית, אבל גם דומים ל'ימין' ול'שמאל' של קורא יפני. כותבים פעם אחת, והקוד פועל בכל מקום.

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

כתב יד ארוך
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.

.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 תוכלו למצוא רשימה מלאה של קיצורי דרך ותיאורים מלאים של רכיבי ה-inset.

קיצורי דרך לגבולות

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

תמיכה ב-Polyfill ובדפדפנים שונים

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

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

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

עוד נכסים ל-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 בכל מקוצר כדי להחיל את המקבילה הלוגית, וזה לא נשמע DRY במיוחד.

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

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 יש מסמך עזרה מפורט עם מדריכים ודוגמאות 🤓

משוב