การตกแต่งช่องว่าง: เผยแพร่แล้วใน Chromium

Javier Contreras

Sam Davis Omekara

เผยแพร่เมื่อ: 15 พฤษภาคม 2026

การตกแต่งช่องว่าง CSS พร้อมใช้งานใน Chrome และ Edge ตั้งแต่เวอร์ชัน 149 เป็นต้นไป จัดรูปแบบช่องว่างระหว่างเลย์เอาต์กริด, Flexbox และเลย์เอาต์หลายคอลัมน์โดยไม่ต้องใช้เส้นขอบหรือองค์ประกอบเสมือน ฟีเจอร์นี้สร้างขึ้นโดยความร่วมมือระหว่างทีม Microsoft Edge และ Google Chrome

ปัญหา

การจัดรูปแบบช่องว่างระหว่างรายการเลย์เอาต์ต้องใช้การแก้ปัญหาเสมอ เส้นขอบในแต่ละรายการ องค์ประกอบเสมือน การใช้ประโยชน์จากพื้นหลัง แนวทางเหล่านี้มีข้อเสียดังนี้

• ขึ้นอยู่กับโครงสร้าง การเพิ่มตัวคั่นภาพหมายถึงการเปลี่ยนมาร์กอัปหรือการเขียนตัวเลือกสำหรับรายการที่เฉพาะเจาะจง
• รบกวนการช่วยเหลือพิเศษ องค์ประกอบ DOM เพิ่มเติมจะปรากฏในแผนผังการช่วยเหลือพิเศษเมื่อไม่ควรปรากฏ
• ดูแลรักษายาก เลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์จะทำลายสมมติฐานที่การจัดรูปแบบช่องว่างของคุณสร้างขึ้น
• ส่งผลเสียต่อประสิทธิภาพ โหนด DOM มากขึ้น งานเลย์เอาต์มากขึ้น
• การยศาสตร์ในการเขียนไม่ดี มักต้องมีการคำนวณทางเรขาคณิตที่ซับซ้อนเพื่อให้ทุกอย่างทำงานได้อย่างถูกต้อง

พร็อพเพอร์ตี้ column-rule จัดการการตกแต่งช่องว่างสำหรับเลย์เอาต์หลายคอลัมน์ แต่ก่อนหน้านี้กริดและ Flexbox ไม่มีฟังก์ชันที่เทียบเท่ากัน

การแก้ปัญหา

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

ตัวอย่างเช่น นี่คือคอนเทนเนอร์ Flex ที่มี 3 แผงโดยใช้รายการสไตล์สำหรับกฎคอลัมน์และกฎแถว

.flex-split {
  column-rule-width: 2px;
  column-rule-style: dashed, solid;
  column-rule-color: #d4d0c8;
}

ดังที่แสดงในตัวอย่างนี้ ทั้ง row-rule และ column-rule ยอมรับตัวย่อเดียวกันสำหรับความกว้าง สไตล์ และสี ใช้ตัวย่อ rule เพื่อตั้งค่าทั้ง 2 อย่างพร้อมกัน

พร็อพเพอร์ตี้ใหม่

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

ไวยากรณ์ repeat()

การตกแต่งช่องว่างรองรับ repeat() สำหรับค่าความกว้าง สไตล์ และสี ซึ่งช่วยให้คุณเปลี่ยนการตกแต่งในช่องว่างต่างๆ ในรูปแบบย่อได้ คล้ายกับไวยากรณ์ repeat() ที่ใช้สำหรับการกำหนดแทร็กในกริด

.settings-panel {
  row-rule: 1px solid #243352;
  row-rule-width: repeat(2, 1px), 4px;
}

ซึ่งจะทำให้ช่องว่าง 2 แถวแรกมีกฎ 1 พิกเซล และช่องว่างที่ 3 มีกฎ 4 พิกเซล โดยจะวนซ้ำหากมีช่องว่างมากกว่าค่า นอกจากนี้ คุณยังส่งค่าหลายค่าโดยตรงโดยไม่ต้องใช้ repeat() ได้ด้วย ตัวอย่างเช่น การสลับสไตล์กฎแถวสำหรับขอบเขตชั่วโมงและครึ่งชั่วโมงในปฏิทิน

