עדכון לאמצע השנה בהשוואה ל-2021: פער גמיש בכל מקום

עדכון לאמצע השנה בנושא Compat 2021 – ניסיון לבטל בעיות תאימות של דפדפנים בחמישה תחומים עיקריים שמתמקדים ב-CSS: flexbox, רשת CSS, מיקום: במיקום קבוע, יחס גובה-רוחב והמרות ב-CSS.

פיליפ יאגנסטדט

מריקו קוסקה

הגיע הזמן לעדכון באמצע השנה בהשוואה ל-Comat 2021, שמטרתו לבטל בעיות תאימות של דפדפנים בחמישה תחומים עיקריים שחשוב להכיר. לפרטים נוספים על פעילות #compat2021 ועל האופן שבו החלטנו על אזורי המיקוד, ראו את ההודעה של חודש מרץ.

שיפורים ב-Chromium שהוזכרו בפוסט הזה יגיעו ל-Chrome, ל-Edge ולכל הדפדפנים המבוססים על Chromium.

איך אנחנו מודדים את ההתקדמות

בלוח הבקרה של Compat 2021 תוכלו לראות את הבדיקות של פלטפורמת האינטרנט כדי לראות את מספר הבדיקות שעברו בהצלחה ואת התרשימים הפופולריים בדפדפנים שונים.

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

שירות CSS Flex

בכל שלושת מנועי הדפדפנים היו שיפורים ב-flexbox.

בגרסה 14.1 של Safari נשלח המאפיין gap של flexbox. המאפיין gap הוא דרך נוחה להגדיר ריווח בין פריטים. משתמשים במאפיין הזה לעיתים קרובות בפריסת רשת, ותמיכה בפריסת flexbox הייתה אחת מהתכונות המבוקשות ביותר בדוח התאימות לדפדפן MDN. במסגרת העדכון הזה, הנכס gap בפריסות גמישות יהיה זמין בכל הדפדפנים המובילים ואתגר התאימות המוביל טופל. Safari 14.1 כלל גם תיקונים רבים לתמונות ב-flexbox, במטרה לבטל את הצורך בפתרונות ישנים לעקיפת הבעיה.

Firefox פתר את עיבוד הטבלאות כפריטים גמישים, וכתוצאה מכך Firefox התקרב ל-100% מבדיקות עבר (כרגע 98.5%).

Chromium תיקן גם טבלאות כפריטים גמישים. ב-Chromium 88 בוצע גם שכתוב של תמונות כפריטים גמישים, במטרה לפתור כמה באגים ישנים. לבסוף, Chromium הוסיף לאחרונה תמיכה במילות מפתח חדשות בהתאמה: start, end, self-start, self-end, left ו-right. אפשר לנסות את מילות המפתח האלה ב-Chrome Canary וב-Edge Canary.

רשת CSS

השימוש ברשת CSS גדל בהתמדה – כרגע הוא עומד על 9% מהצפיות בדפים. כל שלושת מנועי הדפדפנים העיקריים מטמיעים את CSS Grid ועברו כבר יותר מ-89% מהבדיקות הקשורות בפלטפורמת האינטרנט. כדי לתמוך בצמיחה יציבה של התכונה הזו, חשוב לצמצם את פער התאימות.

עד עכשיו בשנת 2021, שיעור הבדיקות העוברות ב-Safari השתפר מ-89% ל-93%, ו-Chromium עובד על ארכיטקטורה חדשה כדי לפתור יותר בעיות ברשת CSS, שנקראת GridNG. הצוות של Microsoft הוא מאמץ שלו, והוא הוביל לעלייה האחרונה מ-94% ל-97% בבדיקות הרשת המטורגטות. בקרוב תוכלו לראות עדכון ב-GridNG בבלוג של Edge.

שירות CSS position: sticky

ב-Chromium, פונקציית position: sticky לכותרות של טבלאות תוקנה בעקבות ההשקה של TablesNG – מאמץ רב-שנתי לבנות מחדש רינדור של טבלאות. השינוי הזה, יחד עם כמה תיקונים סופיים, גרם לערוץ למפתחים של Chrome ו-Edge 93 לעבור 100% מהבדיקות המטורגטות.

אחרי position: sticky, ב-TablesNG טופלו 72 באגים ב-Chromium!

נכס CSS aspect-ratio

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

המאפיין aspect-ratio נתמך עכשיו בגרסאות יציבות של Chrome, Edge ו-Firefox, ובגרסת הבטא של Safari 15. ככל שהתמיכה בדפדפנים השונים משתפרת, כך השימוש גובר.

למרות שאף דפדפן לא מציע 100% בדיקות שעברו בהצלחה, פער התאימות של aspect-ratio הוא הקטן ביותר מתוך חמשת אזורי המיקוד של Compat 2021. הוא כולל יותר מ-90% מהבדיקות שעברו בהצלחה את כל הדפדפנים הנפוצים. לאחר מכן, נמשיך לעקוב אחר ההתקדמות באמצעות חבילת הבדיקה הזו כדי להפוך אותה לתכונה יציבה.

מידע נוסף על השימוש בנכס aspect-ratio באתר web.dev ועל היתרונות שלו.

המרות CSS

חל שיפור איטי וקבוע בתוצאות של הבדיקות המטורגטות של שינויי CSS, הודות לתיקוני הבאגים וגם לשיפורים בבדיקות עצמן.

צוות Chromium פועל גם לשיפור יכולת הפעולה ההדדית של transform-style: preserve-3d ושל transform :perspective(). אנחנו מקווים שנשתף עוד על ההתקדמות בעדכון הבא.

שיפור בציון הכולל

מאז ההכרזה במרץ, כל שלושת מנועי הדפדפנים שיפרו את הציון שלהם במשחקי Compat 2021:

• גרסת Chrome ו-Edge Dev עברו מ-86 ל-92.
• עכשיו יש ב-Firefox מ-83 ל-86.
• הערך של Safari השתנה מ-64 ל-82.

חשוב לציין שהפלטפורמה של Safari הגדילה את פער התאימות ב-18 נקודות, בזכות העבודה הרבה של תורמי התוכן ב-WebKit. באופן ספציפי, הצוות של Igalia תרם לנכס aspect-ratio ושיפורים רבים ב-Flexbox וב-Grid, כמו gap ל-flexbox ותיקוני באגים שונים.

עוקבים אחר ההתקדמות במשחק Compat 2021

כדי לעקוב אחרי ההתקדמות של Compat 2021, אפשר לעקוב אחרי מרכז הבקרה, להירשם לרשימת התפוצה שלנו או לפנות אלינו בכתובת @chromiumdev. אם נתקלתם בבעיות, עליכם לדווח על באג בדפדפן המושפע.