Microsoft อัปเดตฟีเจอร์ Microsoft Edge สำหรับนักพัฒนา เพิ่มสไตล์ Layout Gaps และระบบย้าย Origin ของ PWA

สรุปความคืบหน้าเครื่องมือนักพัฒนาบน Microsoft Edge เผยฟีเจอร์ CSS Gap Decorations และระบบจัดการ Keyboard Accessibility

Microsoft  สรุปเนื้อหา (New in Edge for developers) ประจำวันที่ 7 กรกฎาคม 2026 เพื่อสรุปความคืบหน้าของ Microsoft Edge เน้นการรองรับฟีเจอร์ CSS สมัยใหม่ การเพิ่มประสิทธิภาพการเข้าถึง และการจัดการ Progressive Web Apps (PWA)

การตกแต่งและจัดสไตล์เครื่องมือ Layout Gaps

ฟีเจอร์ CSS gap decorations ช่วยให้นักพัฒนาสามารถใส่สไตล์ให้กับช่องว่างระหว่างไอเทมในเลย์เอาต์รูปแบบ flex, grid และ multi-column ได้โดยตรง โดยไม่ต้องพึ่งพาเทคนิค border hacks, pseudo-elements หรือการเพิ่มโครงสร้าง DOM elements ที่ไม่จำเป็น ตัวคุณสมบัติใหม่อย่าง row-rule, การขยายความสามารถของ column-rule และ rule shorthand จะรองรับทั้งการใส่สี รูปแบบแพทเทิร์น และไวยากรณ์ repeat() เพื่อช่วยให้การออกแบบมีความสม่ำเสมอและใช้โค้ด CSS น้อยที่สุด

ดังตัวอย่างโครงสร้างโค้ด

.grid {
  display: grid;
  gap: 16px;
  row-rule: 1px solid #ccc;
  column-rule: 2px solid #333;
}

ปรับปรุง Keyboard Accessibility ด้วย focusgroup

แอตทริบิวต์ HTML ใหม่ในชื่อ focusgroup จะช่วยระบุการทำงานของปุ่มลูกศรบนคีย์บอร์ดสำหรับการควบคุม composite widgets เช่น แถบเครื่องมือ (toolbars), แท็บ (tabs) หรือเมนู (menus) ได้ทันที ทำให้นักพัฒนาไม่จำเป็นต้องเขียนโค้ด JavaScript ในลักษณะ roving tabindex ด้วยตนเอง เนื่องจากระบบจะจัดการปุ่มลูกศรและการจดจำโฟกัส (focus memory) ให้โดยอัตโนมัติ

การย้ายระบบ PWA ไปยัง Origin ใหม่

นักพัฒนาสามารถย้ายระบบ Progressive Web App (PWA) ไปยังเครือข่ายชื่อโดเมนเดิมที่เป็นแบบ same-site origin ได้อย่างราบรื่น โดยที่ตัวแอปพลิเคชันยังคงรักษาประวัติการติดตั้งของผู้ใช้และสิทธิ์การเข้าถึง (permissions) ต่างๆ เอาไว้ได้ จากเดิมที่ตัวตนของ PWA จะถูกผูกไว้กับ web origin (เช่น example.com/app) ซึ่งหากมีการเปลี่ยนโดเมน ผู้ใช้จะต้องสั่งถอนการติดตั้งและติดตั้งใหม่ด้วยตนเอง แต่ระบบใหม่นี้จะช่วยให้การย้ายไปยังโดเมนย่อย เช่น app.example.com ดำเนินการได้ทันทีโดยไม่รบกวนการใช้งานของผู้ใช้

ฟีเจอร์แพลตฟอร์มเว็บอื่นๆ ที่เพิ่มเข้ามาในรุ่นล่าสุด