.calendar {
  row-rule-width: 2px, 1px;
  row-rule-style: solid, dashed;
  row-rule-color: #e8e4df, #f0ece7;
}

ควบคุมการแบ่งการตกแต่ง

พร็อพเพอร์ตี้ column-rule-break และ row-rule-break ควบคุมลักษณะการทำงานของการตกแต่งที่จุดตัดของช่องว่าง

• normal (ค่าเริ่มต้น): ลักษณะการทำงานขึ้นอยู่กับประเภทคอนเทนเนอร์ ดูข้อมูลเพิ่มเติมได้ในข้อกำหนด
• none: การตกแต่งจะทำงานอย่างต่อเนื่องผ่านจุดตัด
• intersection: การตกแต่งจะแบ่งที่ช่องว่างแถวและคอลัมน์ตัดกัน

ตัวอย่างเช่น หากคุณตั้งค่า rule-break เป็น intersection ในคอนเทนเนอร์กริด กฎจะแบ่งที่จุดตัดของช่องว่างแทนที่จะดำเนินการต่อ

.dashboard {
  column-rule-style: solid;
  column-rule-color: #fbbf24, #34d399;
  column-rule-width: 1px, 3px;
  column-rule-break: intersection;
  row-rule: 1px solid #1e1e36;
}

หากคุณตั้งค่า rule-break เป็น none กฎจะทำงานอย่างต่อเนื่องผ่านจุดตัด

.grid {
  column-rule: 1px solid #5a9e9e;
  row-rule: 1px solid #c27a6b;
  rule-break: none;
}

คุณลองใช้ค่านี้ได้ใน เพลย์กราวด์แบบอินเทอร์แอกทีฟ

ขยายหรือลดการตกแต่ง

พร็อพเพอร์ตี้ column-rule-inset และ row-rule-inset ควบคุมระยะที่การตกแต่งขยายภายในช่องว่าง คุณสามารถตั้งค่าการย่อหน้าในทุกด้านพร้อมกันด้วยตัวย่อ หรือกำหนดเป้าหมายการย่อหน้าแบบไม่สมมาตรด้วย column-rule-inset-cap (สำหรับจุดปลายที่ไม่มีช่องว่างตัดกัน) และ column-rule-inset-junction (สำหรับจุดปลายที่ตัดกับช่องว่างอื่นๆ)

ค่าอาจเป็นความยาว เปอร์เซ็นต์ หรือคีย์เวิร์ด overlap-join ซึ่งรวมการตกแต่งช่องว่างเข้ากับมุม ตัวอย่างเช่น การตั้งค่า rule-inset เป็น 5 พิกเซลจะลดการตกแต่งทั้งหมดเข้าด้านใน 5 พิกเซล

.container {
  display: flex;
  flex-wrap: wrap;
  column-rule: 1px solid #2a2a45;
  column-rule-color: #60a5fa, #34d399, #a78bfa;
  rule-inset: 5px;
  row-rule: 1px solid #2a2a45;
}

การตั้งค่า rule-inset-cap เป็น 0 พิกเซลและ rule-inset-junction เป็น 10 พิกเซลจะทำให้การตกแต่งเสมอกับขอบคอนเทนเนอร์ แต่ย่อหน้าเข้าด้านในที่จุดตัด การสาธิตแดชบอร์ดที่แสดงก่อนหน้านี้ใช้วิธีนี้ และการย่อหน้าจะเคลื่อนไหวเมื่อวางเมาส์เหนือ

.dashboard {
  rule-inset-cap: 0px;
  rule-inset-junction: 10px;
  transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
  rule-inset-junction: 0px;
}

การมองเห็น

พร็อพเพอร์ตี้ column-rule-visibility-items และ row-rule-visibility-items ควบคุมเวลาที่กฎปรากฏตามการอยู่ติดกันของรายการ

• normal (ค่าเริ่มต้น): ขึ้นอยู่กับประเภทคอนเทนเนอร์
• all: กฎจะปรากฏในทุกช่องว่าง แม้แต่ช่องว่างเปล่า
• around: กฎจะปรากฏทุกที่ที่มีรายการที่อยู่ติดกันอย่างน้อย 1 รายการ
• between: กฎจะปรากฏเฉพาะระหว่างรายการที่อยู่ติดกัน 2 รายการ

