יחידות מידה

The CSS Podcast – 008: Ssize Units

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

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

מספרים

מספרים משמשים להגדרה של opacity, line-height ואפילו לערכי ערוצים של צבעים בrgb. מספרים הם מספרים שלמים ללא יחידה (1, 2, 3, 100) ושברים עשרוניים (.1, .2, .3).

למספרים יש משמעות בהתאם להקשר. לדוגמה, כשמגדירים את הפונקציה line-height, מספר מייצג יחס אם מגדירים אותו ללא יחידה תומכת:

p {
  font-size: 24px;
  line-height: 1.5;
}

בדוגמה הזו, 1.5 שווה ל-150% מגודל הגופן המחושב של הרכיב p. כלומר, אם ב-p יש font-size של 24px, גובה השורה יחושב כ-36px.

אפשר להשתמש במספרים גם במקומות הבאים:

  • כשמגדירים ערכים למסננים: filter: sepia(0.5) מחילה מסנן חום-ספיה מסוג 50% על הרכיב.
  • כשמגדירים שקיפות: opacity: 0.5 מחיל שקיפות של 50%.
  • בערוצי צבעים: rgb(50, 50, 50), כאן אפשר להגדיר ערך של צבע בין 0 ל-255. לעיון בשיעור הצבעים.
  • כדי לבצע טרנספורמציה של רכיב: transform: scale(1.2) משנה את גודל הרכיב ב-120% מגודלו הראשוני.

אחוזים

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

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

בדוגמה שלמעלה, הרוחב של div p הוא 150px, בהנחה שהפריסה משתמשת בברירת המחדל box-sizing: content-box.

אם מגדירים את margin או padding כאחוז, הם יהיו חלק מהרוחב של רכיב ההורה, ללא קשר לכיוון.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

בקטע הקוד שלמעלה, הפונקציה margin-top וגם padding-left יחושבו ל-150px.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

אם מגדירים ערך של transform כאחוז, הוא מבוסס על הרכיב עם קבוצת הטרנספורמציה. בדוגמה הזו, ל-p יש ערך translateX של 10% ו-width שהוא 50%. קודם כול, חשבו מה יהיה הרוחב: 150px כי הוא 50% מהרוחב של תבנית ההורה שלו. לאחר מכן, יש לקחת 10% של 150px, כלומר 15px.

מידות ואורכים

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

אורכים מוחלטים

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

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

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

יחידה שם שווה ל-
ס"מ סנטימטרים 1 ס"מ = 96 פיקסלים/2.54
מ"מ מילימטרים 1 מ"מ = 1/10 מתוך 1 ס"מ
ש רבע מילימטר 1Q = 1/40 מתוך 1 ס"מ
ב אינצ'ים 1in = 2.54 ס"מ = 96 פיקסלים
pc פיקאס 1pc = 1/6 מתוך 1 אינץ'
נק' נקודות 1pt = 1/72 מתוך 1 אינץ'
פיקסלים פיקסלים 1px = 1/96 מתוך 1 אינץ'

אורכים יחסיים

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

יחידות יחסיות-גודל גופן

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

יחידה ביחס ל:
em ביחס לגודל הגופן, כלומר 1.5em יהיה גדול ב-50% מגודל הגופן המחושב הבסיסי של ההורה. (בעבר, הגובה של אות רישית "M").
לדוגמה היוריסטי כדי לקבוע אם להשתמש ב-x-height, באות "x" או '.5em' בגודל הגופן המחושב הנוכחי של האלמנט.
כובע גובה האותיות רישיות בגודל הגופן המחושב הנוכחי של הרכיב.
ch התקדמות ממוצעת במספר תווים של גליף צר בגופן של הרכיב (מיוצג על ידי הגליף "0").
ic התקדמות ממוצעת במספר תווים של גליף ברוחב מלא בגופן של הרכיב, כפי שמיוצג על ידי הגליף "水" (אידאוגרף המים CJK, U+6C34).
rem גודל הגופן של רכיב הבסיס (ברירת המחדל היא 16 פיקסלים).
lh גובה השורה של הרכיב.
rlh גובה השורה של רכיב הבסיס.
הטקסט ב-CSS גדול פי 10 עם תוויות לגובה עולה, גובה בירידה וגובה x. גובה ה-x מייצג את 1ex וה-0 מייצג את 1ch

