אנחנו נכנסים למחצית השנייה של השנה, וזו הזדמנות מצוינת לבדוק איך Interop 2024 שיפרה את יכולת הפעולה ההדדית באינטרנט השנה.
איפה התחלנו
בתחילת השנה, דירוג התמיכה בדפדפנים הניסיוניים של Chrome היה 83.
היום הציון הוא 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>
מידע נוסף זמין במאמר השקת 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.
מידע נוסף זמין במאמר @property: מתן כוחות-על למשתני CSS.
הנכס font-size-adjust
הנכס font-size-adjust
ב-CSS מאפשר לשנות את הגודל של אותיות קטנות ביחס לגודל של אותיות רישיות. האפשרות הזו שימושית במצבים שבהם יכול להיות שיתבצע מעבר לגופן חלופי, כי היא עוזרת לוודא שגם הגופן החלופי יהיה קריא, במיוחד בגדלי גופן קטנים.
המאפיין font-size-adjust
נכלל כרגע בציון הניסיוני של Chrome, אבל הוא יגביר את הציון היציב כשהוא יושק עם Chrome 127 בחודש הזה. הוא גם מצטרף ל-Baseline Newly Available.
text-wrap: balance
השימוש ב-text-wrap: balance
מורה לדפדפן לחשב את הקיפול הטוב ביותר של השורות בטקסט. האפשרות הזו שימושית במיוחד לכותרות, ומונעת, למשל, מצב שבו כותרת מחולקת לשורה אחת עם מילה אחת בלבד.
לאחרונה נוספה תמיכה ב-Safari, ובדפדפנים אחרים פועלים כדי לתקן בדיקות שנכשלו כדי להבטיח שהתכונה הזו תפעל היטב בכל הדפדפנים.
בנוסף לתכונות העיקריות האלה, נוספו שיפורים רבים נוספים. כל בדיקה שעוברת מייצגת בעיה של יכולת פעולה הדדית שלא תתקלו בה. אנחנו סקרנים לראות עד כמה נוכל להתקרב לציון של 100% עד סוף השנה.