แพลตฟอร์มเว็บใหม่ในเดือนมิถุนายน

มาดูฟีเจอร์ที่น่าสนใจบางส่วนซึ่งเปิดตัวในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเบต้า ในช่วงเดือนมิถุนายน 2026 กัน

Rachel Andrew

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

การเปิดตัวเบราว์เซอร์เวอร์ชันเสถียร

Chrome 149, Chrome 150 และ Firefox 152 เปิดตัว ในเวอร์ชันเสถียรในช่วงเดือนมิถุนายน ไม่มีการเปิดตัว Safari เวอร์ชันเสถียรในเดือนนี้ โพสต์นี้ จะพูดถึงฟีเจอร์ใหม่ๆ ที่กำลังจะเปิดตัวในเว็บเบราว์เซอร์

หมายเหตุ: ข้อมูลความเข้ากันได้ของเบราว์เซอร์ที่ดึงมาจาก MDN จะรวมอยู่ในโพสต์เหล่านี้ และอาจยังไม่อัปเดตสำหรับการเปิดตัวเบราว์เซอร์ล่าสุด โพสต์จะแสดงข้อมูลที่ถูกต้องทันทีที่ปรากฏในการเผยแพร่ข้อมูลความเข้ากันได้ของเบราว์เซอร์

การปรับขนาดการควบคุมแบบฟอร์มด้วย field-sizing จะกลายเป็น Baseline

Firefox 152 เปิดตัวการรองรับพร็อพเพอร์ตี้ field-sizing CSS ซึ่งทำให้การกำหนดขนาดการควบคุมแบบฟอร์มอัตโนมัติเป็น Baseline ที่พร้อมใช้งานใหม่ใน เครื่องมือเบราว์เซอร์หลักทั้งหมด

พร็อพเพอร์ตี้ field-sizing ช่วยให้การควบคุมแบบฟอร์ม เช่น <textarea>, <input> และ <select> ย่อหรือขยายแบบไดนามิกให้พอดีกับเนื้อหา (field-sizing: content) แทนที่จะคงขนาดเริ่มต้นไว้ (field-sizing: fixed) ซึ่งจะช่วยลดความจำเป็นในการใช้ JavaScript เพื่อแก้ปัญหาชั่วคราว เมื่อสร้างช่องป้อนข้อความหรือกล่องข้อความที่ปรับขนาดตามที่ผู้ใช้พิมพ์

textarea {
  field-sizing: content;
}

Browser Support

• 123
• 123
• 152
• 26.2

Source

รูปร่างพื้นฐาน rect() และ xywh() ใน shape-outside จะกลายเป็น Baseline

เมื่อ Chrome 149 รองรับฟังก์ชันรูปร่าง rect() และ xywh() ในพร็อพเพอร์ตี้ shape-outside ตอนนี้รูปร่างพื้นฐานเหล่านี้จึงเป็น Baseline ที่พร้อมใช้งานในเบราว์เซอร์หลักๆ

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

Browser Support

• 149
• 149
• 149
• 17.2

Source

การปรับขนาดแบบอักษรโดยอัตโนมัติด้วย CSS text-fit

Chrome 150 เปิดตัวtext-fitพร็อพเพอร์ตี้ CSS ซึ่งช่วยให้นักพัฒนาแอปปรับขนาดแบบอักษรโดยอัตโนมัติให้พอดีกับความกว้างของ กล่องที่บรรจุ

.headline {
  text-fit: grow;
}

การตกแต่งช่องว่าง CSS

Chrome 149 เพิ่มการรองรับการตกแต่งช่องว่าง CSS ในเลย์เอาต์กริดและ Flexbox การตกแต่งช่องว่างช่วยให้คุณเพิ่มเส้นและการจัดรูปแบบลงในระยะห่างระหว่าง รายการกริดและรายการ Flex ได้โดยตรง ซึ่งคล้ายกับ column-rule ในเลย์เอาต์แบบหลายคอลัมน์

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

ดูข้อมูลเพิ่มเติมได้ที่การตกแต่งช่องว่าง: พร้อมใช้งานใน Chromium แล้ว

Browser Support

• 149
• 149
• x
• x

CSS background-clip: border-area

Chrome 150 เพิ่มการรองรับ background-clip: border-area จากพื้นหลัง CSS ระดับ 4

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

Browser Support

• x
• x
• x
• 18.2

สัญญาการเลื่อนแบบเป็นโปรแกรม

Chrome 150 อัปเดตวิธีการเลื่อนแบบเป็นโปรแกรม (scrollTo(), scrollBy() และ scrollIntoView()) เพื่อแสดงผล Promise

