עדכון לסוף השנה בנושא Compat 2021 – המאמצים לבטל את בעיות התאימות של הדפדפן בחמישה תחומים עיקריים שמתמקדים בהם: CSS Flexbox, CSS Grid, Location: 'דביק', 'יחס גובה-רוחב' ו'טרנספורמציות ב-CSS'.
סוף השנה מתקרב והגיע הזמן לעדכון סופי של Compat 2021 – ניסיון לבטל בעיות תאימות בדפדפנים בחמישה אזורי מיקוד עיקריים.
>90%
ציון בכל הדפדפנים
מאז העדכון האחרון שלנו, המשכנו לראות שיפורים בכל הדפדפנים. כל הדפדפנים התחילו עם ציוני בחינות נמוכים בהרבה בתחילת השנה, אך כעת כל הדפדפנים עברו את 90%! כלומר, פלטפורמת האינטרנט שיפרה משמעותית את יכולת הפעולה ההדדית של חמשת התחומים שבהם מתמקדות הפלטפורמות.
התרומות למנועי דפדפנים מגיעות לא רק מספקי הדפדפנים, אלא גם מגורמים אחרים בקהילת האינטרנט. עבור הפרויקט הזה, אנחנו רוצים להודות במיוחד ל-Igalia על המעורבות שלה ועל המאמץ שהשקעת כדי לשפר את הציונים. Igalia תרמה לשיפור כל חמשת התחומים שבהם היא מתמקדת ב-Comat 2021.
במרכז הבקרה של תוצאות הבדיקות ב-wpt.fyi, יש עכשיו תצוגה מסוננת של תוצאות הבדיקה, שבה מוצגות כל הבדיקות שנכללו ב-Comat 2021, וגם תצוגות של Chrome, Firefox ו-Safari עם השוואה בין התוצאות לעדכון האחרון שביצענו ביולי.
בואו נראה את השיפורים בכל תחום!
שירות CSS Flex
flex-basis: content בדרך לכל הדפדפנים, וההטמעות נעות ב-Chromium וב-WebKit. (הערך content כבר נתמך על ידי Gecko).
ב-Chromium, פתרנו בעיה בגודל של flexbox, בהתאם למפרט ולהתנהגות של שממית. וב-Gecko תוקנו כמה בעיות שמשפיעות על Compat 2021, כולל בעיה עם אחוז גובה של פריטים גמישים. לבסוף, נוספה ב-WebKit תמיכה בערכי מאפיינים נוספים (left, right, self-start, self-end, start, end) והרבה שיפורים כדי למיקום בצורה המוחלטת, וגם לשפר את התוצאות של בדיקת ה-flexbox בשנת 2021.
רשת CSS
השימוש ב-CSS Grid באינטרנט ממשיך לגדול, ואפשר לראות אותו גם באלמנך לשנת 2021 וגם במדדי השימוש של Chrome.
ההשקה של GridNG ב-Chrome וב-Edge 93 פתרה בעיות רבות שנוגעות ל-Grid, וכתוצאה מכך טופלו 38 בעיות מרשימות במעקב הבאגים של Chromium. בשילוב עם שיפורים רבים וקטנים לאחר מכן, הציון ל-Grid ב-Chromium ב-2021 השתפר ב-3% ל-97%. העבודה הזו הונהגה על ידי צוות Edge ב-Microsoft.
באג במיקום המוחלט שמשפיע על Grid תוקן ב-Gecko, ותיקונים רבים הובילו לשיפור ב-WebKit, שהוביל לשיפור של 1% ב-Firefox ושיפור של 3% ב-Safari בבדיקות הרשת.
שירות CSS position: sticky
בעדכון האחרון שלנו, שמנו לב ש-position: sticky היה האזור הראשון שבו כל דפדפן (במקרה הזה Chrome ו-Edge) הגיע ל-100% בדיקות שעברו בהצלחה. עכשיו, בעקבות מספר תיקונים בהטמעה של WebKit, האתר של Safari קיבל ציון של 100% בבדיקות האלה. רוב השיפורים האלה נכללו ב-Safari 15.
נכס CSS aspect-ratio
התמיכה בהגדרת יחס גובה-רוחב (יחס גובה-רוחב) בין דפדפנים השתפרה, השתפרה, והדירוגים של Compat ב-2021 הגיעו ל-99%, ל-97% ול-95% ב-Chrome/Edge, ב-Firefox וב-Safari, בהתאמה. רוב השיפורים לא מתבצעים בנכס aspect-ratio עצמו, אלא באופן שבו המאפיינים width ו-height ממופים לערך ברירת מחדל של aspect-ratio לרכיבים. הפעולה הזו הוטמעה במספר רכיבים ב-WebKit וב-<canvas> ב-Chromium.
המרות CSS
עכשיו יש תמיכה ב-transform: perspective(none) ב-Chromium, ב-Gecko וב-WebKit. כך יהיה קל יותר
להנפיש בין נקודת מבט לבין נקודת מבט ללא נקודת מבט.
ב-Chromium, transform-style: preserve-3d (שמאפשר לאלמנטים צאצאים להשתתף באותה סצנה תלת-ממדית) והמאפיין perspective (שמחיל טרנספורמציה של נקודת מבט על רכיבי צאצא) תואמים עכשיו למפרט בכך שהם חלים רק על רכיבי צאצא.
העלייה הגדולה בציונים של הטרנספורמציות של CSS בכל הדפדפנים נובעת בעיקר משיפורים בחבילת הבדיקות, שבה תוקנו או הוסרו בדיקות שגויות. כך יהיה קל יותר להבין את הבעיות הנותרות ביכולת הפעולה ההדדית ולהימנע מרגרסיות בעתיד.
סיכום
אנחנו אסירי תודה על העבודה שכולם השקיעו לקראת סוף השנה, עם שיפורים רבים בציון ותשתית בדיקות טובה יותר. מפתחי אתרים ביקשו להשתמש בaspect-ratio כבר הרבה זמן, ועכשיו יש תמיכה בכל הדפדפנים. השימוש ב-flexbox, במשבצות וב-position: sticky הולך וגדל, ועכשיו יש תמיכה בתכונות האלה בדפדפנים שונים בזכות שיפורים רבים שבוצעו במהלך 2021.
מה השלב הבא? אנחנו שמחים להמשיך לשתף פעולה עם ספקי דפדפנים אחרים ועם הקהילה הרחבה יותר בפעם הבאה במסגרת המאמץ הזה. התחלנו לחקור ולדון על תחומי ההתמקדות ב-2022. בקרוב נודיע לך על כך.
אם יש לכם משוב או שאלות, אפשר לפנות אלינו ב-Twitter בכתובת @ChromiumDev.