אנחנו משיקים את TablesNG ב-Chromium 91 ומתקנת הרבה באגים שהיו חלק מפלטפורמת האינטרנט כבר שנים רבות. העדכונים האלה ישפרו את תאימות הדפדפן כחלק ממאמץ #Compat2021, וישפרו את השימוש בטבלאות בפלטפורמת האינטרנט באופן כללי. חלק מהבעיות שמסומנות בכוכב: position:
sticky בשורות, גיאומטריה של פיקסלים משניים וכיווץ גבולות תקין.
מאמץ TablesNG
ב-TableG הוא פרויקט רב-שנתי של הפיתוח של Chrome, בהובלת Aleks Totic, כדי לתכנן מחדש לגמרי את אופן העיבוד של טבלאות באינטרנט. טבלאות הן תחום חיכוך מיוחד בפיתוח אתרים, בין היתר בגלל ההיסטוריה שלהן.
טבלאות נוספו ל-HTML ב-1994 שימשו כשיטה הראשית ליצירת פריסות דפים מורכבות במשך שנים רבות. עדיין אפשר למצוא אותם בכל רחבי האינטרנט,
אם כי השימוש המודרני הוא בדרך כלל להצגת נתונים בטבלאות.
עם זאת, יש הבדלים גדולים בהתנהגות של טבלאות בדפדפנים שונים, והרבה מהם נבעו מכך שמפרט הטבלאות לא שלם ומחסור בפרטים.
הוא יושם גם בדפדפנים לפני הרבה תכונות של CSS: מצבי כתיבה אורתוגונליים, position:relative, box-sizing, קונטיינרים של flexbox ועוד. לכן התמיכה ברבות מהתכונות האלה לא הייתה עקבית.
המפרט החדש, CSS Table Module Level 3, נכתב אחרי שהטבלאות הוטמעו מחדש ב-Edge בשנת 2018. מטרתו של TablesNG היא לא רק להתאים למפרט החדש, אלא גם לתקן הרבה חוסר עקביות בטבלאות לאורך הדרך. הנה כמה מהשינויים הבולטים ביותר בכך:
- הפעלת מיקום במיקום קבוע בשורות בטבלאות ארוכות שיש לגלול.
- תיקון יישור עם גיאומטריה של תת-פיקסלים וגבולות טבלה.
- שיפור בצביעה של רקעים וגבולות.
position: sticky בשורות
אחת השאלות הכי נפוצות, והדברים הכי מתסכלים שקשורים לעיצוב טבלאות בתקופה הקודמת, הייתה חוסר תמיכה ב-position: sticky בשורות. התכונה הזו מאפשרת לכותרת של טבלה להישאר בדף בזמן הגלילה, ומספקת הקשר לטבלאות נתונים ארוכות. כשגוללים את הכותרת מחוץ לתצוגה ומסתכלים בטבלה מלאה במספרים, קל לשכוח מה המשמעות של המספרים האלה.
position: sticky היא על <thead>.הבאג הזה קיים אצלנו הרבה זמן בגלל הסיבה ש-position: sticky צוין זמן רב אחרי שטבלאות ה-HTML פורסמו. לפני התיקון, כותרות עם position: sticky מיועד הומרו ל- position: static, אבל עכשיו אפשר להשתמש ב-position: sticky בכל מקום בטבלאות: בכותרות (<thead>) או בתוויות של צירים אנכיים.
שיפור ציור הגבולות וציור הרקע
אחד מbugs הישנים ביותר בטבלאות הוא אחד מספטמבר 2008. היא הוגשה כמעט מיד עם ההשקה של Chrome, ואי אפשר היה לתקן אותה בגלל ארכיטקטורת הטבלאות הישנה. הבעיה קשורה לציור בטבלה ולגבולות מכווצים.
אופן הצביעה של הטבלאות, לפי הסדר של z-index, הוא: תאים > שורות > קטעים > טבלאות. לאחר מכן, הן נצבעות לפי הסדר שבו הן מופיעות ב-DOM (Document Object Model), למרות שהתאים עצמם מופיעים בסדר DOM הפוך, כאשר התא הראשון בטבלה הוא העליון.
הבעיה כאן היא שהגבולות שייכים לטבלה, ולא לתא, בדרך הקודמת שבה נצבעו טבלאות. גבולות מכווצים ייצבעו כשהטבלה צבועה את החזית שלה. כלומר, לתא אחד בטבלה לא יכולים להיות מספר גבולות:
בדוגמה שלמעלה, ניתן לראות שהתא הכחול השמאלי ביותר צבוע בטעות מעל התא הכתום בפינה הימנית התחתונה, כי לא יכול להיות לו גבולות מרובים. פתרתי את הבעיה הזו בתהליך התכנון מחדש, ותא הגבול הכתום מופיע בצבע כחול על גבי הפער הכחול, כך שבפער בטבלה השנייה יופיעו גם קווי גבול כחולים וכתומים.
הבאג הזה תוקן עכשיו ב-Chromium וב-Firefox.
גיאומטריה של תת-פיקסלים (יישור טבלה)
יישור הפיקסלים בטבלאות הוא בעיה נוספת ביכולת הפעולה ההדדית שתוקנה עם TablesNG. בעבר, המנוע הישן תמיד עיגל את ערכי הגרפיקה לפיקסל. כלומר, כשמגדילים או מקטינים את הדף, דברים זזים וכתוצאה מכך יש בעיות ביישור. בעיות ההתאמה האלה מתוקנות ב- TablesNG.
עיצוב מחדש של האינטרנט
צוות Chrome הציג תכונות חדשות לא רק כדי לשפר את היכולות של כתיבת אתרי אינטרנט, אלא גם עבד קשה כדי לשפר את ממשקי ה-API הקיימים ואת התאימות שלהם. למעשה, TablesNG הוא רק אחד מפרויקטים רבים של ארכיטקטורה מחדש שהצוות הזה לקח על עצמו בשמונה השנים האחרונות. אחרים, אבל לא את כל הפרויקטים, כוללים:
- LayoutNG: שכתוב בסיסי של כל האלגוריתמים של הפריסה, לשיפור האמינות והביצועים הצפויים.
- BlinkNG: ניקוי שיטתי ועיבוד מחדש של מנוע העיבוד של Blink לשלבי צינור מופרדים נקיים. כך אפשר לשמור טוב יותר במטמון, לשפר את האמינות ואת התכונות של התחברות מחדש או עיבוד מושהה, כמו חשיפה לתוכן ושאילתות בקונטיינר.
- GPU Raster Everywhere: מאמץ ארוך טווח להשקת יצירת רסטר של GPU בכל הפלטפורמות, ככל האפשר.
- גלילה והנפשות בשרשור: מאמץ ארוך-טווח להעביר את כל האנימציות של הגלילה והאנימציות שאינן פריסה לשרשור של הקומפוזיטור.
כדאי לעקוב אחרי העדכונים לגבי השיפורים האלה ועוד.