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

• การเพิ่ม เส้นคั่น ระหว่างเซกชันบนหน้าเว็บเป็นเทคนิคการออกแบบที่ใช้กันทั่วไปเพื่อ จัดระเบียบเนื้อหาให้ชัดเจน และเพิ่ม ความอ่านง่าย
• แม้จะสามารถใช้เทคนิค 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 ได้
• โดยเฉพาะอย่างยิ่ง ยินดีรับฟีดแบ็กเกี่ยวกับพฤติกรรมของเส้นคั่นที่จุดตัด

[GN⁺]

ความคิดเห็นจาก 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 เป็นพรจริง ๆ แต่สิ่งนี้ให้ความรู้สึกเหมือนเป็นวิธีแก้ที่แท้จริง