TablesNG เปิดตัวใน Chromium 91 และแก้ไขข้อบกพร่องจำนวนมากซึ่งเป็นส่วนหนึ่งของแพลตฟอร์มเว็บมาเป็นเวลาหลายปี การอัปเดตเหล่านี้จะช่วยปรับปรุงความเข้ากันได้กับเบราว์เซอร์ในฐานะส่วนหนึ่งของความพยายาม #Compat2021 และปรับปรุงการใช้ตารางในแพลตฟอร์มเว็บโดยรวม ปัญหาที่สำคัญที่สุดบางส่วน ได้แก่ position:
sticky ในแถว เรขาคณิตของพิกเซลย่อย และการยุบขอบที่ถูกต้อง
ความพยายามของ TablesNG
TablesNG ต้องใช้เวลาหลายปีและนำโดย Aleks Totic นักพัฒนาซอฟต์แวร์ของ Chrome เพื่อจัดโครงสร้างวิธีแสดงผลตารางบนเว็บอีกครั้ง ตารางเป็นอุปสรรคที่เฉพาะเจาะจงในการพัฒนาเว็บ ส่วนหนึ่งเป็นเพราะประวัติของตารางเหล่านั้น
มีการเพิ่มตารางลงใน HTML ในปี 1994 และใช้เป็นวิธีการหลักในการสร้างเลย์เอาต์หน้าเว็บที่ซับซ้อนเป็นเวลาหลายปี ข้อความเหล่านี้ยังคงปรากฏทั่วเว็บ
แม้ว่าการใช้งานในปัจจุบันจะเป็นการแสดงข้อมูลแบบตาราง
อย่างไรก็ตาม มีความแตกต่างอย่างมากในลักษณะการทำงานของตารางในเบราว์เซอร์ต่างๆ ซึ่งโดยส่วนใหญ่แล้วเกิดจากการมีข้อกำหนดตารางที่ไม่สมบูรณ์และขาดรายละเอียด
นอกจากนี้ ยังมีการใช้ตารางในเบราว์เซอร์ก่อนฟีเจอร์ CSS หลายรายการ เช่น โหมดการเขียนแบบตั้งฉาก, position:relative, box-sizing, คอนเทนเนอร์ Flexbox และอื่นๆ อีกมากมาย การรองรับฟีเจอร์เหล่านี้จำนวนมากจึงไม่สอดคล้องกัน
ข้อกำหนดใหม่คือโมดูลตาราง CSS ระดับ 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 (แบบจำลองออบเจ็กต์เอกสาร) แต่เซลล์จะอยู่ในลำดับ DOM แบบย้อนกลับ โดยเซลล์แรกในตารางจะอยู่บนสุด
ปัญหาในที่นี้คือเส้นขอบเป็นของตาราง ไม่ใช่เซลล์ ในแบบเดิมๆ ที่มีการทาสีตาราง ระบบจะระบายสีเส้นขอบที่ยุบเมื่อทาสีพื้นหน้าของตาราง ซึ่งหมายความว่าเซลล์ของตาราง 1 เซลล์จะมีหลายเส้นขอบไม่ได้
ในตัวอย่างข้างต้น คุณจะเห็นว่าเซลล์ด้านซ้ายสุดของเซลล์สีฟ้าวางทับบนเซลล์สีส้มด้านล่างขวาไม่ถูกต้อง เนื่องจากไม่สามารถมีขอบหลายขอบได้ ในการใช้งานที่ได้รับการออกแบบใหม่ ปัญหานี้จะหมดไป และเซลล์ขอบสีส้มใส่สีบนขอบสีฟ้าอย่างถูกต้อง ทำให้ช่องว่างของตารางที่สองมีทั้งเส้นเส้นขอบสีน้ำเงินและสีส้ม
ข้อบกพร่องนี้ได้รับการแก้ไขแล้วใน Chromium และ Firefox
เรขาคณิตของพิกเซลย่อย (การจัดตาราง)
การจัดแนวพิกเซลในตารางเป็นอีกปัญหาหนึ่งเกี่ยวกับความสามารถในการทำงานร่วมกันซึ่งได้รับการแก้ไขแล้วด้วย TablesNG ก่อนหน้านี้ เครื่องมือที่เก่ากว่าจะปัดเศษค่ากราฟิกเป็นพิกเซลเสมอ ซึ่งหมายความว่าเมื่อคุณซูมเข้าและออกจากหน้า สิ่งต่างๆ จะเปลี่ยนแปลงไป ซึ่งก่อให้เกิดปัญหาการปรับแนว TablesNG จะแก้ไขปัญหาการวางแนวเหล่านี้
การปรับโครงสร้างเว็บใหม่
ทีม Chrome ไม่เพียงแค่เปิดตัวฟีเจอร์ใหม่ๆ เพื่อทำให้การเขียนเว็บมีประสิทธิภาพมากขึ้น แต่ยังทำงานอย่างหนักเพื่อปรับปรุง API ที่มีอยู่และความเข้ากันได้ อันที่จริงแล้ว TablesNG เป็นเพียงหนึ่งในโปรเจ็กต์การออกแบบโครงสร้างใหม่หลายโปรเจ็กต์ที่ทีมนี้ได้ทำในช่วง 8 ปีที่ผ่านมา ส่วนโครงการอื่นๆ จะเป็นเพียงบางส่วน ได้แก่
- LayoutNG: การเขียนอัลกอริทึมรูปแบบใหม่ใหม่ทั้งหมด เพื่อเพิ่มความน่าเชื่อถือและประสิทธิภาพที่สามารถคาดการณ์ได้มากขึ้น
- BlinkNG: การทำความสะอาดและการเปลี่ยนโครงสร้างภายในเครื่องมือแสดงผล Blink อย่างเป็นระบบโดยแบ่งออกเป็นระยะต่างๆ อย่างสมบูรณ์ ซึ่งจะช่วยให้การแคชดีขึ้น มีความน่าเชื่อถือสูงขึ้น และมีผู้เข้าร่วมซ้ำ/การแสดงผลล่าช้า เช่น เนื้อหา-ระดับการเข้าถึงและการค้นหาคอนเทนเนอร์
- GPU Raster Everywhere: ความพยายามระยะยาวในการเปิดตัวการแรสเตอร์ GPU บนทุกแพลตฟอร์มเมื่อเป็นไปได้
- การเลื่อนแบบชุดข้อความและภาพเคลื่อนไหว: เป็นความพยายามระยะยาวในการย้ายภาพเคลื่อนไหวแบบเลื่อนทั้งหมดและไม่มีเลย์เอาต์ไปยังชุดข้อความของตัวจัดวางองค์ประกอบ
โปรดติดตามข้อมูลอัปเดตเพิ่มเติมเกี่ยวกับการปรับปรุงเหล่านี้และอื่นๆ อีกมากมาย