มีอะไรใหม่ใน Chrome 133

Rachel Andrew

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

ฟังก์ชัน attr() ขั้นสูงของ CSS

ฟีเจอร์นี้มาเสริมฟังก์ชัน attr() ที่มีอยู่ ซึ่งเป็นฟีเจอร์ที่ระบุไว้ใน CSS ระดับ 5 ซึ่งจะอนุญาตให้ใช้ประเภทอื่นๆ นอกเหนือจาก <string> และใช้ในพร็อพเพอร์ตี้ CSS ทั้งหมด (นอกเหนือจากการรองรับเนื้อหาองค์ประกอบจำลองที่มีอยู่)

ในตัวอย่างต่อไปนี้ ค่าของพร็อพเพอร์ตี้ color สำหรับ div ใช้ค่าจากแอตทริบิวต์ data-color ระบบจะแยกวิเคราะห์ค่าแอตทริบิวต์นี้เป็น <color> โดยใช้ attr() และ type() ค่าสำรองจะตั้งค่าเป็น red

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

ดูข้อมูลเพิ่มเติมในการอัปเกรด CSS attr()

การค้นหาคอนเทนเนอร์สถานะการเลื่อนของ CSS

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

คอนเทนเนอร์การค้นหาคือคอนเทนเนอร์การเลื่อนหรือองค์ประกอบที่ได้รับผลกระทบจากตําแหน่งการเลื่อนของคอนเทนเนอร์การเลื่อน คุณสามารถค้นหาสถานะต่อไปนี้ได้

  • stuck: คอนเทนเนอร์ที่ยึดตำแหน่งไว้ติดอยู่ที่ขอบใดขอบหนึ่งของกล่องเลื่อน
  • snapped: ขณะนี้คอนเทนเนอร์ที่วางแนวตามการเลื่อนมีการสแนปในแนวนอนหรือแนวตั้ง
  • scrollable: คอนเทนเนอร์การเลื่อนสามารถเลื่อนไปในทิศทางที่ค้นหาได้หรือไม่

คอนเทนเนอร์ประเภทใหม่: scroll-state ให้คุณค้นหาคอนเทนเนอร์ได้ เช่น

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

ดูข้อมูลเพิ่มเติมและดูตัวอย่างได้ในการค้นหาสถานะการเลื่อน CSS

CSS text-box, text-box-trim และ text-box-edge

พร็อพเพอร์ตี้ text-box-trim จะระบุด้านที่จะตัดด้านบนหรือด้านล่าง และพร็อพเพอร์ตี้ text-box-edge จะระบุวิธีตัดขอบ

พร็อพเพอร์ตี้เหล่านี้ช่วยให้คุณควบคุมการเว้นวรรคแนวตั้งได้อย่างแม่นยำโดยใช้เมตริกแบบอักษร

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

ดูวิธีใช้พร็อพเพอร์ตี้ใหม่เหล่านี้ใน CSS text-box-trim

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

แน่นอนว่ายังมีอีกมากมาย

  • Animation.overallProgressแสดงภาพเคลื่อนไหวที่สะดวกและสม่ำเสมอเกี่ยวกับความคืบหน้าของภาพเคลื่อนไหวตลอดการวนซ้ำ โดยไม่คำนึงถึงลักษณะของไทม์ไลน์
  • Node.prototype.moveBefore ช่วยให้คุณย้ายองค์ประกอบไปรอบๆ ต้นไม้ DOM ได้โดยไม่ต้องรีเซ็ตสถานะขององค์ประกอบ
  • อินเทอร์เฟซ FileSystemObserver จะแจ้งให้เว็บไซต์ทราบถึงการเปลี่ยนแปลงในระบบไฟล์
  • วิธีการ PublicKeyCredential getClientCapabilities() ช่วยให้คุณระบุได้ว่าไคลเอ็นต์ของผู้ใช้รองรับฟีเจอร์ WebAuthn ใดบ้าง

ดูรายละเอียดของฟีเจอร์เหล่านี้และฟีเจอร์อื่นๆ อีกมากมายที่อัปเดตใหม่ใน Chrome ได้ในบันทึกประจำรุ่น Chrome 133

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

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

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

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

ทันทีที่ Chrome 133 เปิดตัว เราจะมาแจ้งให้คุณทราบถึงสิ่งใหม่ๆ ใน Chrome