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

Rachel Andrew

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

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

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

ทันทีที่ Chrome 133 เปิดตัว เราจะมาบอกคุณว่ามีอะไรใหม่ ใน Chrome บ้าง