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

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

Bramus

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

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

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

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

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

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

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

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

תמיכה בדפדפן

  • 20
  • 12
  • 19
  • 6

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

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

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

הטעינה של 100vh בנייד גבוהה מדי.
נפח הטעינה של 100vh בנייד גבוה מדי.

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

100vh בנייד היא "נכון" כשממשקי המשתמש של סוכן המשתמש מבוטלים.
100vh בנייד היא "נכון" כשמבטלים את ממשק המשתמש של סוכן המשתמש.

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

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

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

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

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

שתי תצוגות חזותיות של דפדפנים לנייד ממוקמות זו לצד זו. לאחד יש אלמנט בגודל 100svh והשני 100lvh.
שתי תצוגות חזותיות של דפדפנים לנייד ממוקמות זו לצד זו.
לאחת מהן יש רכיב בגודל 100svh והשנייה ל-100lvh.

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

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

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

100dvh מתאים את עצמו לאזור התצוגה הגדול או הקטן.
100dvh מתאים את עצמו לאזור התצוגה גדול או קטן.

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

תמיכה בדפדפן

  • 108
  • 108
  • 101
  • 15.4

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

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

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

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

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

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

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

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

חלק מהסדרה החדשה של יכולת פעולה הדדית