הגדרות מסך

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

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

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

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

מונטאז' של טלפונים מתקפלים בתצורות שונות.

שני מסכים

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

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

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

יש תכונת מדיה ניסיונית שנועדה לזהות אם האתר שלכם מוצג במכשיר עם שני מסכים. השם המוצע של תכונת המדיה הוא viewport-segments. יש שתי שיטות: horizontal-viewport-segments וvertical-viewport-segments.

אם תכונת המדיה horizontal-viewport-segments מדווחת על הערך 2 ו-vertical-viewport-segments מדווח על הערך 1, המשמעות היא שציר המכשיר פועל מלמעלה למטה, והתוכן מתחלק לשני חלוניות זה לצד זה.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

אם תכונת המדיה vertical-viewport-segments מדווחת על הערך 2 והערך horizontal-viewport-segments מדווח על הערך 1, הציר פועל מצד לצד ומחלק את התוכן לשני לוחות, אחד על גבי השני.

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}
תרשים שמראה פלחים של אזור התצוגה.
תרשים מ-Microsoft Edge Explainers.

אם גם ב-vertical-viewport-segments וגם ב-horizontal-viewport-segments מדווח הערך 1, המשמעות היא שהאתר מוצג במסך אחד בלבד, גם אם במכשיר יש יותר ממסך אחד. הפעולה הזו מקבילה לאי-שימוש בשאילתת מדיה.

משתני סביבה

תכונת המדיה viewport-segments כשלעצמה לא תעזור לכם לעצב סביב הציר המעצבן הזה. צריכה להיות לכם דרך לדעת את גודל הציר. כאן תוכלו להיעזר במשתני סביבה.

משתני סביבה ב-CSS מאפשרים לשקלל חדירות מביכות של מכשירים בסגנונות שלכם. לדוגמה, תוכלו לעצב סביב ה"חריץ" ב-iPhone X באמצעות ערכי הסביבה safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom ו-safe-area-inset-left. מילות המפתח האלה תחומות בתוך הפונקציה env().

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

משתני סביבה פועלים כמו מאפיינים מותאמים אישית. כלומר, אפשר להעביר אפשרות חלופית במקרה שמשתנה הסביבה לא קיים.

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
}

כדי שמשתני הסביבה האלה יפעלו ב-iPhone X, צריך לעדכן את הרכיב meta שמציין את המידע viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

עכשיו פריסת הדף תכסה את כל אזור התצוגה ותמלא בבטחה את המסמך בעזרת ערכי in-set של המכשיר.

למסכים מתקפלים מוצעים שישה משתני סביבה חדשים: viewport-segment-width, viewport-segment-height, viewport-segment-top, viewport-segment-left, viewport-segment-bottom, viewport-segment-right.

תרשים שמציג משתני סביבה לשני מסכים.
תרשים מ-Microsoft Edge Explainers.

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

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

הפריסה מחולקת לשני מסכים כאשר הציר מפריע לעמודה הרחבה יותר.

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

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

הפריסה מחולקת באופן שווה בין שני מסכים ללא הפרעה גלויה.

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

תרשים שממחיש שירות מיקום שמפוצל לשני מסכים, כאשר המפה במסך אחד ומסלול הגעה מהשני.
תרשים מ-Microsoft Edge Explainers.

העתיד

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

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

בדיקת ההבנה

בוחנים את הידע שלכם לגבי הגדרות מסך

איזו שאילתת מדיה מטרגטת למכשיר מתקפל בפריסה לרוחב מפוצלת?

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)
המסך מוגדר עם 2 עמודות ושורה אחת, בחלוקה לרוחב.
@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)
שתי שורות ועמודה אחת, בחלוקה לאורך.
@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)
2 שורות ו-2 עמודות, ב-4 דרכים.
@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1)
תא יחיד, ללא פיצולים.

מהם משתני סביבה? למשל env(safe-area-inset-top)

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