ข้ามเบราว์เซอร์โดยค่าเริ่มต้น: วิธีการทำงานของฟีเจอร์สำรองของ Baseline ในคำแนะนำในการพัฒนาเว็บที่ทันสมัย

Tara Agyemang

เผยแพร่เมื่อวันที่ 12 พฤศจิกายน 2026

ลองขอให้ Agent การเขียนโค้ดด้วย AI สร้างเคล็ดลับเครื่องมือหรือกล่องโต้ตอบโมดัล แล้วดูโค้ดที่เขียนอย่างละเอียด โดยส่วนใหญ่แล้ว User Agent จะดึง JavaScript เข้ามาเพื่อสร้างฟีเจอร์ที่ฝังอยู่ในเบราว์เซอร์ขึ้นมาใหม่ หากคุณแจ้งให้ Agent ใช้ฟีเจอร์ CSS หรือ HTML ที่ใหม่กว่าแทน Agent มักจะข้ามการตรวจหาฟีเจอร์และฟีเจอร์สำรอง การละเว้นนี้ทำให้ผู้ใช้ที่ใช้เบราว์เซอร์ที่ไม่รองรับเห็นหน้าเว็บที่ใช้งานไม่ได้

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

เหตุใด Agent การเขียนโค้ดจึงรองรับเบราว์เซอร์ไม่ถูกต้องหากไม่มีคำแนะนำ

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

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

ข้อมูลจากชุดการประเมินคำแนะนำในการพัฒนาเว็บที่ทันสมัยแสดงให้เห็นว่าช่องว่างนี้พบได้บ่อยเพียงใด สำหรับฟีเจอร์ที่ยังใช้งานไม่ได้ในเบราว์เซอร์หลักทั้งหมด ชุดการประเมินจะทดสอบการตรวจหาฟีเจอร์, กฎ @supports, ฟอลแบ็ก หรือ Polyfill แบบมีเงื่อนไข โมเดลที่ไม่มีคำแนะนำผ่านการตรวจสอบเหล่านี้เพียง 43% ของเวลาทั้งหมด เมื่อเปิดใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัย อัตราการผ่านจะเพิ่มขึ้นเป็น 87%

วิธีที่ข้อมูลพื้นฐานเป็นแนวทางสำหรับคำแนะนำทุกรายการ

คำแนะนำในการพัฒนาเว็บที่ทันสมัยจะใช้ Baseline เพื่อตัดสินใจว่าฟีเจอร์เว็บต้องใช้กลไกสำรองเมื่อใด Baseline จะติดตามการรองรับในชุดเบราว์เซอร์หลัก (Chrome, Edge, Firefox และ Safari บนเดสก์ท็อปและอุปกรณ์เคลื่อนที่) โดยมี 3 สถานะดังนี้

  • Baseline พร้อมใช้งานอย่างแพร่หลาย: ฟีเจอร์นี้ทำงานในเบราว์เซอร์หลักทั้งหมดมาเป็นเวลาอย่างน้อย 30 เดือน
  • Baseline พร้อมใช้งานใหม่: ฟีเจอร์นี้ใช้งานได้ในเบราว์เซอร์หลักทั้งหมด โดยเริ่มตั้งแต่วันที่เบราว์เซอร์ล่าสุดเพิ่มการรองรับ
  • ความพร้อมให้บริการแบบจำกัด: ฟีเจอร์นี้ยังไม่รองรับในเบราว์เซอร์หลักทั้งหมด

คำแนะนำในการพัฒนาเว็บที่ทันสมัยทุกรายการมีสถานะ Baseline ในตัวและข้อมูลเวอร์ชันเบราว์เซอร์จากแพ็กเกจ web-features เมื่อเอเจนต์การเขียนโค้ดโหลดคำแนะนำ เอเจนต์จะได้รับสถานะการรองรับ วันที่ออก และเวอร์ชันเบราว์เซอร์ที่แน่นอนของฟีเจอร์นั้นๆ พร้อมกับวิธีการใช้งาน เช่น

