วิธีใหม่ในการจัดสไตล์ช่องว่างใน CSS

Sam Davis Omekara

Patrick Brosset

เผยแพร่เมื่อวันที่ 11 มิถุนายน 2025

บอกลาการแฮ็กเส้นขอบและองค์ประกอบสมมติ แล้วพบกับการตกแต่งด้วย CSS

ทีม Microsoft Edge ยินดีที่จะประกาศว่าตอนนี้นักพัฒนาซอฟต์แวร์สามารถทดลองใช้การตกแต่งช่องว่าง CSS ซึ่งเป็นวิธีใหม่ในการจัดรูปแบบช่องว่างระหว่างรายการในเลย์เอาต์แบบ Flex, ตารางกริด และหลายคอลัมน์ได้แล้วใน Chrome และ Edge 139

ลองใช้และแชร์ความคิดเห็นของคุณเพื่อช่วยกำหนดอนาคตของ API นี้

ลิงก์ที่มีประโยชน์

• ข้อกำหนด
• บล็อกโพสต์ประกาศของ Microsoft Edge
• คำอธิบาย

ปัญหา

การจัดสไตล์ช่องว่างในคอมโพเนนต์ UI เช่น ปฏิทิน การ์ด หรือตารางข้อมูลจะช่วยปรับปรุงความอ่านง่ายและเพิ่มความสวยงามโดยรวมได้อย่างมาก อย่างไรก็ตาม การสร้างเอฟเฟกต์นี้ในเลย์เอาต์ตารางกริดและ Flexbox นั้นต้องใช้วิธีแก้ปัญหาที่ไม่ค่อยสะดวกนักด้วยการใช้เส้นขอบ องค์ประกอบจำลอง หรือเทคนิคพื้นหลัง ซึ่งวิธีแก้ปัญหาเหล่านี้อาจทำให้เกิดปัญหาได้หลายประการ

• ใช้งานยาก: มีการนําเสนอการพึ่งพาโครงสร้างสําหรับการจัดสไตล์ภาพ ซึ่งขัดต่อหลักการของ HTML ที่สื่อความหมาย
• ไม่รองรับการช่วยเหลือพิเศษ: มักต้องใช้เอลิเมนต์ DOM เพิ่มเติม ซึ่งอาจรบกวนเทคโนโลยีความช่วยเหลือพิเศษ เช่น โปรแกรมอ่านหน้าจอ
• ดูแลรักษายาก: ต้องใช้ตรรกะเลย์เอาต์ที่ซับซ้อนและทำให้การจัดสไตล์ที่สอดคล้องกับคอมโพเนนต์ต่างๆ ยากขึ้น
• ส่งผลเสียต่อประสิทธิภาพ: วิธีแก้ปัญหาเหล่านี้อาจเพิ่มองค์ประกอบที่ไม่จําเป็นลงใน DOM ซึ่งอาจทําให้เกิดปัญหาด้านประสิทธิภาพ

แม้ว่าแพลตฟอร์มเว็บจะรองรับการจัดรูปแบบช่องว่างด้วยพร็อพเพอร์ตี้ column-rule อยู่แล้ว แต่ปัจจุบันจะจำกัดไว้เฉพาะเลย์เอาต์หลายคอลัมน์เท่านั้น นักพัฒนาเว็บเรียกร้องให้มีวิธีกำหนดสไตล์ช่องว่างในเลย์เอาต์ประเภทอื่นๆ ที่เกี่ยวข้องอย่างสอดคล้องกันมานานแล้ว เช่น ตารางกริดและ Flexbox

วิธีการแก้ปัญหา: การตกแต่งช่องว่าง CSS

การตกแต่งช่องว่างจะขยายพร็อพเพอร์ตี้ column-rule ให้ทำงานร่วมกับเลย์เอาต์ประเภทอื่นๆ เช่น ตารางกริดและ Flexbox รวมถึงเปิดตัวพร็อพเพอร์ตี้ row-rule ใหม่เพื่อใช้ร่วมกับพร็อพเพอร์ตี้ดังกล่าว วิธีนี้ช่วยให้ช่องว่างมีสไตล์ที่สอดคล้องกันและปรับแต่งได้ใหม่ในเลย์เอาต์ประเภทต่างๆ

การตกแต่งช่องว่าง CSS มีประโยชน์ดังต่อไปนี้

• ไม่มีผลต่อเลย์เอาต์: การตกแต่งมีไว้เพื่อความสวยงามเท่านั้น ฟีเจอร์เหล่านี้ไม่ส่งผลต่อเลย์เอาต์หรือระยะห่าง คุณจึงนำไปใช้ได้โดยไม่ต้องกังวลว่าจะทำลายการออกแบบที่มีอยู่
• ไวยากรณ์ "Repeat: คล้ายกับ CSS Grid คุณสามารถใช้ไวยากรณ์ repeat() เพื่อสร้างรูปแบบของการตกแต่งในส่วนต่างๆ ของคอนเทนเนอร์ ซึ่งช่วยให้มีการออกแบบที่สมบูรณ์แบบและสอดคล้องกันโดยใช้ CSS เพียงเล็กน้อย
• มาร์กอัปที่สะอาดขึ้น: ไม่ต้องมีองค์ประกอบเพิ่มเติมหรือองค์ประกอบจำลอง เพียงแค่จัดสไตล์ช่องว่างโดยตรง
• ความสามารถในการปรับแต่ง: พร็อพเพอร์ตี้ CSS ใหม่ เช่น *rule-break, *rule-outset และ gap-rule-paint-order ช่วยให้คุณมีตัวเลือกการปรับแต่งเพิ่มเติมนอกเหนือจากการจัดรูปแบบกฎแบบดั้งเดิมในด้านความกว้าง สไตล์ และสี