Promise ที่แสดงผลจะได้รับการแก้ไขเมื่อภาพเคลื่อนไหวการเลื่อนอย่างราบรื่นเสร็จสิ้น ซึ่งเป็นสัญญาณที่เชื่อถือได้สำหรับการทริกเกอร์การดำเนินการติดตามเมื่อการเลื่อน เสร็จสิ้น

การนำทางด้วยแป้นพิมพ์แบบประกาศด้วย focusgroup

Chrome 150 จะรองรับแอตทริบิวต์ focusgroup

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

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

ดูข้อมูลเพิ่มเติมจากคำอธิบาย Focusgroup

รองรับ WebSocket ใน Back-Forward Cache (bfcache)

ใน Chrome 149 ตอนนี้หน้าเว็บที่มีการเชื่อมต่อ WebSocket ที่ใช้งานอยู่จะเข้าสู่ Back-Forward Cache (bfcache) ได้แล้ว

ก่อนหน้านี้ การเชื่อมต่อ WebSocket แบบเปิดจะทำให้หน้าเว็บไม่มีสิทธิ์ใช้ bfcache ตอนนี้เบราว์เซอร์จะปิดการเชื่อมต่อ WebSocket ที่ใช้งานอยู่โดยอัตโนมัติเมื่อเข้าสู่ bfcache ซึ่งจะช่วยให้แคชหน้าเว็บและคืนค่าได้ทันทีเมื่อกลับไปที่หน้าเว็บนั้น

การกำหนดเวลาการตอบกลับชั่วคราวและส่วนหัวในเวลาของทรัพยากร

Firefox 152 เพิ่มการรองรับ firstInterimResponseStart และ finalResponseHeadersStart ในอินเทอร์เฟซ PerformanceResourceTiming

ซึ่งใช้เพื่อวัดระยะเวลาที่เบราว์เซอร์ใช้ในการรับการตอบกลับ HTTP ชั่วคราวและการตอบกลับ HTTP สุดท้ายหลังจากส่งคำขอตามลำดับ

Browser Support

• 115
• 115
• 152
• 26.4

Source

ปุ่มการทำงานสำหรับการแจ้งเตือน

Firefox 152 เพิ่มการรองรับปุ่มการทำงานของการแจ้งเตือนโดยใช้พร็อพเพอร์ตี้ actions ใน Notification และตัวเลือกใน ServiceWorkerRegistration.showNotification()

ตอนนี้คุณสามารถใส่ปุ่มการทำงานในการแจ้งเตือนของระบบปฏิบัติการและฟังการโต้ตอบของผู้ใช้เมื่อมีการแตะปุ่มได้แล้ว

Browser Support

• 53
• 18
• 152
• x

Source

การเปิดตัวเบราว์เซอร์เวอร์ชันเบต้า

เบราว์เซอร์เวอร์ชันเบต้าจะให้คุณได้ดูตัวอย่างฟีเจอร์ในเบราว์เซอร์เวอร์ชันเสถียร ถัดไป ตอนนี้เป็นเวลาที่เหมาะในการทดสอบฟีเจอร์ใหม่หรือการนำออกที่อาจส่งผลต่อเว็บไซต์ของคุณก่อนที่ทั่วโลกจะได้รับการเปิดตัว เบต้าเวอร์ชันใหม่ในเดือนนี้คือ Firefox 153 และ Safari 27

Firefox 153 เบต้าเปิดตัวการรองรับ Error.stackTraceLimit เพื่อกำหนดค่าความลึกของสแต็กเทรซที่บันทึกสูงสุด IDBObjectStore.getAllRecords() และ IDBIndex.getAllRecords() สำหรับการดึงข้อมูลที่จัดทำดัชนีไว้ และ RTCDtlsTransport.getRemoteCertificates() สำหรับการตรวจสอบความปลอดภัยของ WebRTC นอกจากนี้ นักพัฒนาส่วนเสริมยังได้รับ publicSuffix API ใหม่และเมธอด userScripts.execute() สำหรับการแทรกสคริปต์ตามต้องการด้วย

Safari 27 เวอร์ชันเบต้าเปิดตัวการจัดตำแหน่งจุดยึดที่รับรู้การเปลี่ยนรูป, :heading Pseudo-class สำหรับการจับคู่องค์ประกอบส่วนหัว, คีย์เวิร์ด revert-rule เพื่อย้อนกลับ เลเยอร์แบบเรียงซ้อน, การรองรับคีย์เวิร์ด stretch ในการกำหนดขนาดกล่อง และ :host:has() ตัวเลือกแบบผสม