วิธีใหม่ในการวาดเส้นคั่นใน CSS: `CSS Gap Decorations`

(blogs.windows.com)

5 คะแนน โดย GN⁺ 2025-03-24 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

การเพิ่ม เส้นคั่น ระหว่างเซกชันบนหน้าเว็บเป็นเทคนิคการออกแบบที่ใช้กันทั่วไปเพื่อ จัดระเบียบเนื้อหาให้ชัดเจน และเพิ่ม ความอ่านง่าย
แม้จะสามารถใช้เทคนิค CSS แบบเดิมอย่าง border เพื่อเพิ่มเส้นคั่นได้ แต่ก็มีข้อจำกัด เช่น การเปลี่ยนขนาดและความจำเป็นต้องเขียนโค้ดเพิ่มเติม
CSS Gap Decorations แก้ปัญหาเหล่านี้ด้วยการเพิ่มพร็อพเพอร์ตีอย่าง column-rule และ row-rule

เทคนิคเส้นคั่นใน CSS แบบเดิมและข้อจำกัด

พร็อพเพอร์ตี border เป็นวิธีทั่วไปในการเพิ่มเส้นคั่น แต่ก็อาจเกิดปัญหาดังต่อไปนี้
- เมื่อเพิ่ม border ขนาดขององค์ประกอบอาจเปลี่ยนไป
- ต้องเขียนโค้ดเพิ่มเติมสำหรับองค์ประกอบแรกและองค์ประกอบสุดท้าย
- หากมีการตัดบรรทัดในเลย์เอาต์ Flexbox เส้นคั่นอาจครอบคลุมพื้นที่ได้ไม่เต็มทั้งหมด
สามารถใช้ pseudo-element อย่าง ::before และ ::after เพื่อเพิ่มเส้นคั่นได้ แต่มีข้อจำกัดดังนี้
- ต้องเขียนโค้ดเพิ่มเติมสำหรับองค์ประกอบแรกและองค์ประกอบสุดท้าย
- ต้องใช้โค้ดกำหนดตำแหน่งแบบ absolute ที่ซับซ้อน
สามารถทำให้ดูเหมือนมีเส้นคั่นได้โดยกำหนดสีพื้นหลังให้กับกริดคอนเทนเนอร์ และกำหนดสีพื้นหลังให้กับไอเท็ม
- ปรับความยาวของเส้นคั่นไม่ได้
- หากมีเซลล์ว่าง สีพื้นหลังจะมองเห็นได้
- หากไอเท็มเติมเต็มเซลล์ไม่ครบ สีพื้นหลังจะมองเห็นได้
- ใช้งานไม่ได้หากพื้นหลังของหน้าไม่ใช่สีเดียวล้วน
ในเลย์เอาต์หลายคอลัมน์ สามารถใช้พร็อพเพอร์ตี column-rule เพื่อเพิ่มเส้นคั่นได้ แต่มีข้อจำกัดดังนี้
- ใช้งานได้เฉพาะกับเลย์เอาต์หลายคอลัมน์เท่านั้น
- ไม่สามารถควบคุมทิศทางอินไลน์ของเนื้อหาได้

ข้อเสนอ CSS Gap Decorations

CSS Gap Decorations เป็นข้อเสนอใหม่เพื่อแก้ปัญหาข้างต้น
ประเด็นสำคัญของข้อเสนอ
- ขยายการรองรับพร็อพเพอร์ตี column-rule ให้ใช้ได้กับเลย์เอาต์กริดและฟเล็กซ์บ็อกซ์
- เพิ่มพร็อพเพอร์ตีใหม่ row-rule
- สามารถกำหนดเส้นคั่นต่างกันในแต่ละส่วนของคอนเทนเนอร์ได้

สามารถเปลี่ยนสีของเส้นคั่นได้ด้วยพร็อพเพอร์ตี row-rule-color

.alternate-red-blue {  
  display: grid;  
  grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
  gap: 10px;  
  row-rule: 1px solid;  
  row-rule-color: red blue;  
}

สามารถกำหนดเส้นคั่นที่มีความหนาและสีแตกต่างกันได้

