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

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

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.

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

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

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

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

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

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

פורמט Flexbox של CSS

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

תמונה מתוחה של לוח שחמט.
גודל התמונה שגוי בגלל באגים.
לוח שחמט.
תמונה בגודל נכון.
צילום: Alireza מחמודי.

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

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

רשת CSS

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

הדגמת שחמט אנימציה מאת צ'ן הוי ג'ינג.

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

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

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

Chromium עם "TablesNG"
שממית
WebKit

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

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

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

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

שימוש במרווח פנימי עליון
.container {
  width: 100%;
  padding-top: 56.25%;
}
שימוש ביחס גובה-רוחב
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

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

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

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

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

אפקט היפוך הכרטיסים ב-Chromium (בצד שמאל), ב-Gecko (באמצע) וב-WebKit (בצד ימין). הדגמה מאת דייוויד ברון (David Baron) מתוך ניפוי באגים תגובה.

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

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

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

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

מרכז הבקרה של Compat לשנת 2021
מרכז הבקרה של Compat 2021 (צילום המסך צולם ב-16 בנובמבר 2021).

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