עדכון אמצע השנה לעבודה עם יכולת פעולה הדדית 2024

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

איפה התחלנו

בתחילת השנה, ציון התמיכה הניסיוני בדפדפן של Chrome הוא 83.

לוח הבקרה עם תוצאות הדדיות: 65, חקירות: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.
מרכז הבקרה של יכולת פעולה הדדית לשנת 2024 בפברואר 2024.
לוח הבקרה עם תוצאות הדדיות: 75, חקירות: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Safari Technology Preview: 88.
מרכז הבקרה בנושא יכולת פעולה הדדית לשנת 2024 בסוף יוני 2024.

כיום הציון הוא 90, והציון לדפדפנים יציבים הוא 85 נכון Chrome 126 ביוני. הציון הכולל של יכולת הפעולה ההדדית הניסיונית עלה 10 נקודות, והפוסט הזה משתף כמה מהתכונות שתרמו את התוצאה.

חלון קופץ

Popover הפך לחלק מ-Baseline Newly Available באפריל 2024. החלון הקופץ הוא מלהיב כי כל כך הרבה תכונות של ממשק המשתמש שצריך לפתח — לדוגמה, תפריטים, הסברים קצרים, שכבות-על לבחירה ולממשק משתמש להוראה — הם סוגים חלון קופץ. לפני החלון הקופץ, כדי ליצור כל אחת מהתכונות האלה היה צורך לבצע הרבה פעולות מותאמות אישית קוד שי לוודא שמספר רכיבים לא נפתחו בו-זמנית, או כדי להפעיל סגירת אור כשהמשתמש לוחץ מחוץ לאלמנט. ייתכן שיש לך גם היה קשה עם z-index, כדי לוודא שרכיב בממשק המשתמש נשאר מעל שאר התוכן את הממשק.

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

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

תמיכה בדפדפן

  • Chrome: 114.
  • קצה: 114.
  • Firefox: 125.
  • Safari: 17.

מקור

מידע נוסף זמין במאמר Popover API נוחת ב-Baseline. הרבה אפליקציות כבר רואה את היתרונות של Popover. ב-Tokopedia הצליחו להפחית משמעותית את כמות קוד התגובה על ידי ניצול התכונה באמצעות polyfill לדפדפנים שאינם תומכים.

מאפיינים מותאמים אישית מתקדמים עם @property

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

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

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

תמיכה בדפדפן

  • Chrome: 85.
  • קצה: 85.
  • Firefox: 128.
  • Safari: 16.4.

מקור

מידע נוסף זמין במאמר @property: הענקת כוחות-על למשתני CSS.

הנכס font-size-adjust

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

הנכס font-size-adjust נכלל כרגע בציון הניסוי עבור Chrome, אך הוא ישפר את ציון היציבות לאחר ההשקה עם Chrome 127 החודש. הוא גם מצטרף ל-Baseline Newly Available.

תמיכה בדפדפן

  • Chrome: 127.
  • קצה: 127.
  • Firefox: 3.
  • Safari: 16.4.

מקור

text-wrap: יתרה

השימוש במשתנה text-wrap: balance מורה לדפדפן לקבוע מהו המאוזן הטוב ביותר גלישת שורות לטקסט. הוא שימושי במיוחד לכותרות, כדי למנוע של כותרת שעוטפת למילה אחת בשורה השנייה, לדוגמה.

הבעיה הזו נוספה לאחרונה ב-Safari, ודפדפנים אחרים פועלים כדי לפתור את הבעיה בדיקות שנכשלו כדי להבטיח שהתכונה הזו פועלת כראוי בכל הדפדפנים.

תמיכה בדפדפן

  • Chrome: 114.
  • קצה: 114.
  • Firefox: 121.
  • Safari: 17.5.

מקור


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