The CSS Podcast – 008: Ssizes (יחידות מידה)
האינטרנט הוא מדיום רספונסיבי, אבל לפעמים רוצים לשלוט במימדים שלו כדי לשפר את איכות הממשק הכללית. דוגמה טובה לכך היא הגבלת אורכי השורות כדי לשפר את הקריאוּת. איך עושים את זה באמצעי תקשורת גמיש כמו האינטרנט?
במקרה כזה, אפשר להשתמש ביחידת 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
כאחוז, הוא מבוסס על הרכיב עם קבוצת הטרנספורמציה.
בדוגמה הזו, הערך של translateX
ב-p
הוא 10%
והערך של width
הוא 50%
.
קודם מחשבים מה יהיה הרוחב: 150px
כי הוא 50% מהרוחב של ההורה שלו.
לאחר מכן, מחלקים את 10%
ב-150px
, והתוצאה היא 15px
.
מידות ואורכים
אם מצרפים יחידה למספר, הוא הופך למאפיין.
לדוגמה, 1rem
הוא מאפיין.
בהקשר הזה, היחידה שמצורפת למספר נקראת במפרטים אסימון מאפיין.
אורך הוא מאפיין שמתייחס למרחק, והוא יכול להיות מוחלט או יחסי.
אורכי נתונים מוחלטים
כל האורכים המוחלטים עוברים אל אותו בסיס, ולכן הם ניתנים לחיזוי בכל מקום שבו משתמשים בהם ב-CSS.
לדוגמה, אם משתמשים ב-cm
כדי לקבוע את הגודל של הרכיב ואז מדפיסים אותו, הוא אמור להיות מדויק אם משווים אותו למטרה.
div {
width: 10cm;
height: 5cm;
background: black;
}
אם הדפסת את הדף הזה, div
יודפס כמלבן שחור בגודל 10x5 ס"מ.
חשוב לזכור ש-CSS משמש לא רק לתוכן דיגיטלי, אלא גם לעיצוב תוכן מודפס.
אורך מוחלט יכול להיות שימושי מאוד כשאתם מעצבים לצורך הדפסה.
יחידה | שם | שווה ערך ל- |
---|---|---|
ס"מ | סנטימטרים | 1cm = 96px/2.54 |
מ"מ | מילימטרים | 1 מ"מ = 1/10 ס"מ |
שאלה | רבע מילימטרים | 1Q = 1/40th of 1cm |
in | אינצ'ים | 1in = 2.54 ס"מ = 96 פיקסלים |
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'). |
לדוגמה | שיטת ניתוח נתונים שמאפשרת לקבוע אם להשתמש בגובה ה-x, באות x או ב-.5em בגודל הגופן המחושב הנוכחי של האלמנט. |
מכסה | גובה האותיות הגדולות בגודל הגופן המחושב הנוכחי של הרכיב. |
ch | ההתקדמות הממוצעת של התווים של גליף צר בגופן של האלמנט (המיוצג על ידי הגליף '0'). |
ic | ההתקדמות הממוצעת של התו של גליף ברוחב מלא בגופן של הרכיב, כפי שהוא מיוצג על ידי הגליף 水 (סמל מים ב-CJK, U+6C34). |
rem | גודל הגופן של רכיב הבסיס (ברירת המחדל היא 16px). |
lh | גובה השורה של הרכיב. |
rlh | גובה השורה של רכיב השורש. |
יחידות יחסיות של נקודת מבט
אפשר להשתמש במאפייני אזור התצוגה (חלון הדפדפן) כבסיס יחסי. היחידות האלה מחלקות את שטח שדה הראייה הזמין.
יחידה | ביחס ל- |
---|---|
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' בגופן ובגודל המחושבים.
יחידות שונות
יש יחידות נוספות שצוינו כדי לטפל בסוגי ערכים מסוימים.
יחידות של זווית
במודול הצבע, התייחסנו ליחידות של זווית, שיעזרו לכם להגדיר ערכי מעלות, כמו הטון ב-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, בשאילתת מדיה והצגת תמונה ברזולוציה גבוהה יותר.
בדיקת ההבנה
בדיקת הידע שלכם בנושאי התאמה
אילו מהמאפיינים הבאים הם מאפיינים תקינים?
מה ההבדל בין יחידות מוחלטות ליחידות יחסיות?
יחידות אזור התצוגה הן מוחלטות.