גישור על הפער

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

Rachel Andrew

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

Flexbox gap

דוגמה למאפיין בעייתי: המאפיין gap מאפשר ליצור פערים בין פריטים ב-grid או ב-flex, או בין עמודות בקונטיינר multicol. הנכס column-gap היה קיים בתצוגת multicol במשך זמן רב, אבל הוא הופיע לראשונה בתצוגת grid בתור 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. אני רוצה שהסטטוס של התכונות יהיה ברור מאוד כשאתם קוראים את התוכן שלנו, ושנספק דרכים מעשיות לפתרון בעיות תמיכה.

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

• מידע על CSS
• מידע נוסף על Forms
• לימוד עיצוב
• מידע על PWA

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

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

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

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

צילום: Cristofer Maximilian.