ใหม่ใน Chrome 131

Mariko Kosaka
X

สิ่งที่จำเป็นต้องทราบมีดังนี้

และ Mariko Kosaka จะเป็นผู้ดูแลคุณในวันนี้ มาดูกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 131

การปรับปรุงการจัดรูปแบบของ <details> และ <summary>

ตอนนี้คุณมีตัวเลือกเพิ่มเติมในการจัดรูปแบบโครงสร้างขององค์ประกอบ <details> และ <summary> เพื่อสร้างวิดเจ็ตการเปิดเผยหรือวิดเจ็ตแบบแอคคอร์เดียน

การเปลี่ยนแปลงที่นำมาใช้ในรุ่นนี้ช่วยให้ใช้พร็อพเพอร์ตี้ display ได้ และเพิ่มองค์ประกอบจำลอง ::details-content เพื่อจัดสไตล์ส่วนที่ขยายและยุบ

ก่อนหน้านี้ คุณจะเปลี่ยนประเภทการแสดงผลขององค์ประกอบ details ไม่ได้ ตอนนี้เราได้ผ่อนปรนข้อจำกัดนี้แล้ว ซึ่งจะช่วยให้คุณใช้สิ่งต่างๆ เช่น เลย์เอาต์ตารางกริดหรือ Flex ได้

ในตัวอย่าง Accordion แบบพิเศษนี้ซึ่งประกอบด้วยองค์ประกอบ details หลายรายการ เมื่อขยายองค์ประกอบ details รายการใดรายการหนึ่ง เนื้อหาขององค์ประกอบนั้นจะวางไว้ข้าง summary

วิดเจ็ต Accordion ที่มีเลย์เอาต์ Flex

ซึ่งทำได้โดยใช้เลย์เอาต์ Flex ในองค์ประกอบ details นอกจากนี้ คุณยังลองใช้รูปแบบเลย์เอาต์เพิ่มเติมกับค่าการแสดงผลอื่นๆ เช่น grid ได้ด้วย

อ่านบทความตัวเลือกเพิ่มเติมสำหรับการจัดสไตล์ <details> ของ Bramus เพื่อดูคำอธิบายเชิงลึกเพิ่มเติม

@page กล่องระยะขอบ

เพิ่มการรองรับกล่องระยะขอบหน้าเว็บเมื่อพิมพ์เอกสารบนเว็บหรือส่งออกเป็น PDF

ช่องระยะขอบของหน้าช่วยให้คุณกำหนดเนื้อหาในพื้นที่ระยะขอบของหน้าได้ คุณจึงระบุส่วนหัวและส่วนท้ายที่กำหนดเองได้แทนที่จะใช้ส่วนหัวและส่วนท้ายในตัวซึ่งเบราว์เซอร์สร้างขึ้น

กำหนดระยะขอบของหน้าเว็บโดยใช้กฎ @page ใน CSS

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

ลักษณะและเนื้อหาของกล่องระยะขอบจะระบุด้วยพร็อพเพอร์ตี้ CSS ภายใน at-rule ที่แสดงถึงกล่องระยะขอบ 16 กล่องโดยใช้เนื้อหาที่สร้างขึ้น

สำหรับหมายเลขหน้า ระบบจะรองรับตัวนับด้วย page สำหรับหมายเลขหน้าปัจจุบัน และ pages สำหรับจำนวนหน้าทั้งหมด

อ่านบทความของ Rachel เรื่องเพิ่มเนื้อหาในขอบของหน้าเว็บเมื่อพิมพ์โดยใช้ CSS เพื่อดูคำอธิบายเชิงลึกเพิ่มเติม

และอีกมากมาย

และยังมีอีกมากมาย

  • การรองรับทรัพยากร SVG ภายนอกสําหรับ "clip-path", "fill", "stroke" และ "marker"
  • WebHID จะเปิดใช้ในบริบทของเวิร์กเกอร์เฉพาะ
  • ควบคุมลักษณะการทํางานของอีโมจิด้วยพร็อพเพอร์ตี้ CSS font-variant-emoji

อ่านเพิ่มเติม

ข้อมูลนี้เป็นเพียงไฮไลต์สำคัญบางส่วนเท่านั้น ดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 131 ได้ที่ลิงก์ต่อไปนี้

สมัครใช้บริการ

หากต้องการติดตามข่าวสารล่าสุด โปรดติดตามช่อง YouTube ของนักพัฒนาซอฟต์แวร์ Chrome แล้วคุณจะได้รับอีเมลแจ้งเตือนทุกครั้งที่เราเปิดตัววิดีโอใหม่

ฉันชื่อ Mariko Kosaka และทันทีที่ Chrome 132 เปิดตัว เราจะมาบอกคุณถึงสิ่งใหม่ๆ ใน Chrome