.varying-widths {  
  display: grid;  
  grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
  row-gap: 10px;  
  row-rule: 5px solid black / repeat(auto, 1px solid #666) / 3px solid black;  
}

สามารถควบคุมพฤติกรรมของเส้นคั่นที่จุดตัดได้
- ใช้พร็อพเพอร์ตี *-rule-break และ *-rule-outset ได้
- ควบคุมตำแหน่งเริ่มต้นและสิ้นสุดของเส้นคั่นที่จุดตัดได้
- ปรับความยาวและออฟเซ็ตของเส้นคั่นได้อย่างละเอียด

การขอฟีดแบ็กต่อข้อเสนอ

ข้อเสนอ CSS Gap Decorations จะได้รับการปรับปรุงต่อไปโดยอิงจากฟีดแบ็กของนักพัฒนา
ดูรายละเอียดเพิ่มเติมได้ใน explainer อย่างเป็นทางการ
สามารถส่งฟีดแบ็กผ่าน GitHub issue ได้
โดยเฉพาะอย่างยิ่ง ยินดีรับฟีดแบ็กเกี่ยวกับพฤติกรรมของเส้นคั่นที่จุดตัด

1 ความคิดเห็น

GN⁺ 2025-03-24

ความคิดเห็นจาก Hacker News

อยากมี pseudo-element แบบใหม่: .container:gap { background-color: red; }
- สามารถทำพื้นหลังที่ดูดีกว่าได้ เช่น เส้นประหรือไล่เฉดสี
- สามารถใช้ { padding: 2px } เพื่อตั้งระยะว่างที่ปลายของตัวคั่นได้
- สามารถใช้ :gap-horz และ :gap-vert เพื่อตั้งค่าระยะห่างแนวตั้งและแนวนอนแยกกันได้
- สามารถใช้ .container:gap:nth-gap(2n) { color: blue; } เพื่อให้ได้สีสลับกัน
การออกแบบโดยคณะกรรมการไม่ใช่สิ่งที่ดีที่สุด แต่ในฐานะคนที่ไม่ได้เป็นเจ้าของภาษา ชื่อพร็อพเพอร์ตีที่เสนอมาดูเหมือนจะสื่อความหมายได้ไม่ดีนัก
- ตัวอย่างเช่น มันนิยามระยะห่าง แต่จริง ๆ แล้วกำลังวาดตัวคั่น
อยากให้พิจารณากรณีใช้งานของพาเนลที่ปรับขนาดได้ด้วย
- ถึงแม้การทำงานทั้งหมดจะอยู่ฝั่ง userland แต่ถ้าตัวคั่นที่ปรับสไตล์ได้สามารถรับอีเวนต์ได้ก็น่าจะมีประโยชน์
การเพิ่มเส้นขอบทำให้ขนาดของรายการเปลี่ยนไป ซึ่งอาจไม่เป็นที่ต้องการ
- ปัญหานี้ถูกแก้มานานกว่า 10 ปีแล้ว
- คิดว่าบรรทัดแรกของไฟล์ CSS ของทุกคนน่าจะเป็น * { box-sizing: border-box; }
- ถ้าวางเส้นขอบไว้ด้านในของความกว้าง ก็น่าจะคิดแบบสมเหตุสมผลได้มากกว่า
น่าสนใจ ช่วงนี้ทำงาน UI ใน QML เป็นหลัก และมันจัดการปัญหาแบบนี้ได้แทบทั้งหมด
- เมื่อไม่กี่เดือนก่อน ได้ทำ grid line ในมุมมองปฏิทินโดยใช้ช่องว่างระหว่างรายการให้เห็นพื้นหลัง
- ใช้พร็อพเพอร์ตี "spacing" ของ layout และปล่อยให้ GPU ทำงาน
เป็นไอเดียที่ใช้ได้ แต่คิดว่าน่าจะมีประโยชน์กว่านี้ถ้ามีมาตั้งแต่ราว 10 ปีก่อน
- ใน CSS สมัยใหม่ เราสามารถจัดการตัวคั่นได้ด้วย selector และพร็อพเพอร์ตีเพียงชุดเดียว
- ทำได้ในลักษณะอย่าง .things .thing:not(:last-child) { border-bottom: 1px solid gray; }
- บทความพูดถึงจุดนี้อยู่ แต่ดูเหมือนจะประเมินความถี่ของ edge case สูงเกินไป
เป็นปัญหาที่น่าปวดหัวมานาน ดีที่ได้เห็นใครสักคนลงมือทำอะไรบางอย่าง
- แต่นี่ใช้ได้แค่กับ display: grid เท่านั้น และไม่ครอบคลุมองค์ประกอบที่ความกว้างไม่ตายตัว
- บนหน้าจอขนาดเล็ก | ระหว่างลิงก์อาจไปโผล่ท้ายบรรทัดแรกหรือต้นบรรทัดที่สองได้
ทำให้นึกถึงคำกล่าวของดีไซเนอร์ชาวเยอรมัน: "เมื่อดีไซเนอร์ไม่มีไอเดียเหลือแล้ว ก็จะเพิ่มเส้นเข้าไปอีกสองสามเส้น"
- พอไม่มีวิธีแยกเนื้อหาให้ชัดเจน ก็จะเริ่มเพิ่มเส้น
เจอปัญหานี้บ่อย และอยากได้วิธีที่ดีกว่า <hr/>
- มันใช้กับแถวของตารางหรือหลายคอลัมน์ไม่ได้
หวังว่าสิ่งนี้จะผ่าน... การใช้ AI มาอุดช่องว่างความรู้เรื่อง flexbox เป็นพรจริง ๆ แต่สิ่งนี้ให้ความรู้สึกเหมือนเป็นวิธีแก้ที่แท้จริง