היחידות הגדולות, הקטנות והדינמיות של אזור התצוגה

יחידות CSS חדשות שמביאות בחשבון את אזורי התצוגה בניידים בעזרת סרגלי כלים דינמיים.

Bramus

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

כדי לקבוע גודל של משהו שגבוה כמו אזור התצוגה, אפשר להשתמש ביחידות vw ו-vh.

• vw = 1% מהרוחב של גודל אזור התצוגה.
• vh = 1% מהגובה של גודל אזור התצוגה.

מגדירים לרכיב רוחב של 100vw וגובה של 100vh, והוא יכסה את אזור התצוגה במלואו.

היחידות vw ו-vh נחתו בדפדפנים עם היחידות הנוספות האלה

• vi = 1% מגודל הציר המוטבע של אזור התצוגה.
• vb = 1% מגודל ציר הבלוק של אזור התצוגה.
• vmin = הקטן מבין הערכים vw או vh.
• vmax = הגדול מבין האפשרויות vw או vh.

ליחידות האלה יש תמיכה טובה בדפדפן.

הצורך ביחידות חדשות של אזור תצוגה

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

למרות שגודל אזור התצוגה עשוי להשתנות, הגדלים vw ו-vh לא משתנים. כתוצאה מכך, רכיבים בגודל 100vh גבוהים יזומו מחוץ לאזור התצוגה.

כשגוללים למטה סרגלי כלים דינמיים אלה מושכים אותם. במצב כזה, רכיבים בגודל 100vh יכסו את כל אזור התצוגה.

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

• אזור תצוגה גדול: גודל אזור התצוגה בהנחה שממשקי UA מורחבים באופן דינמי ומבוטלים כדי לבטל אותם.
• Small Viewport: גודל אזור התצוגה בהנחה שכל ממשקי UA מורחבים באופן דינמי ומורחבים לצורך הרחבה.

לאזורי התצוגה החדשים מוקצות גם יחידות:

• ליחידות שמייצגות את אזור התצוגה הגדול יש קידומת lv. היחידות הן lvw, lvh, lvi, lvb, lvmin ו-lvmax.
• ליחידות שמייצגות את אזור התצוגה הקטן יש קידומת sv. היחידות הן svw, svh, svi, svb, svmin ו-svmax.

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

בנוסף לאזורי התצוגה הגדולים והקטנים, יש גם אזור תצוגה דינמי שכולל התעניינות דינמית בממשק המשתמש של UA:

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

ליחידות המלוות שלו יש את הקידומת dv: dvw, dvh, dvi, dvb, dvmin ו-dvmax. המידות שלהן מוצמדות בין המקבילות lv* ו-sv* שלהן.

היחידות האלה נשלחות בגרסה 108 של Chrome, ומצטרפים ל-Safari ול-Firefox שכבר יש בהם תמיכה.

נקודות שצריך לשים לב אליהן:

יש כמה נקודות שחשוב לדעת לגבי יחידות של נקודות מבט:

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

• הערכים של אזור התצוגה הדינמי לא מתעדכנים ב-60fps. בכל הדפדפנים, העדכונים מווסתים כאשר ממשק המשתמש של UA מתרחב או נסגר. בחלק מהדפדפנים יש אפילו ביטול קפיצות מתעדכן לחלוטין בהתאם לתנועה (גלילה איטית לעומת החלקה) שבה נעשה שימוש.

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

מקורות מידע נוספים

למידע נוסף על אזורי תצוגה ועל יחידות אלה, עיין בפרק זה של HTTP 203. בסרטון, Bramus מוסר ל-Jake מידע על אזורי התצוגה השונים ומסביר איך בדיוק המידות של היחידות האלה נקבעות.

חומרי קריאה נוספים:

• מפרט ערכי CSS 4: אורכים יחסיים לנקודת מבט
• רשומת סטטוס של Chrome
• הסבר על אזור התצוגה ב-Layout
• הסבר על יחידות אזור התצוגה