Browser support for <dialog closedby>: Limited availability.
Supported by: Chrome 134 (Mar 2025), Edge 134 (Mar 2025), and Firefox 141 (Jul 2025).
Unsupported in: Safari.

โดยค่าเริ่มต้น คำแนะนำในการพัฒนาเว็บที่ทันสมัยจะปฏิบัติตามกฎ 2 ข้อตามข้อมูลดังกล่าว ดังนี้

  • ฟีเจอร์พื้นฐานที่พร้อมใช้งานอย่างแพร่หลาย: Agent ของคุณจะใช้ฟีเจอร์เหล่านี้โดยตรงโดยไม่ต้องมีการตรวจหาฟีเจอร์เพิ่มเติมหรือโค้ดสำรอง กฎนี้ช่วยให้ฐานของโค้ดมีขนาดเล็กและหลีกเลี่ยงวิธีแก้ปัญหาที่ไม่จำเป็น
  • ฟีเจอร์ Baseline ที่เพิ่งพร้อมใช้งานและฟีเจอร์ที่มีจำนวนจำกัด: คำแนะนำสำหรับฟีเจอร์เหล่านี้รวมถึงกลยุทธ์สำรองที่ได้รับการยืนยันแล้ว User Agent ของคุณใช้ฟีเจอร์ที่ทันสมัยในกรณีที่รองรับ และมีทางเลือกสำรองที่ชัดเจนสำหรับเบราว์เซอร์อื่นๆ

รูปแบบการสำรอง 4 รูปแบบที่คำแนะนำในการพัฒนาเว็บที่ทันสมัยใช้ในทางปฏิบัติ

ฟีเจอร์บนเว็บแต่ละรายการไม่จำเป็นต้องใช้ฟังก์ชันสำรองประเภทเดียวกัน คำแนะนำในการพัฒนาเว็บที่ทันสมัยจะจับคู่ฟีเจอร์แต่ละรายการกับแนวทางสำรอง 1 ใน 4 แนวทาง โดยอิงตามลักษณะการทำงานของฟีเจอร์ในเบราว์เซอร์ที่ไม่รองรับ ดังนี้

รูปแบบสำรอง กรณีที่คำแนะนำในการพัฒนาเว็บที่ทันสมัยใช้ฟีเจอร์นี้
การเพิ่มประสิทธิภาพแบบต่อเนื่องโดยไม่มีโค้ดสำรอง ฟีเจอร์ตกแต่งหรือฟีเจอร์เสริมที่เบราว์เซอร์ที่ไม่รองรับสามารถข้ามได้อย่างปลอดภัยโดยไม่ทำให้เลย์เอาต์หรือลักษณะการทำงานเสียหาย
การตรวจหาฟีเจอร์ CSS ด้วยกฎ @supports สไตล์ภาพหรือเลย์เอาต์ที่ขึ้นอยู่กับฟีเจอร์ CSS ที่ใหม่กว่าและอาจดูไม่สมบูรณ์หากใช้เพียงบางส่วน
JavaScript ที่กำหนดเองแบบน้ำหนักเบา แอตทริบิวต์ HTML หรือ API แบบอินเทอร์แอกทีฟที่ต้องใช้สคริปต์ขนาดเล็กที่ไม่มีทรัพยากร Dependency เพื่อจำลองลักษณะการทำงานในเบราว์เซอร์รุ่นเก่า
Polyfill ที่โหลดแบบมีเงื่อนไข ฟีเจอร์ CSS หรือ JavaScript ขนาดใหญ่ที่ต้องใช้ Polyfill ที่ผ่านการตรวจสอบแล้วซึ่งโหลดแบบไดนามิกเฉพาะเมื่อไม่มีการรองรับแบบเนทีฟ

การเพิ่มประสิทธิภาพแบบต่อเนื่องโดยไม่มีโค้ดสำรอง

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

ตัวอย่างเช่น การประกาศ CSS text-wrap: balance (Baseline พร้อมใช้งานใหม่) จะทำให้ความยาวบรรทัดในส่วนหัวเท่ากัน

.balanced {
  text-wrap: balance;
}

