พร็อพเพอร์ตี้กล่องตกแต่งใน Chrome 130

Rachel Andrew

Published: October 11, 2024

ใน Chrome 130 พร็อพเพอร์ตี้ CSS box-decoration-break ที่มีค่า clone พร้อมใช้งานแล้ว โดยรองรับการแยกส่วนแบบอินไลน์และแบบบล็อก โพสต์นี้จะอธิบายเหตุผลและวิธีใช้พร็อพเพอร์ตี้ดังกล่าว

การแยกส่วนแบบอินไลน์

การแยกส่วนแบบอินไลน์จะเกิดขึ้นเมื่อองค์ประกอบอินไลน์ เช่น สตริงข้อความ แยกออกเป็นหลายบรรทัด องค์ประกอบอินไลน์มีกล่อง ซึ่งโดยปกติแล้วคุณไม่จำเป็นต้องคำนึงถึง เว้นแต่จะพยายามเพิ่มพื้นหลังหรือเส้นขอบให้กับองค์ประกอบ ในตัวอย่างต่อไปนี้ ระบบจะเพิ่มพื้นหลังที่มี border-radius ให้กับ span เส้นขอบจะโค้งเฉพาะที่จุดเริ่มต้นและจุดสิ้นสุดของสตริง

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
}

ค่าเริ่มต้นของ box-decoration-break คือ slice ซึ่งจะทำให้กล่องมีลักษณะเป็นชิ้นๆ ดังที่เห็น อย่างไรก็ตาม box-decoration-break: clone ที่รองรับใหม่หมายความว่าแต่ละบรรทัดจะเริ่มต้นและสิ้นสุดด้วยเส้นขอบโค้ง

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
  box-decoration-break: clone;
}

การแยกส่วนแบบบล็อก

การแยกส่วนแบบบล็อกจะเกิดขึ้นหากคุณแบ่งเนื้อหาออกเป็นคอลัมน์ด้วยเลย์เอาต์แบบหลายคอลัมน์ หรือเมื่อคุณพิมพ์และเนื้อหาแยกออกเป็นหน้าๆ

ในตัวอย่างต่อไปนี้ เนื้อหาจะถูกแบ่งออกเป็นคอลัมน์ และแต่ละย่อหน้าจะมีเส้นขอบ ค่าเริ่มต้นของ slice จะทำให้กล่องถูกตัดที่ด้านล่างและด้านบนของคอลัมน์

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
}

เมื่อใช้ box-decoration-break: clone เมื่อกล่องถูกแยกส่วน แต่ละส่วนจะถูกห่อด้วยเส้นขอบ

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
  box-decoration-break: clone;
}

สิ่งเดียวกันนี้จะเกิดขึ้นหากคุณมีเส้นขอบในกล่องที่ถูกแยกส่วนเมื่อพิมพ์หน้า หากกล่องถูกแยกออกเป็น 2 หน้า เส้นขอบในกล่องจะสมบูรณ์ในหน้าแรก แล้วเปิดกล่องใหม่ในหน้าที่ 2