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

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

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

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

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

זרימת מסמכים

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

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

כיוון חסימה הוא הכיוון שבו תוכן חדש חוסם, למשל שואלים את עצמכם, "?Where to turn the next paragraph" אפשר לחשוב על זה בתור 'בלוק תוכן' או 'בלוק של טקסט'. כל שפה מארגנת את הבלוקים ומסדרת אותם יחד 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.

שוליים קצרים

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

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, לרגש ולמשתמשים אחרים יש Bundler ו/או 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 🤓

משוב