The Gap Strikes Back: CSS Gap ที่จัดสไตล์ได้แล้ว

 (css-tricks.com)
8 คะแนน โดย GN⁺ 2025-07-04 | ยังไม่มีความคิดเห็น | แชร์ทาง WhatsApp
  • เดิมทีสามารถสร้างระยะห่างด้วย พร็อพเพอร์ตี CSS gap ได้ แต่ ไม่สามารถจัดสไตล์ให้กับพื้นที่ gap เองได้ จึงต้องใช้วิธีอ้อมหลายแบบ เช่น องค์ประกอบเพิ่ม, border, pseudo-element เป็นต้น
  • ฟีเจอร์ใหม่ CSS gap decorations ช่วยให้สามารถวาด เส้นคั่น (separator) ระหว่างไอเท็มในเลย์เอาต์ได้โดยตรง ด้วยพร็อพเพอร์ตีอย่าง row-rule, column-rule เป็นต้น
  • สามารถใช้การตกแต่งนี้ได้กับทุกเลย์เอาต์หลัก ทั้ง Grid, Flexbox, Multi-column และในอนาคต Masonry โดยไม่ต้องมีมาร์กอัปเพิ่มหรือเอลิเมนต์ส่วนเกิน ทำให้ปรับปรุงทั้งโครงสร้างและภาพลักษณ์ได้ด้วย CSS ล้วน
  • รองรับ สไตล์ที่หลากหลาย (ความหนา สี ลวดลาย ฯลฯ) การทำซ้ำและการผสมกัน และควบคุมได้ละเอียดด้วย repeat(), outset, paint-order เป็นต้น
  • ขณะนี้ยังใช้ได้เฉพาะใน เบราว์เซอร์ตระกูล Chromium (Chrome/Edge 139+) เมื่อเปิด flag เท่านั้น และกำลังอยู่ระหว่างการทำให้เป็นมาตรฐานและขยายความสามารถ

ข้อจำกัดเดิมของ gap และการเปลี่ยนแปลง

  • ก่อนหน้านี้ การจัดสไตล์พื้นที่ gap ทำได้ยาก และต้องเพิ่ม border หรือเอลิเมนต์ปลอมสำหรับ separator
  • วิธีเหล่านี้มีข้อเสียหลายอย่าง ทั้งเรื่องขนาดเลย์เอาต์ การเข้าถึง และความซับซ้อนของมาร์กอัป
  • ตอนนี้มีมาตรฐาน gap decorations แล้ว จึงสามารถใส่การตกแต่ง (เช่น เส้น) ลงในพื้นที่ระยะห่างได้ด้วย พร็อพเพอร์ตี CSS ง่ายๆ

แนะนำ CSS gap decorations

  • column-rule: เดิมใช้ใน multi-column สำหรับวาดเส้นแบ่งแนวตั้ง (เช่น column-rule: 1px solid black;)
  • ตอนนี้พร็อพเพอร์ตีนี้สามารถใช้กับ flexbox, grid และอื่นๆ ได้แล้ว 
    .my-grid-container {  
  display: grid;  
  gap: 2px;  
  column-rule: 2px solid pink;  
}
  • row-rule: ใช้วาด separator ระหว่างแถว (แนวนอน) 
    .my-flex-container {  
  display: flex;  
  gap: 10px;  
  row-rule: 10px dotted limegreen;  
  column-rule: 5px dashed coral;  
}
  • การทำซ้ำ/ผสมหลายสไตล์: สามารถใช้ repeat() หรือคั่นด้วยเครื่องหมายจุลภาคเพื่อผสมสไตล์หลากหลายได้ 
    .my-container {  
  display: grid;  
  gap: 2px;  
  row-rule:  
    repeat(2, 1px dashed red),  
    2px solid black,  
    repeat(auto, 1px dotted green);  
}
  • พร็อพเพอร์ตีควบคุมละเอียด: เช่น row-rule-break, column-rule-break, row-rule-outset, column-rule-outset, gap-rule-paint-order สำหรับปรับตำแหน่ง จุดตัด ลำดับการซ้อนทับ ฯลฯ ได้อย่างละเอียด

ตัวอย่าง: การใช้งาน gap decorations ในทางปฏิบัติ

  • หน้าตัวอย่างกำหนด body เป็น grid และแยก header/nav/main/footer ด้วย gap
  • ใช้ row-rule เพื่อใส่เส้นคั่นที่มีความหนา สี และสไตล์ต่างกัน
  • เมนู nav ใช้ flexbox กับ column-rule เพื่อวาดเส้นคั่นระหว่างรายการ
  • พื้นที่ main ใช้ flexbox จัดวางรูปภาพและข้อความในรูปแบบ masonry พร้อมใช้ row-rule, column-rule เพื่อเน้นโครงสร้างแบบกริด
  • สามารถปรับตำแหน่งเริ่ม/จบของเส้นได้อย่างละเอียดด้วย column-rule-outset: 0; เป็นต้น

การรองรับของเบราว์เซอร์และการเปิดใช้งาน

  • ตอนนี้ต้องใช้ เบราว์เซอร์พื้นฐาน Chromium เช่น Chrome/Edge 139+ และต้องเปิด flag (about://flags → Experimental Web Platform Features)
  • กำลังอยู่ระหว่างการผลักดันให้เป็นมาตรฐานอย่างเป็นทางการ และแนะนำให้ช่วยทดลองพร้อมส่งฟีดแบ็ก

ศึกษาเพิ่มเติมและ Playground

บทความที่เกี่ยวข้อง

ยังไม่มีความคิดเห็น

ยังไม่มีความคิดเห็น