גישור על הפער

קל יותר לפתח לאינטרנט.

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

Flexbox gap

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

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

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

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

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

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

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

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

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

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

הבעיות

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

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

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

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

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

העברת הודעות

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

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

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

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

תמיכה בדפדפנים

  • Chrome: ‏ 84.
  • Edge: ‏ 84.
  • Firefox: 63.
  • Safari: ‏ 14.1.

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

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

צילום: Cristofer Maximilian.