CSS-Tricks: สร้างตาราง HTML สไตล์ Frankenstein ด้วย CSS Grid
เจาะลึกแนวคิดการนำโครงสร้าง HTML table มาปะติดปะต่อใหม่ด้วย CSS Grid เพื่อใช้งานคุณสมบัติการจัดวางเลย์เอาต์ พร้อมชั่งน้ำหนักข้อดีและข้อเสีย
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- การทดลองนำโครงสร้าง HTML table มาผสมผสานกับ CSS Grid เพื่อใช้ประโยชน์จาก positioning properties
- HTML tables แบบดั้งเดิมยังคงมีความสำคัญด้าน semantics และการเข้าถึง (accessibility) สำหรับจอห์นภาพ
- การแยกเนื้อหาและการนำเสนอ (separation of concerns) อาจทำให้โค้ดดูลักษณะแปลกตาแต่ยังคงรักษาบทบาทเดิมไว้
- บทความจาก CSS-Tricks ชวนตั้งคำถามถึงขอบเขตการปรับแต่งองค์ประกอบ HTML ด้วย CSS
ความหลงใหลในเทคโนโลยีเว็บมักเริ่มต้นจากความไร้เดียงสา เมื่อคุณสมบัติใหม่อย่าง Flexbox และ CSS Grid ปรากฏขึ้น หลายคนอาจเคยคาดหวังว่าคุณสมบัติการจัดวางตำแหน่งอย่าง align-self หรือ justify-content จะสามารถใช้งานได้กับทุกองค์ประกอบบนหน้าเว็บ ไม่ว่าจะเป็น block หรือ inline elements เช่น ตาราง รายการ หรือองค์ประกอบแบบ fixed โดยมีความคาดหวังว่ารูปแบบคำสั่งและผลลัพธ์จะทำงานในลักษณะเดียวกันทั้งหมด
แม้ว่าในความเป็นจริงสิ่งนั้นจะไม่ได้เกิดขึ้นตามที่ฝันไว้ แต่ก็เกิดคำถามที่น่าสนใจว่า ถ้าหากเราลองสร้างสิ่งที่มีลักษณะคล้ายคลึงกันขึ้นมาล่ะจะเป็นอย่างไร แนวคิดดังกล่าวคือการดึงเอาแก่นแท้ของ HTML table ออกมา แล้วนำมาเย็บประกอบร่างใหม่ด้วยพลังของ CSS Grid หรือที่อาจเรียกว่าตารางสไตล์ Frankenstein
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
วิธีการนี้ทำให้ตารางสามารถอ่านข้อมูลในแบบตาราง HTML ทั่วไป แต่พฤติกรรมการแสดงผลกลับทำตัวเหมือน CSS Grid เต็มตัว เปิดโอกาสให้นักพัฒนาสามารถใช้งานคุณสมบัติของ Grid ได้อย่างเต็มที่ อันที่จริง เทคนิคในทำนองนี้เคยถูกนำมาใช้ในอดีตเพื่อช่วยให้ตารางสามารถปรับขนาดตามหน้าจอ (responsive) ได้มาแล้ว
แนวคิดเรื่องตาราง Frankenstein สะท้อนให้เห็นถึงความพยายามของนักพัฒนาเว็บในการผสานข้อดีของโครงสร้างข้อมูล (Semantics) เข้ากับการจัดเลย์เอาต์สมัยใหม่ แม้ว่าในทางปฏิบัติการนำแท็กตารางไปใช้เพียงเพื่อดึงประโยชน์จาก CSS Grid อาจขัดกับหลักการ separation of concerns ที่แนะนำให้แยกเนื้อหาและการตกแต่งออกจากกันอย่างเด็ดขาด แต่ก็เป็นมุมมองที่ท้าทายขีดจำกัดของเบราว์เซอร์ในการตีความสไตล์และการแสดงผล
อย่างไรก็ตาม ก่อนที่จะตัดสินใจดัดแปลงตาราง HTML จนแทบไม่เหลือสภาพเดิม ควรตระหนักถึงข้อดีสำคัญของตารางแบบดั้งเดิมด้วยเช่นกัน ตาราง HTML แท้ๆ นั้นมอบโครงสร้าง semantic ที่สะอาดตา ซึ่งเบราว์เซอร์และเทคโนโลยีสิ่งอำนวยความสะดวก (assistive technology) สำหรับผู้พิการสามารถเข้าใจและแปลความหมายได้อย่างสมบูรณ์แบบ รวมถึงมีองค์ประกอบพื้นฐานอย่างแท็ก <caption> ที่ช่วยเพิ่มบริบท
ในมุมมองของการพัฒนาเว็บสมัยใหม่ การใช้ CSS Grid เป็นเครื่องมือหลักสำหรับจัดการเลย์เอาต์ถือเป็นสิ่งที่ขาดไม่ได้เนื่องจากมีความยืดหยุ่นสูงและเป็นอิสระจากลำดับของซอร์สโค้ด คำแนะนำที่ดีที่สุดคือการปล่อยให้ตาราง HTML ทำหน้าที่แสดงผลข้อมูลตาราง (tabular data) ตามวัตถุดิบดั้งเดิมของมัน แล้วใช้ CSS Grid ควบคุมโครงสร้างหน้าเว็บในส่วนอื่นจะเหมาะสมกว่า
ที่มา: CSS-Tricks
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น