Speculation Rules API (มีจำนวนจำกัด) จะดึงข้อมูลล่วงหน้าหรือแสดงผลหน้าเว็บที่กำลังจะมาถึงล่วงหน้า เบราว์เซอร์ที่ไม่รองรับจะข้ามบล็อก <script type="speculationrules"> และการประกาศ CSS ที่ไม่รู้จักอย่างปลอดภัย

<script type="speculationrules">
  {
    "prefetch": [{
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

ลักษณะการทำงานนี้ทำให้ Agent เพิ่มฟีเจอร์เหล่านี้ได้โดยตรงโดยไม่ต้องใช้โค้ดสำรองเพิ่มเติม

การตรวจหาฟีเจอร์ CSS ด้วยกฎ @supports

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

เช่น การค้นหาคอนเทนเนอร์ที่ยึดไว้ (container-type: anchored, มีจำนวนจำกัด) ในเคล็ดลับเครื่องมือที่จัดตำแหน่งไว้ช่วยให้คุณพลิกลูกศรของเคล็ดลับเครื่องมือเมื่อพลิกใกล้ขอบของวิวพอร์ตได้ ในเบราว์เซอร์ที่ไม่รองรับการค้นหาคอนเทนเนอร์ที่ยึดตำแหน่ง ลูกศรจะตรวจจับการพลิกไม่ได้และอาจชี้ไปผิดทาง คำแนะนำในการพัฒนาเว็บที่ทันสมัยจะสั่งให้ Agent รวมรูปแบบลูกศรไว้ในกฎ @supports (container-type: anchored) เพื่อให้ลูกศรเริ่มต้นปรากฏเฉพาะในเบราว์เซอร์ที่รองรับกฎการพลิก @container anchored() ด้วย

@supports (container-type: anchored) {
  .tooltip-content::before {
    content: "▼";
    position: absolute;
    inset-block-end: 0;
  }
}

@container anchored(fallback: flip-block) {
  .tooltip-content::before {
    content: "▲";
    inset-block-start: 0;
    inset-block-end: auto;
  }
}

JavaScript ที่กำหนดเองแบบน้ำหนักเบา

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

ตัวอย่างเช่น แอตทริบิวต์ closedby="any" ในองค์ประกอบ <dialog> (มีจำนวนจำกัด) ช่วยให้ผู้ใช้ปิดกล่องโต้ตอบโมดัลได้โดยคลิกฉากหลัง สำหรับเบราว์เซอร์ที่ไม่รองรับแอตทริบิวต์ closedby คู่มือนี้จะมีฟังก์ชันรอคลิกขนาดเล็กที่ตรวจสอบออบเจ็กต์ HTMLDialogElement.prototype ก่อน ดังนี้

const dialog = document.querySelector('dialog');

if (!('closedBy' in HTMLDialogElement.prototype)) {
  dialog.addEventListener('click', (event) => {
    if (event.target !== dialog) return;

    const rect = dialog.getBoundingClientRect();
    const clickedInDialog =
      rect.top <= event.clientY &&
      event.clientY <= rect.top + rect.height &&
      rect.left <= event.clientX &&
      event.clientX <= rect.left + rect.width;

    if (!clickedInDialog) {
      dialog.close();
    }
  });
}

Polyfill ที่โหลดแบบมีเงื่อนไข

สำหรับฟีเจอร์แพลตฟอร์มขนาดใหญ่ เช่น การกำหนดตำแหน่ง Anchor ของ CSS (มีจำนวนจำกัด) หรือ Temporal API (มีจำนวนจำกัด) การเขียนฟังก์ชันสำรองที่กำหนดเองด้วยตนเองนั้นไม่สามารถทำได้จริง ในขณะเดียวกัน การรวม Polyfill สำหรับผู้ใช้ทุกคนจะเพิ่มค่าใช้จ่ายในการดาวน์โหลดเพิ่มเติมสำหรับเบราว์เซอร์ที่รองรับฟีเจอร์นี้อยู่แล้ว

ในกรณีเหล่านี้ คำแนะนำในการพัฒนาเว็บที่ทันสมัยจะสั่งให้ Agent ตรวจสอบการรองรับก่อน และโหลด Polyfill ที่ตรวจสอบแล้วแบบไดนามิกด้วยนิพจน์ import() จาก Bundler หรือ CDN เบราว์เซอร์ที่รองรับจะดาวน์โหลดโค้ดเพิ่มเติมเป็นศูนย์ ในขณะที่เบราว์เซอร์รุ่นเก่าจะดึงข้อมูล Polyfill ตามต้องการ

if (!CSS.supports('anchor-name: --a')) {
  await import('@oddbird/css-anchor-positioning');
}

ปรับแต่งเป้าหมายการรองรับเบราว์เซอร์ของโปรเจ็กต์

โดยค่าเริ่มต้น คำแนะนำในการพัฒนาเว็บที่ทันสมัยจะถือว่าฟีเจอร์ที่พร้อมใช้งานในวงกว้างตาม Baseline นั้นปลอดภัยต่อการใช้งานโดยไม่ต้องมีทางเลือกสำรอง โดยต้องมีฟีเจอร์สำรองสำหรับฟีเจอร์ที่เพิ่งพร้อมใช้งานและฟีเจอร์ที่มีความพร้อมใช้งานแบบจำกัดในเกณฑ์พื้นฐาน

โปรเจ็กต์ของคุณอาจมีข้อกำหนดเบราว์เซอร์ที่แตกต่างกัน เช่น คุณอาจกำหนดเป้าหมายเป็นปีที่เจาะจงของ Baseline, สร้างสำหรับแอป Electron หรือยกเว้น Polyfill เพื่อให้ Bundle มีขนาดเล็ก

คุณสามารถกำหนดนโยบายการรองรับเบราว์เซอร์ที่กำหนดเองได้ในไฟล์ AGENTS.md หรือ CLAUDE.md ของโปรเจ็กต์ ดังนี้

## Browser support policy

- Target **Baseline 2024** or earlier. Omit fallbacks and `@supports` blocks for features that reached Baseline in or before 2024.
- Allow **Baseline Newly available** features when paired with a custom fallback of 20 lines or fewer.
- Don't add polyfill dependencies. Prefer CSS `@supports` rules or built-in HTML fallbacks instead.

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

ทดสอบทั้งเส้นทางสมัยใหม่และเส้นทางสำรอง

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

เมื่อทดสอบในเบราว์เซอร์เดียว คุณจะยืนยันโค้ดได้เพียงสาขาเดียวเท่านั้น ตัวอย่างเช่น Chrome และ Firefox เรียกใช้แอตทริบิวต์ closedby="any" แบบเนทีฟในองค์ประกอบ <dialog> ขณะที่ Safari เรียกใช้ JavaScript สำรองแบบคลิกนอกองค์ประกอบ หากคุณตรวจสอบกล่องโต้ตอบใน Chrome เพียงอย่างเดียว Listener สำรองนั้นจะไม่ทำงานในระหว่างการทดสอบ

หากต้องการยืนยันเส้นทางโค้ดทั้ง 2 เส้นทาง ให้เชื่อมต่อ Agent การเขียนโค้ดกับเครื่องมือเบราว์เซอร์หลายรายการพร้อมกัน โดยทำดังนี้

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

เริ่มต้นใช้งานคำแนะนำในการพัฒนาเว็บที่ทันสมัย

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

npx modern-web-guidance@latest install

หากคุณติดตั้งเวอร์ชันก่อนหน้าไว้ ให้เรียกใช้คำสั่งอัปเดตเพื่ออัปเกรดเป็นเวอร์ชัน 1.0 ดังนี้

npx modern-web-guidance@latest update

นอกจากนี้ คุณยังติดตั้งคำแนะนำในการพัฒนาเว็บที่ทันสมัยผ่านมาร์เก็ตเพลสปลั๊กอินสำหรับ Claude Code, Codex, Cursor, Antigravity, GitHub Copilot, WebStorm, Kimi Code และ Grok ได้ด้วย

ดูข้อมูลเพิ่มเติมได้จากแหล่งข้อมูลต่อไปนี้