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

Rachel Andrew

เผยแพร่เมื่อ: 22 กันยายน 2026

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

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

  • <iframe><iframe> ที่ปรับขนาดตามพื้นที่โฆษณาจะปรับขนาดของตัวเองตามขนาดภายในของเอกสารที่ฝัง
  • โหมด scroll-marker-groupCSS เพิ่มโหมด links และ tabs เพื่อกำหนดค่าลำดับโฟกัสและความหมายเชิงการช่วยเหลือพิเศษของ เครื่องหมายการเลื่อน
  • CSS text-decoration-inset ช่วยให้คุณปรับ จุดเริ่มต้นและจุดสิ้นสุดของการตกแต่งข้อความได้

ปรับขนาดตามอุปกรณ์<iframe>

Chrome 154 เพิ่มการรองรับ iframe ที่ปรับขนาดตามอุปกรณ์ ซึ่งช่วยให้องค์ประกอบ <iframe> ในเอกสารหลักปรับขนาดให้พอดีกับการวางเลย์เอาต์ของเอกสารที่ฝัง ไว้เพื่อหลีกเลี่ยงการเลื่อนในเอกสารย่อย ซึ่งจะแทนที่ รูปแบบที่คุณวัดเนื้อหา iframe ด้วยตนเอง ส่งมิติข้อมูลด้วย postMessage() และอัปเดตขนาด iframe ในหน้าฝัง

หากต้องการกำหนดขนาด iframe ให้มีความสูงเท่ากับเนื้อหา ให้ใช้พร็อพเพอร์ตี้ frame-sizing CSS ในองค์ประกอบ <iframe> ในหน้าฝัง

.embed {
  width: 100%;
  frame-sizing: content-height;
}

เอกสารที่ฝังต้องเลือกใช้ด้วยโดยการใส่เอลิเมนต์ <meta name="responsive-embedded-sizing"> ใน <head> ดังนี้

<meta name="responsive-embedded-sizing" content="allow-origins=*">

ดูรายละเอียดและข้อมูลเพิ่มเติมได้ที่ iframe แบบปรับเปลี่ยนตามอุปกรณ์ใน Chrome 154

scroll-marker-group รูปแบบ CSS

พร็อพเพอร์ตี้ scroll-marker-group จะควบคุมว่าคอนเทนเนอร์เลื่อนจะสร้าง องค์ประกอบเสมือน ::scroll-marker-group ก่อนหรือหลังเนื้อหาหรือไม่ Chrome 154 ปรับปรุง scroll-marker-group ด้วย 2 โหมดที่กำหนดลำดับโฟกัสและความหมายด้านการช่วยเหลือพิเศษของ WAI-ARIA ของ ::scroll-marker-group และ ::scroll-marker ดังนี้

/* Links mode (default) */
scroll-marker-group: after links;

/* Tabs mode */
scroll-marker-group: before tabs;

CSS text-decoration-inset

โดยค่าเริ่มต้น การตกแต่งข้อความขององค์ประกอบ (เช่น ขีดใต้ ขีดบน หรือ ขีดทับ) จะมีความยาวเท่ากับข้อความที่แสดง text-decoration-insetพร็อพเพอร์ตี้ CSS ช่วยให้คุณปรับจุดเริ่มต้นและจุดสิ้นสุดของ การตกแต่งข้อความขององค์ประกอบ เพื่อให้มีการแทรก ขยาย หรือ เลื่อนเทียบกับขอบของข้อความที่ทำงานอยู่

text-decoration-inset รับค่า auto, ความยาว และเปอร์เซ็นต์โดยใช้ ไวยากรณ์แบบค่าเดียวหรือแบบ 2 ค่า เช่น หากต้องการแทรกทั้ง 2 ด้าน 10 พิกเซล ให้ทำดังนี้

text-decoration-inset: 10px;

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

ดูข้อมูลเพิ่มเติมได้ในtext-decoration-insetเอกสารประกอบใน MDN

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

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

ติดตาม

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

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