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