גישור על הפער

מקלים על הבנייה עבור האינטרנט.

רייצ'ל אנדרו

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

פער Flexbox

כדוגמה לנכס בעייתי, המאפיין gap מאפשר ליצור פערים בין פריטי רשת או גמישים, או עמודות בקונטיינר מגוון. יש לנו column-gap במספר עמודות כבר הרבה זמן, אבל הנכס הופיע לראשונה בפריסת רשת בתור grid-gap, יחד עם grid-column-gap ו-grid-row-gap.

ממש אחרי שפריסת הרשת נחתה בדפדפנים, שם הנכס השתנה ל-gap, וגם ל-row-gap ול-column-gap. לאחר מכן הוא צוין שהוא יפעל גם בפריסה גמישה. המשמעות של שינוי השם היא שאין לנו כמה נכסים שפועלים באותו אופן.

.box {
  display: flex;
  gap: 1em;
}

באוקטובר 2018, Firefox שלח את הנכס לפריסות גמישות. היא לא הופיעה ב-Chrome עד יולי 2020, ואחריה Safari באפריל 2021. כתוצאה מכך, פער לפני שנתיים ושישה חודשים עד שנוכל להשתמש ב-gap בבטחה. בפועל, לרוב המפתחים זמן ההמתנה היה הרבה יותר ארוך כי הם היו צריכים לתמוך בגרסאות דפדפן ישנות יותר מהגרסה האחרונה. התמיכה ב-gap בפריסה גמישה הייתה בעייתית יותר כי אנחנו לא יכולים להשתמש בשאילתות של תכונות כדי לזהות תמיכה בפערים בפריסה הגמישה. מאחר שהמאפיין gap נתמך ברשת, הפונקציה @supports (gap:1em) תחזיר את הערך true.

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

למה יש פערי תמיכה?

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

את רוב התכונות ייצרו אב-טיפוס בדפדפן אחד. לדוגמה, המפרט של פריסת הרשת נוצר לראשונה על ידי Microsoft והושם בגרסה ראשונית ב-Internet Explorer 10. מהנדס ב-Mozilla עשה עבודה רבה כדי להבין כיצד רשת המשנה צריכה להתנהג, ולכן התכונה הזו נחתה ראשונה ב-Firefox. ראינו ש-Safari מוביל את התהליך בכמה פונקציות צבע חדשות ומלהיבות.

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

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

הבעיות

יש לנו כאן שתי בעיות. הראשונה היא הבעיה של יכולת הפעולה ההדדית – העובדה שיכול לעבור זמן רב מהנקודה שבה תכונה נוחתת בדפדפן ועד שהיא זמינה בכל מקום.

ההבדל השני הוא בעיה בהעברת הודעות. איך אפשר להבהיר איפה נמצאים פערי התמיכה? איך אנחנו משתפים תכונות חדשות מבלי לגרום לכולם לחקור בקפידה כל דבר כדי להבין עד כמה הוא נתמך?

יכולת פעולה הדדית

דפדפנים כבר עובדים יחד כדי לפתור את הבעיה של יכולת הפעולה ההדדית. בשנה שעברה, בעזרת התחרות לשנת 2021 אפשר לצמצם את פער התמיכה במספר פיצ'רים, כולל נכס הפער בפריסה גמישה. השנה, המאמצים של שיתוף הפעולה 2022 מתמקדים ב-15 תכונות, וכבר הייתה תנועה בחלק מהן.

אפשר לעקוב אחרי ההתקדמות במרכז הבקרה של Interop 2022.

העברת הודעות

הבעיה השנייה היא שאשמח לעזור בקשר לתכונות כאן, באתר web.dev וב-developer.chrome.com. חשוב לי שהסטטוס של התכונות יהיה ברור כשקוראים את התוכן שלנו, וכדי שנוכל לספק דרכים מעשיות להתגבר על בעיות תמיכה.

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

• מידע על שירות CSS
• ללמוד טפסים
• ללמוד עיצוב
• מידע על PWA

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

אנחנו גם תורמים לפתיחה של תיעוד באינטרנט באמצעות התמיכה שלנו בפרויקט Open Web Docs. כך מובטח שיש לנו תיעוד מהשורה הראשונה ב-MDN, יחד עם נתוני תאימות לדפדפנים עדכניים. אנחנו משתמשים בנתונים האלה כאן באתר web.dev כדי להציג תמיכה בתכונות. זו התמיכה הנוכחית של gap בפריסה גמישה.

אם תרצו לקבל מידע נוסף על החזון של Chrome לאינטרנט, לגבי הדברים שאנחנו מתנסים בניסויים של המקור והמפתחים, יהיה לכם יותר ויותר תוכן למצוא אותו באתר האח שלנו – developer.chrome.com. ייתכן שהתוכן הזה ניסיוני או נתמך כרגע ב-Chrome בלבד, אבל נשמח אם תוכלו לעיין בו ולהציע משוב.

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

צילום: כריסטופר מקסימיליאן.