• image-rendering: crisp-edges: ขยายขนาดรูปภาพโดยยังคงรักษาความคมชัดและขอบของภาพ โดยไม่ทำให้เกิดการเบลอหรือสีเพี้ยน
• OpaqueRange สำหรับหน้าฟอร์ม: วัดค่า ไฮไลท์ และล็อกตำแหน่ง UI เข้ากับข้อความภายในแท็ก input และ textarea โดยไม่ต้องใช้เทคนิค mirror-div hacks
• เพิ่มประสิทธิภาพ Async Clipboard API: ชะลอขั้นตอนการอ่านข้อมูล clipboard จนกว่าจะมีการเรียกใช้งานฟังก์ชัน getType() เพื่อลดการใช้ทรัพยากรระบบ
• text-fit: ปรับขนาดฟอนต์ของข้อความให้พอดีกับความกว้างของกล่องข้อความโดยอัตโนมัติ
• ฟังก์ชัน light-dark() สำหรับรูปภาพ: สลับการแสดงผลรูปภาพตามโหมดการแสดงผล (Color Scheme) ที่ผู้ใช้เลือกใช้งาน
• flex-wrap: balance: จัดกระจายเนื้อหาภายในโครงสร้าง flexbox layout ให้มีความสมดุลในทุกๆ บรรทัด
• scrollBy() / scrollTo() completion promises: สั่งรันโค้ดทันทีเมื่อการทำ smooth scrolling สิ้นสุดลง โดยไม่ต้องตั้งเวลารอหรือตรวจสอบสถานะการสกรอลล์ซ้ำๆ

เครื่องมือใหม่ที่เปิดให้ทดสอบในรูปแบบ Preview

Microsoft ได้เปิดให้ทดสอบฟีเจอร์ระยะเริ่มต้นผ่านระบบ Origin Trial เพื่อเก็บข้อมูลจากนักพัฒนา ดังนี้

• Network Efficiency Guardrails: ระบบตรวจจับและตรวจสอบประสิทธิภาพการโหลดหน้าเว็บในสภาพแวดล้อมใช้งานจริง (Production) เพื่อช่วยให้ทีมพัฒนาค้นพบจุดที่ทำให้ประสิทธิภาพลดลงจากการฝังคอนเทนต์ภายนอก (Third-party) ได้โดยอัตโนมัติ
• แท็ก HTML install ใหม่: แท็ก <install></install> ช่วยเพิ่มปุ่มติดตั้งเว็บแอปพลิเคชันที่เบราว์เซอร์ให้ความปลอดภัยโดยไม่ต้องพึ่งพา JavaScript และสามารถระบุแอตทริบิวต์ installurl สำหรับสร้างคลังแอปพลิเคชันเพื่อติดตั้งแอปข้ามโดเมนได้
• CSS Grid Lanes: รูปแบบเลย์เอาต์ใหม่ที่ช่วยจัดวางไอเทมในพื้นที่ว่างถัดไปโดยอัตโนมัติ ทำให้ได้เลย์เอาต์แนว masonry ที่มีประสิทธิภาพโดยไม่ต้องระบุความสูงของแถวหรือพึ่งพา JavaScript
• โมเดลปัญญาประดิษฐ์ On-Device AI: เปิดทดสอบโมเดลภาษาขนาดเล็ก Aion-1.0-Instruct สำหรับใช้งานร่วมกับ Prompt API และ Writing Assistance APIs บน Microsoft Edge ซึ่งมีขนาดเล็ก ทำงานได้รวดเร็ว และใช้พลังงานน้อยกว่า Phi-4-mini รวมถึงขยายการรองรับอุปกรณ์เพิ่มขึ้น นอกจากนี้ในเวอร์ชัน Canary หรือ Dev 150 ยังรองรับ WebSpeech API สำหรับแปลงเสียงเป็นข้อความด้วยโมเดลภายในเครื่องเพื่อความเป็นส่วนตัวและลดต้นทุนระบบเครือข่าย

ความคืบหน้าโครงการ Interop 2026 และความร่วมมือด้านเว็บ

จากการเข้าร่วมโครงการ Interop ตลอดระยะเวลา 5 ปี เพื่อร่วมมือกับผู้พัฒนาเบราว์เซอร์รายอื่นในการลดปัญหาความเข้ากันไม่ได้ของซอร์สโค้ด ผลลัพธ์ในโครงการ Interop 2026 ช่วงเดือนมกราคมถึงมิถุนายน 2026 พบว่า Microsoft Edge สามารถเพิ่มอัตราการผ่านการทดสอบ (Test Pass Rate) จากเดิม 77% ขึ้นมาเป็น 97% แล้ว โดยทีมงานกำลังเร่งพัฒนาฟีเจอร์ Scoped custom element registries และ WebTransport เพิ่มเติม นอกจากนี้ยังได้จับมือกับทีม Google Chrome เพื่อพัฒนาโปรเจกต์ Modern Web Guidance เพื่อสร้างทักษะและแนวทางปฏิบัติที่ดีที่สุด (Best Practices) สำหรับให้นักพัฒนานำไปประยุกต์ใช้งานร่วมกับ AI Coding Agents ในการสร้างแอปพลิเคชันต่อไป

ที่มา: Microsoft Edge Web Platform Team