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

Rachel Andrew

เผยแพร่: 11 ตุลาคม 2024

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

การแยก Fragment ย่อยในบรรทัด

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