สิ่งใหม่ใน Chrome 142

Rachel Andrew

เผยแพร่: 28 ตุลาคม 2025

Chrome 142 กำลังเปิดตัวแล้ว และโพสต์นี้จะแชร์ฟีเจอร์หลักบางอย่าง จากการเปิดตัว อ่านบันทึกประจำรุ่นของ Chrome 142 ฉบับเต็ม

ไฮไลต์จากรุ่นนี้

:target-before และ:target-after คลาสเสมือน

Pseudo-class เหล่านี้จะตรงกับเครื่องหมายการเลื่อนที่อยู่ก่อนหรือหลังเครื่องหมายที่ใช้งานอยู่ (ตรงกับ :target-current) ภายในกลุ่มเครื่องหมายการเลื่อนเดียวกัน ตามที่กำหนดโดยลำดับของโครงสร้างแบบราบ

  • :target-before: ตรงกับเครื่องหมายการเลื่อนทั้งหมดที่อยู่ก่อนเครื่องหมายที่ใช้งานอยู่ในลำดับของโครงสร้างแบบแบนภายในกลุ่ม
  • :target-after: ตรงกับเครื่องหมายการเลื่อนทั้งหมดที่อยู่หลังเครื่องหมายที่ใช้งานอยู่ในลำดับของโครงสร้างแบบแบนภายในกลุ่ม

ไวยากรณ์ช่วงสำหรับการค้นหาคอนเทนเนอร์ของสไตล์และ if()

Chrome ปรับปรุงการค้นหาสไตล์ CSS และฟังก์ชัน if() โดยเพิ่มการรองรับไวยากรณ์ช่วง

ซึ่งจะขยายการค้นหาสไตล์ให้ครอบคลุมมากกว่าการจับคู่ค่าที่ตรงกันทุกประการ (เช่น style(--theme: dark)) นักพัฒนาซอฟต์แวร์สามารถใช้ตัวดำเนินการเปรียบเทียบ (เช่น > และ <) เพื่อเปรียบเทียบพร็อพเพอร์ตี้ที่กำหนดเอง ค่าตามตัวอักษร (เช่น 10px หรือ 25%) และค่าจากฟังก์ชันการแทนที่ เช่น attr() และ env() ทั้ง 2 ฝั่งต้องแปลงเป็นประเภทข้อมูลเดียวกันเพื่อให้การเปรียบเทียบถูกต้อง โดยจำกัดเฉพาะประเภทตัวเลขต่อไปนี้ <length>, <number>, <percentage>, <angle>, <time>, <frequency> และ <resolution>

ตัวอย่าง

เปรียบเทียบพร็อพเพอร์ตี้ที่กำหนดเองกับความยาวตามตัวอักษร

@container style(--inner-padding > 1em) {
  .card {
    border: 2px solid;
  }
}

เปรียบเทียบค่าตัวอักษร 2 ค่า

@container style(1em < 20px) {
  /* ... */
}

การใช้ช่วงรูปแบบใน if()

.item-grid {
  background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white);
}

ผู้กระตุ้นความสนใจ (แอตทริบิวต์ interestfor)

Chrome จะเพิ่มแอตทริบิวต์ interestfor ลงในองค์ประกอบ <button> และ <a> แอตทริบิวต์นี้จะเพิ่มลักษณะการทำงาน "ความสนใจ" ให้กับองค์ประกอบ เมื่อผู้ใช้แสดงความสนใจในองค์ประกอบ ระบบจะทริกเกอร์การดำเนินการในองค์ประกอบเป้าหมาย เช่น แสดงป๊อปโอเวอร์

User Agent จะตรวจหาเมื่อผู้ใช้แสดงความสนใจในองค์ประกอบผ่านวิธีการต่างๆ เช่น การวางเคอร์เซอร์เหนือองค์ประกอบ การกดปุ่มลัดพิเศษบนแป้นพิมพ์ หรือการกดองค์ประกอบบนหน้าจอสัมผัสค้างไว้ เมื่อแสดงหรือสูญเสียความสนใจ InterestEvent จะทำงานในเป้าหมาย ซึ่งมีการดำเนินการเริ่มต้นสำหรับป๊อปโอเวอร์ เช่น การแสดงและซ่อนป๊อปโอเวอร์

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

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

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

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

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