ตัวย่อ rule-visibility-items จะตั้งค่าทั้ง 2 อย่างพร้อมกัน การตั้งค่า rule-visibility-items เป็น between จะแสดงกฎเฉพาะระหว่างรายการที่อยู่ติดกัน

section {
  rule: 2px solid black;
  rule-visibility-items: between;
}

ในทางกลับกัน การตั้งค่า rule-visibility-items เป็น all จะแสดงกฎในทุกช่องว่าง แม้แต่ช่องว่างที่ไม่มีรายการที่อยู่ติดกัน

section {
  rule: 2px solid black;
  rule-visibility-items: all;
}

สลับค่าในการสาธิตแบบสดเพื่อดูความแตกต่าง!

การตกแต่งแบบเคลื่อนไหว

ความกว้าง สี และการย่อหน้าของกฎสามารถเคลื่อนไหวได้ คุณสามารถเปลี่ยนค่าเมื่อวางเมาส์เหนือหรือเมื่อมีการเปลี่ยนแปลงสถานะอื่นๆ การสาธิตแดชบอร์ดที่แสดงก่อนหน้านี้จะเปลี่ยนสีและการย่อหน้าของกฎเมื่อวางเมาส์เหนือ

.dashboard {
  column-rule-color: #fbbf24, #34d399;
  rule-inset-junction: 10px;
  transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}

.dashboard:hover {
  column-rule-color: #3b82f6, #3b82f6;
  rule-inset-junction: 0px;
}

การสาธิต

การสาธิตทั้งหมดที่แสดงในโพสต์นี้มีอยู่ที่ เว็บไซต์การสาธิต Edge

บล็อกโพสต์การทดลองใช้สำหรับนักพัฒนาซอฟต์แวร์มีตัวอย่างเพิ่มเติมอีกหลายรายการ ซึ่งรวมถึงเพลย์กราวด์แบบอินเทอร์แอกทีฟ เมนูแฮมเบอร์เกอร์ เลย์เอาต์สมุดบันทึก และเลย์เอาต์สไตล์นิตยสารที่มีกริดซูโดกุ

การเปลี่ยนแปลงตั้งแต่การทดลองใช้สำหรับนักพัฒนาซอฟต์แวร์

หากคุณลองใช้การตกแต่งช่องว่างระหว่างช่วงทดลองใช้สำหรับนักพัฒนาซอฟต์แวร์ (Chrome 139) โปรดทราบการเปลี่ยนแปลงต่อไปนี้

• ฟีเจอร์นี้พร้อมใช้งานโดยค่าเริ่มต้น ไม่จำเป็นต้องใช้แฟล็ก
• ชื่อพร็อพเพอร์ตี้บางรายการได้รับการอัปเดตให้สอดคล้องกับข้อกำหนดล่าสุด (เช่น column-rule-outset และ row-rule-outset กลายเป็น column-rule-inset และ row-rule-inset)
• เพิ่มพร็อพเพอร์ตี้ column-rule-visibility-items และ row-rule-visibility-items
• เพิ่มการรองรับภาพเคลื่อนไหว

ใช้การตกแต่งช่องว่างได้แล้ววันนี้

การตกแต่งช่องว่างทำงานใน Chrome และ Edge ตั้งแต่เวอร์ชัน 149 เป็นต้นไป หากการตกแต่งช่องว่างเป็นเพียงการตกแต่ง ฟีเจอร์นี้เป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง ในเบราว์เซอร์ที่ไม่รองรับ ช่องว่างจะแสดงผลตามปกติโดยไม่มีการตกแต่งที่มองเห็นได้ เรากำลังพัฒนา Polyfill สำหรับเบราว์เซอร์ที่ยังไม่รองรับ

แจ้งข้อบกพร่องที่ เครื่องมือติดตามปัญหา Chromium ดูข้อมูลพื้นฐานเพิ่มเติมได้ที่ข้อกำหนดการตกแต่งช่องว่าง CSS

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

• ข้อกำหนดการตกแต่งช่องว่าง CSS
• บล็อกโพสต์การทดลองใช้สำหรับนักพัฒนาซอฟต์แวร์ (Chrome 139)
• ประกาศ Edge
• คำอธิบายใน GitHub