גרסת מקור לניסיון של ממשקי API מתקפלים

Alexis Menard
Alexis Menard
X GitHub
Thomas Steiner

Chrome בודק שני ממשקי API – Device Posture API ו-Viewport segments Enumeration API, שזמינים כגרסת מקור לניסיון ב-Chrome 125. הם נקראים יחד ממשקי API מתקפלים, שמיועדים לעזור למפתחים לטרגט מכשירים מתקפלים. בפוסט הזה נציג את ממשקי ה-API האלה ונסביר איך להתחיל לבדוק אותם.

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

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

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

ממשקי ה-API החדשים מספקים למפתחים דרכים לשפר את חוויית המשתמש במכשירים האלה. כל API חושף את הפרימיטיבים הנדרשים של פלטפורמת האינטרנט בשתי דרכים, באמצעות CSS ו-JavaScript.

Device Posture API

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

יש שתי אפשרויות למצבים שבהם המכשיר יכול להיות:

  • folded: מצבים של מחשב נייד או ספר.

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

  • continuous: תצוגה שטוחה, טאבלט או אפילו תצוגה מעוגלת בצורה חלקה.

ציור סכמטי של מכשירים במצבים של מחשב נייד או ספר.

CSS

המפרט של Device Posture API מגדיר תכונת מדיה חדשה של CSS – מיקום המכשיר. תכונת המדיה הזו משפיעה על קבוצה של מצבים קבועים. המצבים האלה כוללים מספר ערכים מוגדרים מראש שכל אחד מהם כולל את המצב הפיזי של המכשיר.

הערכים של התכונה device-posture תואמים לתיאור הקודם של המצבים האפשריים:

  • folded
  • continuous

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

דוגמאות:

/* Using the device in a 'book' posture. */
@media (device-posture: folded) { ... }

/* Using the device in a 'flat' posture, or any typical device like a laptop or
desktop device. */
@media (device-posture: continuous) { ... }

JavaScript

כדי להריץ שאילתות על תנוחת המכשיר, יש אובייקט DevicePosture חדש.

const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);

כדי להגיב לשינויים בתנוחת המכשיר, למשל אם משתמש פותח את המכשיר לגמרי ואז עבר מ-folded ל-continuous, כדאי להירשם לאירועי change.

navigator.devicePosture.addEventListener('change', (e) => {
  console.log(`The device posture changed to type ${e.type}`);
});

API של קטעי אזור התצוגה

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

CSS

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

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

  • env(viewport-segment-width x y)
  • env(viewport-segment-height x y)
  • env(viewport-segment-top x y)
  • env(viewport-segment-left x y)
  • env(viewport-segment-bottom x y)
  • env(viewport-segment-right x y)

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

תרשים שמוצגים בו פלחים אופקיים ואנכיים. הקטע האופקי הראשון הוא x 0 ו-y 0, הקטע השני x 1 ו-y 0. הקטע האנכי הראשון הוא x 0 ו-y 0, הקטע השני x 0 ו-y 1.
הקטע האופקי הראשון הוא x 0 ו-y 0, הקטע השני x 1 ו-y 0. הקטע האנכי הראשון הוא x 0 ו-y 0, הקטע השני x 0 ו-y 1.

קטע הקוד הבא הוא דוגמה פשוטה ליצירת חוויית משתמש מפוצלת, שבה יש לנו שני קטעי תוכן (col1 ו-col2) בכל צד של החלק העליון והקבוע.

<style>
  /* Segments are laid out horizontally. */
  @media (horizontal-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: row;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-right 0 0);
      background-color: steelblue;
    }

    #fold {
      width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
      background-color: black;
      height: 100%;
    }

    #col2 {
      display: flex;
      background-color: green;
    }
  }

  /* Segments are laid out vertically. */
  @media (vertical-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: column;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-bottom 0 0);
      background-color: pink;
    }

    #fold {
      width: 100%;
      height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
      background-color: black;
    }

    #col2 {
      display: flex;
     background-color: seagreen;
    }
  }
</style>

<div id="segment-css-container">
   <div id="col1"></div>
   <div id="fold"></div>
   <div id="col2"></div>
 </div>

בתמונות הבאות אפשר לראות איך נראית החוויה במכשיר פיזי.

טלפון מתקפל במצב ספר אנכי.

טלפון מתקפל במצב ספר אופקי.

טאבלט מתקפל במצב של ספר אופקי.

JavaScript

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

const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);

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

כדאי לנסות את ממשקי ה-API המתקפלים

ממשקי ה-API המתקפלים זמינים בגרסת מקור לניסיון מ-Chrome 125 עד Chrome 128. במאמר תחילת העבודה עם גרסאות מקור לניסיון מפורט מידע רקע על גרסאות המקור לניסיון.

לצורך בדיקה מקומית, אפשר להפעיל את ממשקי ה-API המתקפלים עם הסימון 'תכונות ניסיוניות של פלטפורמת האינטרנט' בכתובת chrome://flags/#enable-experimental-web-platform-features. אפשר להפעיל אותו גם על ידי הרצת Chrome משורת הפקודה באמצעות --enable-experimental-web-platform-features.

הדגמות

להדגמות, ראו מאגר הדגמות. אם אין לכם מכשיר פיזי שאפשר לבדוק, תוכלו לבחור בכלי האמולציה Galaxy Z Fold 5 או Asus Zenbook Fold ב-Chrome DevTools, ולעבור בין המתמשך ל-Folded. אפשר גם להציג את הציר באופן חזותי לפי הצורך.

כלי פיתוח ל-Chrome עם אמולציה של מכשיר מתקפל.