יחידות מידה

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

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

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

iWork Numbers

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

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

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

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

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

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

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

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

בדיקת ההבנה

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

משאבים

• ערכי מפרט ויחידות של CSS ברמה 4
• מידות ויחידות ב-MDN
• כל המידע על Ems
• הסבר על אחוזים