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

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

בתחילת השנה, דירוג התמיכה בדפדפנים הניסיוניים של Chrome היה 83.

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

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

חלון קופץ

חלון קופץ הפך לחלק מ-Baseline. האפשרות הזו תהיה זמינה באפריל 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>

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

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

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

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

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

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

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

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

הנכס font-size-adjust

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

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

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

text-wrap: balance

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

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

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Source


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