לקראת המחצית השנייה של השנה, זה זמן מעולה לבדוק איך ב-2024 שיפרנו את יכולת הפעולה ההדדית באינטרנט.
איפה התחלנו
בתחילת השנה, ציון התמיכה הניסיוני בדפדפן של Chrome הוא 83.
![לוח הבקרה עם תוצאות הדדיות: 65, חקירות: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.](https://web.dev/static/blog/interop-2024-midyear/image/interop-feb.png?hl=he)
![לוח הבקרה עם תוצאות הדדיות: 75, חקירות: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Safari Technology Preview: 88.](https://web.dev/static/blog/interop-2024-midyear/image/interop-june.png?hl=he)
כיום הציון הוא 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>
מידע נוסף זמין במאמר Popover API נוחת ב-Baseline. הרבה אפליקציות כבר רואה את היתרונות של Popover. ב-Tokopedia הצליחו להפחית משמעותית את כמות קוד התגובה על ידי ניצול התכונה באמצעות polyfill לדפדפנים שאינם תומכים.
מאפיינים מותאמים אישית מתקדמים עם @property
כלל ה-CSS @property
מאפשר ליצור מאפיינים מתקדמים בהתאמה אישית, עם הרבה
מפורטים יותר מאשר השם והערך שזמינים בנכסים מותאמים אישית רגילים.
הגדרת התחביר המותר כדי להגדיר את סוג הנתונים שהנכס הזה מאחסן –
צבע, מספר או אורך. לאחר מכן מגדירים אם הנכס
ירושה, וערך ראשוני.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
הכלל @property
משפר כרגע את הציון הניסיוני של Firefox,
את הציון היציב ביותר כש-Firefox 128 יישלח בהמשך החודש. הוא גם מצטרף
בסיס להשוואה זמין לאחרונה.
מידע נוסף זמין במאמר @property: הענקת כוחות-על למשתני CSS.
הנכס font-size-adjust
מאפיין ה-CSS font-size-adjust
מאפשר לשנות את הגודל של אותיות קטנות.
ביחס לגודל של אותיות רישיות. האפשרות הזו שימושית במצבים
במקומות שבהם עשויה לחול חלופה של גופן, כי זה עוזר להבטיח שגופן חלופי עדיין יתקיים
במיוחד בגופנים בגדלים קטנים.
הנכס font-size-adjust
נכלל כרגע בציון הניסוי
עבור Chrome, אך הוא ישפר את ציון היציבות לאחר ההשקה עם
Chrome 127 החודש. הוא גם מצטרף ל-Baseline Newly Available.
text-wrap: יתרה
השימוש במשתנה text-wrap: balance
מורה לדפדפן לקבוע מהו המאוזן הטוב ביותר
גלישת שורות לטקסט. הוא שימושי במיוחד לכותרות, כדי למנוע
של כותרת שעוטפת למילה אחת בשורה השנייה, לדוגמה.
הבעיה הזו נוספה לאחרונה ב-Safari, ודפדפנים אחרים פועלים כדי לפתור את הבעיה בדיקות שנכשלו כדי להבטיח שהתכונה הזו פועלת כראוי בכל הדפדפנים.
מעבר לכך שהתכונות העיקריות האלו יכולות לפעול באופן הדדי, בוצעו שיפורים. כל בחינה שעוברת מייצגת שלא אמורה להיות בעיה ביכולת הפעולה ההדדית. אנחנו שמחים לראות עד כמה אנחנו קרובים יוכלו להגיע לציון של 100% עד סוף השנה.