תחרות לשנת 2021: ביטול חמש הבעיות העיקריות שקשורות לתאימות באינטרנט

Google עובדת עם ספקי דפדפנים אחרים ושותפים מהתחום כדי לפתור את חמש הבעיות העיקריות שקשורות לתאימות דפדפנים למפתחי אתרים: Flexbox של CSS, רשת CSS, position: sticky, aspect-ratio והמרות ב-CSS.

Philip Jägenstedt

Robert Nyman

Google עובדת עם ספקי דפדפנים ושותפים אחרים מהתחום כדי לתקן את חמש הבעיות העיקריות שקשורות לתאימות דפדפנים למפתחי אתרים. תחומי המיקוד הם Flexbox , CSS Grid , position: sticky , aspect-ratio ו-CSS מבצעת טרנספורמציה. כדאי לקרוא את המאמר איך אפשר להוסיף תוכן ולעקוב אחריו כדי תוכלו ללמוד איך להיות מעורבים.

רקע

תאימות באינטרנט תמיד הייתה אתגר גדול עבור מפתחים. ב בשנים האחרונות, Google ושותפים אחרים, כולל Mozilla Microsoft, החליטה לקבל מידע נוסף על הבעיות הנפוצות ביותר באינטרנט מפתחים שונים כדי לעודד את העבודה שלנו ואת תעדוף העבודה שלנו לשיפור המצב. הפרויקט הזה מקושר למפתח של Google שביעות רצון (DevSAT) התחיל בקנה מידה גדול יותר באמצעות יצירת סקרים לגבי MDN (MDN) כדי להעריך את צורכי המפתחים בשנים 2019 ו-2020, ומאמץ מחקר מעמיק שהוצגו MDN דוח תאימות לדפדפן לשנת 2020. עשינו מחקרים נוספים במספר ערוצים, כגון State of CSS ומצב JS סקרים.

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

לבחור במה להתמקד

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

בפרויקט התאימות נעשה שימוש במספר קריטריונים שמשפיעים על אילו תחומים לפי סדר עדיפויות, וחלקם:

• שימוש בתכונות. לדוגמה, נעשה שימוש ב-Flexbox 75% מכל הצפיות בדפים, ואימוץ השימוש גדל בצורה משמעותית ב-HTTP העברה לארכיון.
• מספר הבאגים (ב-Chromium, שממית, WebKit), וב-Chromium, כמה כוכבים קיבלו שיש.

• תוצאות הסקר:

  • סקרים של MDN
  • דוח תאימות של דפדפן MDN
  • מדינת ה-CSS התכונות המוכרות והנפוצות ביותר

• תוצאות הבדיקה מ-web-platform-tests לדוגמה, Flexbox מופעל wpt.fyi.

• אפשר להשתמש בתכונות שחיפשתם הכי הרבה פעמים.

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

בשנת 2020, Chromium התחיל לטפל בתחומים העיקריים שמפורטים שיפור תאימות הדפדפנים של Chromium ב-2020. בשנת 2021 אנחנו מתחילים במאמץ גדול יותר. Google וגם אנחנו ב-Microsoft עובדים יחד על טיפול בבעיות הכי נפוצות ב-Chromium, יחד עם Igalia. איגליה, שהיא תורמי תוכן באופן קבוע ל-Chromium ול-WebKit, ולמנהלים של יציאת ה-WebKit הרשמית למכשירים מוטמעים, תמכו מאוד והיו מעורבים במאמצי תאימות כאלה, עוזרים להתמודד עם הבעיות שזוהו ולעקוב אחריהן.

אלה התחומים שמחויבים לתקן בשנת 2021.

פורמט Flexbox של CSS

Flexbox בשירות CSS תואם לערך בשימוש נרחב באינטרנט, ועדיין יש כמה אתגרים גדולים למפתחים. לדוגמה, גם Chromium וגם WebKit היו בעיות עם קונטיינרים גמישים של auto-height שהובילו לתמונות בגודל שגוי.

Igalia's Flexbox Cats בפוסט בבלוג אפשר להתעמק בבעיות האלה עם הרבה דוגמאות נוספות.

למה הוא מקבל עדיפות

• סקרים: הבעיה המובילה ב דוח התאימות של דפדפן MDN, המוכרים ביותר ומשמשים במדינת המחוז שירות CSS
• בדיקות: 85% עוברים בכל הדפדפנים
• שימוש: 75% מהצפיות בדפים, בעלי עלייה משמעותית ב-HTTP העברה לארכיון

רשת CSS

רשת CSS היא אבן בניין גדולה לפריסות אינטרנט מודרניות, שמחליפה הרבה שיטות ישנות ופתרונות אפשריים. ככל שהאימוץ הולך וגדל, הוא צריך להיות יציב כמו סלע, הבדלים בין דפדפנים אף פעם לא מהווים סיבה להימנע מכך. באזור אחד חוסר יכולת ליצור אנימציה של פריסות רשת, שנתמכות ב-Gecko Chromium או WebKit. כשיש תמיכה, אפקטים כאלה יכולים להיות:

למה הוא מקבל עדיפות

• סקרים: במקום השני ב- דוח התאימות של דפדפן MDN, ידוע אבל נפוץ פחות ב שירות CSS
• בדיקות: 75% עוברים בכל הדפדפנים
• שימוש: 8% בצמיחה יציבה, צמיחה קלה ב-HTTP העברה לארכיון

מיקום ה-CSS: במיקום קבוע

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

כדאי לבדוק את הכותרות של טבלאות במיקום קבוע ההדגמה מאת רוב פלאק.

למה הוא מקבל עדיפות

• סקרים: מוכרים ברמה גבוהה או נמצאים בשימוש נרחב במדינת המחוז (State of) שירות CSS והנושא הועלה כמה פעמים דוח תאימות של דפדפן MDN
• מבחנים: ציון עובר של 66% בכל הדפדפנים
• שימוש: 8%

מאפיין יחס גובה-רוחב של CSS

הגרסה החדשה aspect-ratio מאפיין CSS מאפשר לשמור בקלות על יחס גובה-רוחב עקבי וכך להסיר את הצורך פריצה padding-top:

.container {
  width: 100%;
  padding-top: 56.25%;
}

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

מאחר שמדובר בתרחיש כל כך נפוץ, אנחנו צופים שהוא יהפוך להיות בשימוש נרחב, אנחנו רוצים לוודא שהוא יציב בכל התרחישים הנפוצים ובכל הדפדפנים.

למה הוא מקבל עדיפות

• סקרים: החברה כבר ידועה, אבל עדיין לא נמצאת בשימוש נרחב במדינת המחוז (State of) שירות CSS
• מבחנים: מעבר של 27% בכל הדפדפנים
• שימוש: 3% וגם צפויה עלייה

המרות בשירות CSS

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

למה הוא מקבל עדיפות

• סקרים: מוכרים מאוד ומשתמשים בהם במדינת המחוז (State of) שירות CSS
• מבחנים: מעבר של 55% בכל הבדיקות דפדפנים
• שימוש: 80%

איך אפשר להוסיף תוכן ולעקוב אחרי הפעילות

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

יהיו עדכונים שוטפים לגבי ההתקדמות כאן ב-web.dev, ותהיה לך אפשרות לעקוב גם אחרי ההתקדמות בכל אחד מהתחומים האלה בדוח Compat 2021 מרכז השליטה.

אנחנו מקווים שהמאמץ המבוצע בקרב ספקי הדפדפנים ישפר את האמינות בעזרת יכולת פעולה הדדית תעזור לכם לבנות דברים מדהימים באינטרנט!