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

Rachel Andrew

เผยแพร่: 30 มิถุนายน 2026

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

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

  • พร็อพเพอร์ตี้ text-fit ของ CSS จะปรับขนาดแบบอักษรให้พอดีกับกล่องที่บรรจุ
  • Focusgroup มีการนำทางด้วยปุ่มลูกศรแบบประกาศสำหรับคอมโพเนนต์ของเว็บ
  • CSS background-clip: border-area ช่วยให้คุณสร้างเส้นขอบแบบไล่ระดับสีได้โดยตรง

พร็อพเพอร์ตี้ text-fit ของ CSS

พร็อพเพอร์ตี้ text-fit จะปรับขนาดแบบอักษรของโหนดข้อความให้พอดีกับความกว้างของกล่องที่บรรจุ

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

Focusgroup

แอตทริบิวต์ focusgroup ช่วยให้คุณประกาศการนำทางด้วยแป้นลูกศรของวิดเจ็ตแบบคอมโพสิต แท็บหยุดที่รับประกัน และการจดจำโฟกัสล่าสุด ซึ่งจะแทนที่สคริปต์ tabindex แบบเคลื่อนที่ที่เขียนด้วยมือ 

<div focusgroup="toolbar wrap" aria-label="Formatting">
  <button>Bold</button>
  <button>Italic</button>
  <button>Underline</button>
</div>

CSS background-clip: border-area

ใช้ค่า border-area สำหรับพร็อพเพอร์ตี้ background-clip ของ CSS background-clip: border-area จะตัดพื้นหลังขององค์ประกอบไปยังพื้นที่ที่วาดด้วยเส้นขอบ โดยจะพิจารณา border-width และ border-style ขณะที่ละเว้นความโปร่งใสจาก border-color

ซึ่งช่วยให้คุณสร้างเส้นขอบแบบไล่ระดับสีได้โดยตรงใน CSS โดยไม่ต้องใช้border-imageวิธีแก้ปัญหา

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

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

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

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

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