בפעם הראשונה אי פעם, כל ספקי הדפדפנים המובילים ובעלי עניין אחרים נפגשו כדי לפתור את בעיות התאימות המובילות לדפדפנים שזוהו על ידי מפתחי אתרים. שיתוף הפעולה ההדדית בשנת 2022 ישפר את חוויית הפיתוח באינטרנט ב-15 תחומים עיקריים. במאמר הזה נסביר איך הגענו לכאן, במה הפרויקט מתמקד, איך אפשר למדוד את ההצלחה ואיך אפשר לעקוב אחרי ההתקדמות.
הכול התחיל ב-2019
בשנת 2019, Mozilla, Google וחברות נוספות התחילו מאמץ גדול להבין את נקודות החולשה של המפתחים, באמצעות סקרים להערכת הצרכים של מפתחי MDN, ודוח התאימות לדפדפן שכולל פירוט מעמיק יותר. הדוחות האלה סיפקו לנו מידע מפורט ומעשי כדי להתמודד עם האתגרים העיקריים של מפתחים שמשתמשים בפלטפורמת האינטרנט, והם הובילו למאמץ המשותף בשנת 2021.
בין היתר, שנת 2021 הובילה ליצירת בסיס איתן לפיצ'רים מתקדמים כמו רשת CSS (12% שימוש וצמיחה יציבה) ופורמט CSS גמיש (77% שימוש), כולל הנכס gap ב-flexbox, שפתרנו את נקודת החולשה העיקרית של המפתחים כשהם משתמשים בשיטות פריסה חדשות.
שמחנו להגיע לציון של יותר מ-90% בכל ההטמעה בסוף שנת 2021.
מה זה Interop 2022?
השילוב בין 2022 ל-Interop 2022 הוא נקודת השוואה שעליה הוסכם על ידי נציגים של שלושה הטמעות דפדפנים עיקריות, והיא פותחה בתהליך של מינוי ציבורי ובדיקה עם משוב מתומכים Apple, Bocoup, Google, Igalia, Microsoft ו-Mozilla.
נקודת ההשוואה מתמקדת ב-15 תחומים, שמפתחים זיהו כבעייתיים במיוחד כשהם חסרים או שיש בהם בעיות תאימות בדפדפנים שונים. כל ספקי הדפדפנים הסכימו להתמקד בתחומים אלה, וכל המעורבים שמחים להתחיל בשיפור חוויית הפיתוח עבור האינטרנט.
15 התחומים שמתמקדים
התכונות הבאות יודגשו במהלך שיתוף הפעולה ההדדית ב-2022. הם כוללים 10 אזורים חדשים, ו-5 שהועברו מהתחרות ב-2021. התחומים החדשים מתמקדים:
דרג שכבות
שכבות ברמה נותנות למפתחי אתרים שליטה רבה יותר על המדרגות. הם מספקים דרך לקבץ סלקטורים בשכבות, כל אחת עם ייחודיות משלה. במילים אחרות, אין צורך לבחור בקפידה את הסלקטורים או ליצור סלקטורים ספציפיים מאוד כדי להחליף את כללי ה-CSS הבסיסיים.
מרחבי צבעים ופונקציות צבע של CSS
כדי להשתמש בפונקציות צבע במערכת עיצוב, כרגע צריך להסתמך על ערכי Sass, PostCSS או calc() בערכי HSL. פונקציות צבע מובנות ב-CSS מאפשרות לעדכן את הצבעים באופן דינמי, ומרחבי צבע חדשים מסירים את ההגבלה לסולם ה-sRGB ואת המגבלות התפיסתיות של HSL.
יש שתי פונקציות המוגדרות ברמת צבע 5 של CSS שמאפשרות יצירת עיצוב דינמי יותר בפלטפורמת האינטרנט:
color-mix(): הפונקציה הזו לוקחת שני צבעים ומחזירה את התוצאה של ערבוב שלהם במרחב צבעים מסוים בכמות שצוינה.color-contrast(): בחירה מתוך רשימת צבעים את הצבע עם הניגודיות הגבוהה ביותר לצבע יחיד שצוין.
הפונקציות האלה תומכות במרחבי צבעים מורחבים (LAB, LCH ו-P3), ובנוסף ל-HSL ו-sRGB, ברירת המחדל היא מרחב צבעים אחיד של LCH.
יחידות חדשות של אזור תצוגה
הבעיות בהתמודדות עם הגודל של אזור התצוגה בולטות בדוח התאימות לדפדפן MDN לשנת 2020 וגם בסקר החדש State of CSS 2021. ערכי CSS ויחידות 4 ברמה 4 מוסיפים יחידות חדשות לגדלים הגדולים ביותר, הקטנים ביותר ואלה של אזורי התצוגה הדינמיים, lv*, sv* ו-dv*. ביחידות האלה יהיה קל יותר ליצור פריסות שימלאו את אזור התצוגה הגלוי במכשירים ניידים, תוך התייחסות לסרגל הכתובות.
בנוסף, צוות הספקים שאחראים על פעולות הדדיות לשנת 2022 יעבוד יחד כדי לחקור ולשפר את יכולת הפעולה ההדדית של תכונות המדידה הקיימות באזור התצוגה, כולל היחידה הקיימת של vh.
גלילה
הדוח על סקר גלילה לשנת 2021 מאשר שקשה ליישם את תכונות הגלילה ואת התאימות לגלילה, ושיש לך תחומים רבים לשיפור. נתמקד בהצמדה של גלילה, בהתנהגות הגלילה ובהתנהגות הגלילה כדי לעזור בגלילה להיות עקבית וחלקה יותר בין פלטפורמות שונות.
אנחנו גם בודקים הצעות חדשות לתכונות גלילה.
רשת משנה
הערך subgrid של grid-template-columns ושל grid-template-rows פירושו שפריט רשת שהוחל בו display: grid יכול לרשת את הגדרת הטראק מהחלק של רשת ההורה שמעליו הוא מוצב.
לדוגמה, לשלושת רכיבי הכרטיסים הבאים יש כותרת עליונה וכותרת תחתונה מיושרת לכותרות העליונות והתחתונות הבאות של הכרטיסים, למרות שלכל כרטיס יש רשת עצמאית. התבנית הזו פועלת כי כל כרטיס הוא פריט שמתפרס על פני שלוש שורות ברשת ההורה, ואז משתמש ברשת משנה כדי לרשת את השורות האלה בכרטיס.
גם כלול
- מכלילה ב-CSS (המאפיין
contain) - הרכיב
<dialog> - פקדי טפסים
- טיפוגרפיה וקידודים: כולל
font-variant-alternates,font-variant-position, היחידהicוקידודי טקסט CJK - Web Compat, שמתמקד בהבדלים בין דפדפנים שגרמו לבעיות תאימות באתר שהשפיעו על משתמשי הקצה
התחומים הבאים התקדמו באופן משמעותי בפרויקט Compat 2021, אבל יש עדיין מקום לשיפור. לכן, הן נכללו בפעולות ההדדיות בשנת 2022 כדי שניתן יהיה לטפל בבעיות שנותרו.
- יחס גובה-רוחב
- Flexbox
- מזהה GRid
- מיצוב דביק
- שינויי צורה
מאמצי חקירה
בנוסף ל-15 התחומים שבהם מתמקדים, במהלך שנת 2022, התבצעו שלושה מאמצי חקירה. אלו הם תחומים בעייתיים ודרוש שיפור, אך המצב הנוכחי של המפרטים או של הבדיקות עדיין אינו טוב מספיק כדי לקבל ציון על ההתקדמות באמצעות תוצאות הבדיקה:
- עריכה,
contenteditableוגםexecCommand - אירועים של מצביע ועכבר
- מדידה של אזור התצוגה
ספקי דפדפנים ובעלי עניין אחרים ישתפו פעולה במטרה לשפר את הבדיקות והמפרטים לתחומים אלה, כדי שניתן יהיה לכלול אותם באיטרציות עתידיות של מאמץ זה.
מדידת הצלחה ומעקב אחר ההתקדמות
מרכז הבקרה לבדיקות באמצעות פלטפורמת אינטרנט הקיים ישמש למעקב אחר ההתקדמות ב-15 אזורי המיקוד. עבור כל תחום זוהו מספר בדיקות. לאחר מכן, הדפדפנים מדורגים בהשוואה לבחינות האלה, וכך הם נותנים ציון לכל אזור וציון כולל לכל 15 התחומים.
כדי לעקוב אחרי ההתקדמות, כדאי לבקר במרכז הבקרה של יכולת הפעולה ההדדית לשנת 2022. במהלך השנה תוכלו לראות את ההתקדמות של הפלטפורמה ולראות איך היא משתפרת.
מה המשמעות מבחינת המפתחים?
המטרה של המאמצים האלה ליכולת פעולה הדדית רב-שנתית, כמו 'תחרות בין 2021', 'שיתוף וסנכרון 2022' ועוד, היא להכיר היטב את הבעיות שמפתחים חווים במשך שנים רבות ולטפל בהן. וזה לא מאמץ של דפדפן יחיד אלא שיתוף פעולה חזק בין כל ספקי הדפדפנים המובילים והחברים כדי לשפר את פלטפורמת האינטרנט בכל התחומים.
בעיקרון, המטרה היא להפוך את פלטפורמת האינטרנט לשמישה ואמינה יותר למפתחים, כדי שיוכלו להקדיש יותר זמן לבניית חוויות אינטרנט נהדרות במקום להתמודד עם חוסר עקביות בדפדפן.
דעתכם חשובה לנו
אם יש לך משוב על השיפורים שבוצעו במהלך התחרות לשנת 2021, או על תכונות הכלולות ב-Interop 2022, נשמח לשמוע ממך. אילו מהתכונות הבאות הכי יעזרו בעבודה שלך? ממה אתם ממש מתרגשים? בעיות בקבצים במאגר GitHub או דווחו לנו על כך ב-Twitter.
מידע נוסף על פעולות הדדיות לשנת 2022 זמין כאן: