Google עובדת בשיתוף עם ספקי דפדפנים אחרים ושותפים מהתחום כדי לתקן את חמש הבעיות העיקריות בתאימות דפדפנים למפתחי אתרים: CSS flexbox, רשת CSS, רשת CSS, position: sticky, aspect-ratio והמרות CSS.
Google עובדת בשיתוף עם ספקי דפדפנים אחרים ושותפים אחרים מהתחום כדי לתקן את חמש הבעיות העיקריות בתאימות דפדפנים למפתחי אתרים. תחומי ההתמקדות הם CSS flexbox, רשת CSS, position: sticky, aspect-ratio והמרות CSS. קראו את המאמר איך תוכלו לתרום תוכן ולעקוב אחריו כדי ללמוד איך להיות מעורבים.
רקע
תאימות באינטרנט תמיד הייתה אתגר גדול למפתחים. בשנים האחרונות, Google ושותפים אחרים, כולל Mozilla ו-Microsoft, בחרו ללמוד עוד על הבעיות שהכי מדאיגות מפתחי אתרים, כדי לקדם את העבודה ולהעניק סדרי עדיפויות לשיפור המצב. הפרויקט הזה קשור לפרויקט שביעות רצון המפתחים של Google (DevSAT), והוא התחיל בקנה מידה גדול יותר עם יצירת סקרי MDN DNA (Developer Demand Assessment) בשנים 2019 ו-2020, ומחקר מעמיק שהוצג בדוח התאימות של דפדפן MDN לשנת 2020. ביצענו מחקר נוסף בערוצים שונים, כמו הסקרים State of CSS ו-State of JS.
המטרה של שנת 2021 היא להסיר בעיות תאימות של דפדפנים בחמישה תחומים עיקריים כדי שהמפתחים יוכלו להסתמך עליהם בראש שקט. הפעולה הזו נקראת #Compat 2021.
לבחור במה להתמקד
אומנם יש בעיות תאימות לדפדפנים בכל פלטפורמת האינטרנט, אבל הפרויקט הזה מתמקד במספר קטן של התחומים הכי בעייתיים שאפשר לשפר באופן משמעותי, וכך אנחנו מסירים אותם כבעיות עיקריות של המפתחים.
בפרויקט התאימות יש מספר קריטריונים שמשפיעים על התחומים לתת עדיפות, וחלקם:
- שימוש בתכונות. לדוגמה, flexbox נמצאות בשימוש ב-75% מכל הצפיות בדפים, וההטמעה הולכת וגדלה ב-HTTP Archive.
- מספר הבאגים (ב-Chromium, Gecko, WebKit) וב-Chromium, כמה כוכבים קיבלו הבאגים האלה.
תוצאות הסקר:
- סקרים לגבי DNA ב-MDN
- דוח התאימות לדפדפן MDN
- מדינת ה-CSS התכונות המוכרות והנפוצות ביותר
תוצאות הבדיקה מ-web-platform-tests. לדוגמה, flexbox on wpt.fyi.
האם אפשר להשתמש בתכונות של החיפושים הנפוצים ביותר.
חמשת התחומים הפופולריים ביותר בשנת 2021
ב-2020, Chromium התחיל לטפל באזורים המובילים שמפורטים במאמר שיפור התאימות של הדפדפנים של Chromium בשנת 2020. בשנת 2021 אנחנו מתחילים במאמצים מתקדמים עוד יותר. Google ו-Microsoft עובדות יחד על טיפול בבעיות מובילות ב-Chromium, בשיתוף עם Igalia. Igalia היא תורמי תוכן קבועים ב-Chromium וב-WebKit ומתחזקת את יציאת WebKit הרשמית למכשירים מוטמעים. החברה מאוד תומכת במאמצי התאימות האלה ומסייעת להם בהתמודדות עם הבעיות שזוהו ולעקוב אחריהן.
אלה התחומים שאנחנו מחויבים לתקן בשנת 2021.
שירות CSS Flex
CSS flexbox נמצא בשימוש רחב באינטרנט, ועדיין יש כמה אתגרים גדולים למפתחים. לדוגמה, גם ב-Chromium וגם ב-WebKit היו בעיות עם קונטיינרים גמישים של auto-height, שהובילו לתמונות בגודל שגוי.
צילום: אלירזה מחמודי.
בפוסט בבלוג flexbox Cats של Igalia תמצאו פירוט של הבעיות האלה, עם הרבה דוגמאות נוספות.
למה התוכן הזה בעדיפות גבוהה
- סקרים: הבעיה העיקרית בדוח התאימות לדפדפן MDN, המוכרת ביותר ונמצאת בשימוש במצב ה-CSS
- מבחנים: מעבר של 85% בכל הדפדפנים
- שימוש: 75% מהצפיות בדפים, גידול משמעותי ב-HTTP Archive
רשת CSS
CSS Grid הוא אבן בניין מרכזית בפריסות אינטרנט מודרניות, שמחליף הרבה שיטות ישנות ופתרונות עקיפים. ככל שהאימוץ הולך וגדל, הוא צריך להיות יציב, כך שהבדלים בין דפדפנים הם אף פעם לא סיבה להימנע מכך. אחד התחומים שחסר הוא היכולת ליצור אנימציה של פריסות רשת שנתמכות ב-Gecko, אבל לא ב-Chromium או ב-WebKit. כשיש תמיכה באפקטים כאלה, אפשר:
למה התוכן הזה בעדיפות גבוהה
- סקרים: המקום השני בדוח התאימות של דפדפן MDN, מוכר, אבל נמצא בשימוש מועט במצב ה-CSS
- בדיקות: 75% מעבר בכל הדפדפנים
- שימוש: 8% והעלייה יציבה, צמיחה קלה ב-HTTP Archive
מיקום ה-CSS: במיקום קבוע
מיקום דביק מאפשר לתוכן להידבק לקצה של אזור התצוגה, ומשמש בדרך כלל לכותרות שתמיד מופיעות בחלק העליון של אזור התצוגה. למרות שהוא נתמך בכל הדפדפנים, יש תרחישים נפוצים שבהם הוא לא פועל כמצופה. לדוגמה, ב-Chromium אין תמיכה בכותרות של טבלאות במיקום קבוע, ולמרות שעכשיו נתמכות מאחורי דגל, התוצאות לא עקביות בין הדפדפנים:
צפו בהדגמה של כותרות טבלאות דביקות מאת רוב פלאק.
למה התוכן הזה בעדיפות גבוהה
- סקרים: מוכר/משמש מאוד במצב CSS והוצג מספר פעמים בדוח התאימות לדפדפן MDN
- מבחנים: 66% עוברים בכל הדפדפנים
- שימוש: 8%
נכס יחס גובה-רוחב ב-CSS
בעזרת מאפיין ה-CSS החדש aspect-ratio אפשר לשמור בקלות על יחס גובה-רוחב עקבי בין אלמנטים, וכך לבטל את הצורך בפריצה המוכרת padding-top:
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
מכיוון שזה תרחיש נפוץ מאוד, אנחנו מצפים שהוא יהיה בשימוש נרחב, ואנחנו רוצים לוודא שהוא פועל בכל התרחישים הנפוצים ובכל הדפדפנים.
למה התוכן הזה בעדיפות גבוהה
- Surveys: המוצר כבר מוכר, אבל עדיין לא נמצא בשימוש נרחב במדינת ה-CSS
- בדיקות: 27% עוברים בכל הדפדפנים
- שימוש: 3% וצפוי לגדול
המרות CSS
טרנספורמציות CSS נתמכות בכל הדפדפנים כבר הרבה שנים, והן בשימוש נרחב באינטרנט. עם זאת, עדיין יש הרבה אזורים שבהם הם לא פועלים באותו דפדפנים, בעיקר באנימציות והמרות בתלת-ממד. לדוגמה, אפקט של היפוך כרטיסים עשוי להיות לא עקבי בדפדפנים שונים:
למה התוכן הזה בעדיפות גבוהה
- Surveys: מוכר מאוד ונמצא בשימוש ב-State of CSS
- בדיקות: 55% מעבר בכל הדפדפנים
- שימוש: 80%
איך אפשר לתרום תוכן ולעקוב אחריו
עוקבים ומשתפים עדכונים שאנחנו מפרסמים ב-@ChromiumDev או ברשימת התפוצה הציבורית, Compat 2021. כדאי לוודא שיש באגים או לדווח עליהם על בעיות שנתקלתם בהן, ואם חסר משהו, כדאי לפנות אלינו דרך הערוצים שמפורטים למעלה.
העדכונים שוטפים לגבי ההתקדמות יופיעו כאן ב-web.dev, ותוכלו גם לעקוב אחרי ההתקדמות בכל אזור מיקוד בלוח הבקרה של התאימות לשנת 2021.
אנחנו מקווים שהמאמץ המרוכז הזה בקרב ספקי דפדפנים לשפר את האמינות ואת יכולת הפעולה ההדדית יעזור לכם לפתח דברים מדהימים באינטרנט!