יחידות יחסיות לנקודת מבט

ניתן להשתמש במאפייני אזור התצוגה (חלון הדפדפן) כבסיס יחסי. היחידות האלה נכללות בשטח התצוגה הזמין.

יחידה יחסית ל-
vw 1% מרוחב אזור התצוגה. היחידה הזו מאפשרת לאנשים לבצע תעלולים מגניבים של גופנים, כמו שינוי הגודל של גופן הכותרת על סמך רוחב הדף במטרה לגרום למשתמש לשנות את גודלו, גם גודל הגופן ישתנה.
vh 1% מגובה אזור התצוגה. ניתן להשתמש באפשרות הזו כדי לארגן פריטים בממשק משתמש, למשל אם יש לך סרגל כלים של כותרת תחתונה.
vi 1% מגודל אזור התצוגה בציר המוטבע של רכיב הבסיס. המונח 'ציר' מתייחס למצבי כתיבה. במצבי כתיבה אופקיים כמו אנגלית, הציר שבתוך השורה הוא אופקי. במצבי כתיבה אנכית, כמו גופנים ביפנית, הציר המוטבע עובר מלמעלה למטה.
vb 1% מגודל אזור התצוגה בציר הבלוקים של רכיב הבסיס. עבור ציר הבלוק, זו תהיה הכיוון של השפה. בשפות LTR כמו אנגלית, יהיה ציר של בלוק אנכי, כי קוראים בשפה האנגלית מנתחים את הדף מלמעלה למטה. במצב כתיבה אנכי יש ציר בלוקים אופקי.
vmin 1% מהגודל הקטן יותר של אזור התצוגה.
vmax 1% מהממד הגדול יותר של אזור התצוגה. 
div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

בדוגמה הזו, הערך div יהיה 10% מרוחב אזור התצוגה מפני ש-1vw הוא 1% מרוחב אזור התצוגה. לרכיב p יש max-width של 60ch, ולכן הוא לא יכול לחרוג מהרוחב של 60 תווי "0" בגופן ובגודל שמחושבים.

יחידות שונות

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

יחידות זווית

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

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

באמצעות יחידת הזווית deg, אפשר לסובב div ב-90° על הציר המרכזי שלו.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

יחידות רזולוציה

בדוגמה הקודמת, הערך של min-resolution הוא 192dpi. היחידה dpi היא נקודות לאינץ'. הקשר שימושי לכך הוא זיהוי מסכים ברזולוציה גבוהה מאוד, כמו מסכים עם רטינה בשאילתת מדיה והצגת תמונה ברזולוציה גבוהה יותר.

בדיקת ההבנה

בחינת הידע שלכם בנושא מידות

אילו מהמאפיינים הבאים הם מאפיינים חוקיים?

ס"מ
סנטימטרים, מימד מוחלט חוקי.
ui
ממשק המשתמש הוא לא מאפיין ב-CSS.
בתוך
אינצ'ים, מאפיין מוחלט תקין.
שמיני
מאפיין לא של CSS
px
פיקסלים, מימד מוחלט תקין.
ch
יחידות תווים, מאפיין יחסי חוקי.
ux
חוויית המשתמש היא לא מאפיין ב-CSS.
em
יחידות מסוג האות 'M', שהן מאפיין יחסי חוקי.
לדוגמה
אותיות 'x' יחידות, מימד יחסי חוקי.

מה ההבדל בין יחידות מוחלטות ויחסיות?

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

היחידות של אזור התצוגה הן מוחלטות.

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

מקורות מידע