TablesNG יושקו ב-Chromium 91, ויטפלו במספר רב של באגים שהיו חלק מפלטפורמת האינטרנט במשך שנים. העדכונים האלה ישפרו את תאימות הדפדפנים במסגרת המאמץ #Compat2021, וישפרו את השימוש בטבלאות בפלטפורמת האינטרנט באופן כללי. חלק מהבעיות שהכי הרבה משתמשים הוסיפו להן כוכב כוללות את הנושאים הבאים: position:
sticky בשורות, גיאומטריה ברמת הפיקסל וכיווץ של גבולות.
המאמץ של TablesNG
TablesNG הוא מאמץ שנמשך כמה שנים, בראשות המפתח של Chrome, אלכס טוטיק (Aleks Totic), שמטרתו לשנות לחלוטין את הארכיטקטורה של עיבוד הטבלאות באינטרנט. טבלאות הן אזור עימות ספציפי בפיתוח אינטרנט, בין היתר בגלל ההיסטוריה שלהן.
ב-1994 נוספו טבלאות ל-HTML, ובמשך שנים רבות שימשו כהשיטה הראשית ליצירת פריסות דפים מורכבות. עדיין אפשר למצוא אותם ברחבי האינטרנט, אבל בדרך כלל משתמשים בהם כדי להציג נתונים בטבלאות.
עם זאת, יש הבדלים משמעותיים בהתנהגות הטבלה בדפדפנים שונים, ורבים מהם נובעים מכך שמפרט הטבלאות חלקי וחסר פירוט.
טבלאות יושמו בדפדפנים גם לפני תכונות 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>) או בתוויות של ציר אנכי.
שיפור בציור של גבולות ובציור של רקעים
אחד מהבאגים העתיקים ביותר בטבלאות התגלה בספטמבר 2008. הבקשה הוגשה כמעט מיד אחרי השקת Chrome, אבל לא הצלחנו לתקן אותה בגלל ארכיטקטורת הטבלה הישנה. הבעיה כוללת ציור טבלה וגבולות מכווצים.
אופן הציור של הטבלאות, לפי הסדר של z-index, הוא: תאים > שורות > קטעים > טבלאות. לאחר מכן, התאים צבועים לפי הסדר שבו הם מופיעים ב-DOM (Document Object Model), אבל התאים עצמם מסודרים בסדר הפוך של DOM, כאשר התא הראשון בטבלה הוא התא העליון.
הבעיה כאן היא שהגבולות שייכים לטבלה, ולא לתא, בשיטה הקודמת שבה הטבלאות נצבעו. גבולות מכווצים נצבעים כשהטבלה מציירת את החזית שלה. כלומר, לא ניתן להוסיף כמה שורות גבול לתא אחד בטבלה:
בדוגמה שלמעלה, אפשר לראות שהתא הכחול הימני ביותר צויר בצורה שגויה מעל התא הכתום בפינה השמאלית התחתונה, כי לא יכולות להיות לו כמה שורות גבול. בהטמעה עם הארכיטקטורה החדשה, הבעיה הזו נפתרה, ותא הגבול הכתום מצויר בצורה נכונה מעל התא הכחול, כך שבמרווח השני בטבלה יש קווים כחולים וכתומים.
הבאג הזה תוקן עכשיו ב-Chromium וב-Firefox.
גיאומטריה של פיקסלים משניים (יישור טבלה)
התאמת פיקסלים בטבלאות היא בעיה נוספת של יכולת פעולה הדדית, ותוקנה ב-TablesNG. בעבר, המנוע הקודם תמיד עגל את ערכי הגרפיקה לפי הפיקסל. כלומר, כשהגדלתם או הקטנתם את התצוגה של הדף, הדברים זזו, וכתוצאה מכך היו בעיות ביישור. ב-TablesNG מתוקנות בעיות ההתאמה האלה.
תכנון מחדש של האינטרנט
צוות Chrome לא רק הוסיף תכונות חדשות כדי לשפר את הכתיבה באינטרנט, אלא גם עבד קשה כדי לשפר את ממשקי ה-API הקיימים ואת התאימות שלהם. למעשה, TablesNG הוא רק אחד מפרויקטים רבים של ארכיטקטורה מחדש שהצוות הזה לקח על עצמו בשמונה השנים האחרונות. פרויקטים נוספים, אבל לא כולם, כוללים:
- LayoutNG: כתיבה מחדש של כל אלגוריתמי הפריסה, כדי לשפר את האמינות ולאפשר חיזוי טוב יותר של הביצועים.
- BlinkNG: ניקוי וארגון מחדש באופן שיטתי של מנוע העיבוד של Blink לשלבי צינור עיבוד נתונים מופרדים בצורה ברורה. כך אפשר לשפר את האחסון במטמון, את האמינות ואת התכונות של עיבוד מחדש / עיבוד מאחר, כמו content-visibility ושאילתות של קונטיינרים.
- GPU Raster Everywhere: מאמץ ארוך טווח להשקת רסטרציה של GPU בכל הפלטפורמות, כשהדבר אפשרי.
- גלילה ואנימציות משורשרות: מאמץ לטווח ארוך להעברת כל האנימציות ללא גלילה ובלי פריסה לשרשור לשרשור של הקומפוזבילי.
כדאי לעקוב אחרי עדכונים נוספים לגבי השיפורים האלה ועוד.