את הפוסט הזה אני רוצה להקדיש לנושא יחידות המידה השונות שיש לנו בCSS, מה המאפיינים של כל יחידת מידה, ובמי להשתמש מתי.
קודם כל, למה חשוב להבין את יחידות המידה השונות?
- כמובן, כדי שתוכלו להשתמש בהם בקלות, ולהבין למה קורה מה שקורה.
- בפוסט תגלו ששימוש ביחידות מידה שונות ממה שאתם רגילים עשוי לפתור לכם בעיות שונות ולהקל בפיתוח, במיוחד כשמדברים על רספונסיב.
- תלמדו לא לעשות שטויות 🙂 . בדיוק השבוע נתקלתי במישהו שהגדיר גובה שדה, במקום לכתוב 50 פיקסלים, הוא הגדיר את הגובה באמצעות vh, שעליו נרחיב בהמשך, וגרם לבאגים הזויים.
בקיצור, חשוב להבין מה המשמעות של כל יחידת מידה, איך עובד שימוש באחוזים ומתי כדאי להשתמש בvw. נתחיל.
יחידת המידה פיקסל – px
נראה לי ההכי שימושית ומוכרת. כותבים בדיוק כמה פיקסלים רוצים לגודל פונט, שוליים, מרחק, גודל וכדו'. זהו גודל קבוע ולא משתנה בהתאם לגודל המסך, וההגדרה לא מושפעת מהגדרות הדפדפן של הגולש או מאלמנטים אחרים בסביבה. מה שכתבנו זה מה שיופיע בדפדפן.
שימו לב שכמובן ניתן להשתמש בmedia query של CSS על מנת להגדיר גדלים שונים לרוחבי מסך שונים, כך ששימוש בפיקסלים אינו סותר בניה רספונסיבית.
ראו בהמשך המאמר את הפרק שמסביר מתי להשתמש בפיקסלים ומתי באחוזים, שם ישנן דוגמאות על השימוש הנכון בפיקסלים.
מתי להשתמש בפיקסלים
בכל מצב שרוצים גודל קבוע שאינו מושפע מהסביבה ומרוחב המסך. הדוגמה הכי נפוצה ושימושית היא רוחב הקונטיינר. ראו בהמשך פירוט על מהו קונטיינר ואיך הוא מתחלק, תוך שילוב של שימוש בפיקסלים ואחוזים.
זו דוגמה מצוינת לשימוש בפיקסלים, כי כפי שנראה בהמשך, שאר יחידות המידה הן תלויות באלמנטים אחרים או ברוחב המסך, ולעולם לא נצא מזה לא בפיתוח ולא בבדיקות.
הגדרה נוספת שכדאי שתהיה בפיקסלים – גודל פונט בתוך פקדים – inputs. במסכי מובייל, אם גודל הפונט בתוך פקד של טופס קטן מ16 פיקסלים – כשעושים פוקוס על אותו שדה – נהיה איזשהו זום למסך. לכן זו הגדרה שכדאי שתהיה בפיקסלים, כדי שנוודא את תקינותה תמיד.
גם עובי מסגרת ניתן בדרך כלל בפיקסלים, וכן כשיש לנו עיצוב דסקטופ שהינו שונה מעיצוב מובייל – להרבה רכיבים יהיה לנו קל יותר לתת רוחב בפיקסלים, כי השימוש בו קל יותר משימוש בשאר יחידות המידה.
באופן כללי – כל הגדרה שאנחנו לא רוצים לשנות בכל רוחב מסך באופן ייעודי – נשתמש בפיקסלים ולא במאפיינים אחרים. שוב, ראו בהמשך בפרק על השימוש הנכון בפיקסלים ואחוזים, שם יש פירוט נוסף.
מתי לא להשתמש בפיקסלים
- אם אנחנו יודעים שבנקודות שבירה שונות המסך (או רוב המסך) אמור להיות זהה, רק פשוט קטן או גדול יותר – לא נשתמש בפיקסלים אלא בהגדרות כמו rem.
- כשאנחנו רוצים לחלק את המסך לחלקים, לדוגמה 3 עמודות. בשום אופן אין לתת רוחב בפיקסלים, ולשנות בכל נקודת שבירה. זה לא יעיל ולא נכון.
יחידת המידה rem – אחוזים מהroot
מהו הroot? – זהו הרכיב הHTMLי שמחזיק לנו את כל שאר האלמנטים. במילים אחרות – התגית html.
כאשר משתמשים בהגדרה rem כיחידת מידה – התוצאה הסופית תהיה שקלול של המספר שנתנו בהגדרה כפול הfont-size של תגית הhtml שלנו.
אני יודעת שזה נשמע מסובך, אבל הנה דוגמה:
לו יצויר שגודל הפונט של הhtml הוא 16 פיקסלים, ויש לי בעמוד איזשהו אלמנט – div לצורך העניין – שאני נותנת לו גובה של 2rem – הרי שהחישוב הוא 2 * 16, והגובה של הדיב יהיה 32 פיקסלים.
ישנן שתי דרכים להשתמש בrem:
- ברירת המחדל של הדפדפנים, לפחות של רובם, היא 16px גודל פונט של הHTML. אפשר להישען על זה.
הפלוס – אנחנו נשענים על ברירת המחדל של הדפדפן, וכך אם יש גולש שהגדיר גודל גדול או קטן יותר כי קשה לו למשל לקרוא את גודל הפונט הרגיל – אנחנו "זורמים" עם הדרישה שלו והאתר יהיה מותאם.
המינוס – כל הגדרת גודל/אורך/רוחב/גובה שורה/עובי/גודל פונט – נצטרך לחשב כמה rem צריך להגדיר כדי להגיע למספר שהוגדר בעיצוב. זה מתיש ומתסכל. - אפשר להגדיר לHTML גודל פונט קבוע, נוח – בדרך כלל 1 או 100 – ואז כל יחידות המידה יישענו על הגודל הזה.
הפלוס – אין צורך לחשב. אם נתנו 1 פיקסלים גודל פונט לHTML, הרי שכל הגדרה שנרצה להגדיר בהמשך העמוד – רק נחליף את יחידת המידה מpx ל- rem. לדוגמה – אם אני רוצה גודל פונט של 24 פיקסלים לאלמנט מסויים – אני צריכה לתת לו 24rem וזה יתורגם ל24 פיקסל. נוח וקל.
המינוס – ביטלנו את ברירת המחדל של הדפדפן של הגולש.
בתכלס – תמיד עדיף להגדיר לHTML גודל של 1. הפיתוח קל בלי השוואה, הרספונסיב פשוט וקל, והיום כמעט כל אתר מכיל רכיב נגישות להגדלת והקטנת הפונט באתר. (לקריאה נוספת על רכיבי נגישות)
התנהגות rem ברספונסיביות
כעיקרון – כל עוד אנחנו לא משנים את הfont-size של הhtml שלנו – אין הבדל אם השתמשנו בפיקסלים או בrem. מכאן הכל תלוי בדרישות העיצוב.
יש אפשרות שנגדיר את כל העיצוב שלנו לפי הרזולוציה הגבוהה ביותר שהוגדרה על ידי העיצוב, ואז בנקודת השבירה של הקונטיינר (ראו בהמשך מהו קונטיינר) – אנחנו מקטינים את גודל הפונט של הHTML במעט ממש, כך שהגדלים החדשים של האלמנטים ייכנסו בצורה מושלמת בקונטיינר המוקטן.
זה בעיקר נוח במובייל. באחד האתרים שעליהם עבדתי הגדרנו איזה 2-3 נקודות שבירה למובייל, כדי שבמסכים צרים ממש (320 פיקסל למשל, היום כמעט לא בשימוש) דברים לא יחתכו אלא פשוט יקטנו בהתאמה. והכל נשאר פרופורציונלי.
יחידת המידה em – אחוזים מגודל הפונט של האלמנט
זו יחידת מידה מעצבנת. אל תשתמשו בה בשום אופן. כל שינוי פיצפון גורר שינויי לוואי עד אין קץ.
רק כדי לשבר את האוזן. יחידת המידה הזו דומה ושונה מהיחידה rem.
הן דומות, כי שתיהן מתבססות על גודל פונט. אבל הן שונות, כי בעוד rem מתבססת על משהו יציב ודי קבוע – גודל הפונט של הhtml – הרי שהיחידה em מתבססת על גודל הפונט של האלמנט הספציפי. לדוגמה אם יש לי דיב כלשהו, והגדרתי לו כך:
font-size: 20px;
margin-top: 2em;במקרה כזה הmargin-top הסופי יהיה 40 פיקסלים, כי הוא 2*20.
המצב היחיד שבו אני רואה לזה שימוש, הוא כאשר אנחנו רוצים לדוגמה שגובה האלמנט תמיד יהיה X שורות של התוכן שלו. במקרה כזה, אם נניח שאני רוצה שייכנסו 3 שורות – אני יכולה להגדיר למשל:
font-size: 20px;
height: 3em;ואז גם אם מחר מקטינים או מגדילים את גודל הפונט – גם הגובה ישתנה בהתאם. לא יודעת. לא יצא לי להשתמש בזה עד היום.
יחידת המידה %
הנה הגענו לאחוזים. אחת ההגדרות השימושיות גם כן, בנוסף לפיקסלים. כאשר אנחנו משתמשים באחוזים, אנחנו קודם כל מדברים על אחוזים מהאלמנט האב. לגבי מה באלמנט האב – כאן זה שונה קצת מהגדרה להגדרה. להלן פירוט קצר על ההגדרות הנפוצות:
שימוש באחוזים לקביעת גודל פונט, רוחב, גובה, ורוחב/גובה מינימליים/מקסימליים
בכל ההגדרות הללו – אנחנו הולכים על אחוזים של אותה הגדרה מתוך האלמנט האב. לדוגמה – אם אני נותנת לאלמנט width: 80% – הכוונה לקחת 80% מרוחב האבא (בניגוד לem שיקח מגודל הפונט של האבא).
על זו הדרך בגודל פונט למשל. אם לאבא יש גודל פונט של 20 פיקסלים, ולאלמנט הבן אני נותנת גודל פונט של 50% – הרי שנתתי לו גודל פונט של 10 פיקסלים בלבד.
שימו לב שבהגדרות שקשורות לגובה – במידה ולאבא לא הוגדר גובה – אין אפשרות להגדיר לבן שלו גובה באחוזים. כנ"ל לגבי גובה מינימום וגובה מקסימום. גם אם נגדיר – הדפדפן לא יתחשב בהגדרה.
שימוש באחוזים לקביעת padding
ההגדרה padding, כשהיא מגיעה לאחוזים, הופכת לדבר נורא מעניין. הוא לוקח אחוזים מהרוחב של האבא.
הכי נפוץ, והכי יוצא לי להשתמש בהגדרה padding-top באחוזים. לדוגמה – padding-top: 70% – ייתן לאלמנט הבן שוליים עליונים בעובי של 70 אחוזים מהרוחב של האבא שלו.
למה זה שימושי? כדי לייצר אלמנטים רספונסיביים שמתנהגים כמו תמונה אבל אינם תמונה. תוכלו לקרוא את הפוסט המרתק הזה שיסביר לכם איך לייצר אייפריים או כל אלמנט אחר באופן שככל שהרוחב שלו קטן גם קטן גם הגובה.
הגדרות מיקום אבסולוטי – left, bottom, top, right
הגדרות אלו מתייחסות באופן שונה בהתאם להגדרת הposition של האלמנט.
המצב השימושי ביותר הוא יישור של אלמנטים עם position: absolute/fixed. ממליצה לקרוא את הפוסט הזה, הוא יעשה לכם סדר בקשר למיקום, אבל באופן כללי ההגדרות הללו תמקמנה את האלמנט ביחס לאלמנט האב (אב רלטיבי או המסך).
לדוגמה left: 50% – ימקם את האלמנט הבן, כך שצד שמאל שלו יהיה ממוקם בנקודת האמצע (היא ה50%) של האלמנט האב.
התנהגות של הגדרות נפוצות נוספות בעת שימוש באחוזים
- line-height – לוקח אחוזים מגודל הפונט של אותו אלמנט שעליו הוא מוגדר.
- margin – מייצר התנהגות לא ברורה. אל תשתמשו
יחידות המידה vh, vw – אחוזים מאורך ומרוחב החלונית
שתי הגדרות דומות:
- vw = View Width – רוחב החלון
- vh = View Height – גובה החלון
ההדגשה היא על רוחב וגובה החלון ולא המסך. כי יכול להיות שהמסך שלי הוא ברוחב של 1920, אבל כיווצתי את הדפדפן לגודל של 500 פיקסלים. ההתייחסות היא לפי גודל החלון של הדפדפן.
אלו הגדרות מאד נוחות. בעיקר יוצא לי להשתמש בהם כשאני בונה חלון של פופאפ ורוצה אותו עם גובה באחוזים מהמסך. כמו שנאמר למעלה – ההגדרות של height באחוזים תקפות רק כשגם לאלמנט האב יש גובה מוגדר. במקרה שאין לו – הדבר הכי פשוט יהיה להשתמש בגובה vh.
כנ"ל בסיידברים שונים ודברים כאלה.
אין לזה המון שימוש, אבל כשצריך אותם – אין להם תחליף 🙂
רק אמירה חשובה מאד לגבי VH:
בשום אופן אין לתת גדלים/מרחקים בVH ואז לחשוב שהעמוד יהיה רספונסיבי. הגודל הזה רק יגרום לבעיות במסכים שונים. המצב היחיד שבו תתני גובה של אלמנט בVH הוא כאשר אכן האלמנט צריך להיות ביחס לגובה המסך. לדוגמה אם מבקשים ממך שתמונה מסויימת תהיה תמיד בגובה של 80 אחוזים מגובה המסך, כך שכל הגולשים – לא משנה מה גודל המסך שלהם – יראו את הקומה שאחרי התמונה. או לדוגמה רכיב שאמור תמיד להיות בגובה המסך. או כמו שכתבתי למעלה על פופאפ, שנוסיף לו הגבלת גובה של max-height: 90vh כך שהוא לעולם לא יהיה גבוה יותר מהמסך של הגולש.
מעבר לזה – הגודל הזה יסבך אותך מאד. הוא לא רספונסיבי כמו שנוטים לחשוב לפעמים, ועליך לתת אותו רק כאשר הדרישה היא אכן גודל ביחס למסך. בכל מקרה אחר – השתמשי בפיקסלים או REM כמו שמפורט למעלה.