Chrome בודק שני ממשקי API – Device Posture API ו-Viewport segments Enumeration API, שזמינים כגרסת מקור לניסיון ב-Chrome 125. הם נקראים יחד ממשקי API מתקפלים, שמיועדים לעזור למפתחים לטרגט מכשירים מתקפלים. בפוסט הזה נציג את ממשקי ה-API האלה ונסביר איך להתחיל לבדוק אותם.
יש בעיקר שני גורמי צורה פיזיים שונים: מכשירים עם מסך גמיש אחד (חלק) ומכשירים עם שני מסכים (עם תפר, שנקרא גם מכשירים עם מסך כפול).
המכשירים האלה מציבים למפתחים אתגרים והזדמנויות. הם מספקים דרכים נוספות לצפייה בתוכן. לדוגמה, משתמש יכול להחזיק מכשיר בצורה חלקה כמו ספר, ואז לשנות להשתמש בו כמו בטאבלט עם מסך שטוח. למכשירים עם שני מסכים יש חיבור פיזי בין המסכים, שיכול להיות שצריך להביא בחשבון.
ממשקי ה-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, בהתאמה, ברשת הדו-ממדית שנוצרת על ידי תכונות החומרה שמפרידות בין הקטעים.
קטע הקוד הבא הוא דוגמה פשוטה ליצירת חוויית משתמש מפוצלת, שבה יש לנו שני קטעי תוכן (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. אפשר גם להציג את הציר באופן חזותי לפי הצורך.
קישורים רלוונטיים
- Device Posture API
- Viewport segments API