การใช้การตกแต่งช่องว่าง CSS ช่วยให้สร้างเลย์เอาต์หน้าเว็บที่แตกต่างและดูแลรักษาได้ง่ายกว่าที่เคย

การตกแต่งช่องว่างที่ใช้งานจริง

หากต้องการลองใช้การตกแต่งช่องว่าง CSS ในวันนี้ ให้ใช้เบราว์เซอร์ที่รองรับ ได้แก่ Edge หรือ Chrome ตั้งแต่เวอร์ชัน 139 เป็นต้นไป และเปิด/ปิด Flag เปิดใช้ฟีเจอร์เว็บแพลตฟอร์มเวอร์ชันทดลองโดยไปที่ edge://flags หรือ chrome://flags

สนามเด็กเล่นแบบอินเทอร์แอกทีฟสำหรับนักพัฒนาแอป

หากต้องการลองเลย์เอาต์ประเภทต่างๆ ที่รองรับการตกแต่งช่องว่าง CSS และพร็อพเพอร์ตี้ใหม่ทั้งหมด ให้ลองใช้พื้นที่ทํางานแบบอินเทอร์แอกทีฟสําหรับนักพัฒนาซอฟต์แวร์

เมนูเบอร์เกอร์

ตัวอย่างเมนูแบบกรวยแสดงวิธีใช้พร็อพเพอร์ตี้ column-rule-break: intersection เพื่อแบ่งการตกแต่งช่องว่างของคอลัมน์ที่จุดตัดที่มองเห็นได้แต่ละจุดด้วยช่องว่างของแถว

นอกจากนี้ ตัวอย่างนี้ยังใช้ column-rule-offset: -15px เพื่อปรับความยาวของการตกแต่ง โดยดึงการตกแต่งออกจากขอบของทางแยกแต่ละแห่ง

โน้ตบุ๊ก

ในการสาธิตโน้ตบุ๊ก row-rule-break: none ตรวจสอบว่าการตกแต่งแถวไม่ขาดตอนตรงจุดตัดกัน โดยการตกแต่งจะแสดงจากซ้ายไปขวาของคอนเทนเนอร์อย่างต่อเนื่อง ในทางกลับกัน column-rule-break: spanning-item จะทำให้แน่ใจว่าระบบจะไม่วาดการตกแต่งคอลัมน์ไว้ด้านหลังรายการที่ตัดผ่าน โดยการตกแต่งจะเริ่มต้นและสิ้นสุดที่รายการที่ตัดผ่านซึ่งทำให้เกิดทางแยกรูปตัว T ที่มองเห็นได้

พร็อพเพอร์ตี้ row-rule ใช้ฟังก์ชัน repeat() เพื่อควบคุมอย่างละเอียดเกี่ยวกับวิธีใช้การตกแต่งช่องว่างในส่วนต่างๆ ของเลย์เอาต์ ซึ่งจะเปิดใช้รูปแบบการจัดรูปแบบที่กฎแถวจะซ่อนอยู่ในส่วนหัวและส่วนท้าย หนาขึ้นรอบๆ เนื้อหาหลัก และบางลงในส่วนอื่นๆ

ข่าว CSS ประจำวัน

เดโม Daily CSS News ใช้เลย์เอาต์สไตล์นิตยสารและกำหนดการตกแต่งช่องว่าง CSS ในคอนเทนเนอร์ตารางกริดและ Flexbox หลายรายการ

สังเกตเกมซูโดกุทางด้านขวา ซึ่งใช้ตารางกริด 9x9 และรูปแบบที่ซ้ำกันเพื่อวาดเส้นบางและหนาระหว่างแถวและคอลัมน์

.sudoku {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 6px;
  column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  column-rule-style: solid;
  column-rule-color: var(--secondary);
  row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  row-rule-style: solid;
  row-rule-color: var(--secondary);
}

ขอความคิดเห็น

เรายินดีอย่างยิ่งที่คุณจะได้ลองใช้การตกแต่งช่องว่าง CSS เราคิดว่าฟีเจอร์นี้ช่วยแก้ปัญหาที่พบได้ทั่วไป และอยากทราบความคิดเห็นของคุณเกี่ยวกับฟีเจอร์นี้เพื่อให้เราปรับแต่งฟีเจอร์ให้ตรงกับความต้องการของคุณได้

ฟีเจอร์การตกแต่งช่องว่าง CSS ยังคงอยู่ระหว่างการใช้งานใน Chromium หากคุณทดสอบ โปรดทราบว่าเรายังพัฒนาฟีเจอร์นี้อยู่และคุณอาจพบกรณีที่ฟีเจอร์ทำงานไม่เป็นไปตามที่คาดไว้ ข้อจำกัดในปัจจุบันบางอย่างเกี่ยวข้องกับภาพเคลื่อนไหวของการตกแต่งช่องว่างและการใช้แทร็กตารางกริดจํานวนมาก

หากพบข้อบกพร่องหรือมีข้อคิดเห็นเกี่ยวกับฟีเจอร์นี้ โปรดแชร์ความคิดเห็นโดยเปิดข้อบกพร่องใหม่ของ Chromium