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