יחידות מידה

פודקאסט CSS – 008: יחידות מדידה

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

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

iWork Numbers

מספרים משמשים להגדרת opacity, ‏ line-height ואפילו לערכים של ערוצי צבע ב-rgb. המספרים הם מספרים שלמים ללא יחידה (1, 2, 3, 100) ומספרים עשרוניים (0.1, 0.2, 0.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 כאחוז, הוא מבוסס על הרכיב עם קבוצת הטרנספורמציה. בדוגמה הזו, הערך של translateX ב-p הוא 10% והערך של width הוא 50%. קודם מחשבים מה יהיה הרוחב: 150px כי הוא 50% מהרוחב של ההורה שלו. לאחר מכן, מחלקים את 10% ב-150px, והתוצאה היא 15px.

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

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

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

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

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

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

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

אורכי קטעים יחסיים

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

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

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

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

הטקסט, ה-CSS מצוין פי 10 עם תוויות לגובה האותיות האנכיות, לגובה האותיות הנמוכות ולגובה ה-x. גובה ה-x מייצג 1ex וה-0 מייצג 1ch

יחידות יחסיות לאזור התצוגה

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

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

p {
  max-width: 60ch;
}

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

יחידות חלופיות ביחס לאזור התצוגה

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

יחידות שווה ל-
lvw, lvh, lvi, lvb, lvmin, lvmax יחידות גדולות של אזור תצוגה, ביחס למרחב הגלוי של אזור התצוגה, כאשר כל רכיבי ממשק המשתמש האופציונליים של הדפדפן מוסתרים. שווה ליחידות שאינן וריאנט ביחס לאזור התצוגה. לא משתנה כל עוד גודל אזור התצוגה לא משתנה.
svw, svh, svi, svb, svmin, svmax יחידות קטנות של אזור תצוגה, ביחס למרחב הגלוי של אזור התצוגה, כאשר כל רכיבי ממשק המשתמש האופציונליים של הדפדפן גלויים. לא משתנה כל עוד גודל אזור התצוגה לא משתנה.
dvw, dvh, dvi, dvb, dvmin, dvmax יחידות דינמיות של אזור צפייה, ביחס למרחב הגלוי הנוכחי של אזור הצפייה. שינויים כשרכיבים בממשק המשתמש של הדפדפן מוצגים או מוסתרים.

יחידות ביחס למאגר

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

יחידות ביחס ל-
cqw 1% מהרוחב של המאגר.
cqh 1% מגובה המאגר.
cqi 1% מהגודל של הקונטיינר בתוך השורה.
cqb 1% מגודל הבלוק של הקונטיינר.
cqmin 1% מהמידה הקטנה יותר של המאגר.
cqmax 1% מהממד הגדול יותר של המאגר.

יחידות שונות

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

יחידות של זווית

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

בדיקת ההבנה

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

אילו מהאפשרויות הבאות הן מאפיינים חוקיים?

em
px
ex
ס"מ
בתוך
8
ux
ch
ui

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

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

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

לא נכון
True

משאבים