Progressive enhancement คือกลยุทธ์ในการสร้างจากฐาน ที่มั่นคงและใช้งานได้ (HTML ที่เข้าใจความหมายและใช้งานได้ทุกที่) จากนั้นจึง เพิ่ม CSS สำหรับการนำเสนอและ JavaScript สำหรับพฤติกรรมที่สมบูรณ์ยิ่งขึ้น — เพื่อให้ประสบการณ์หลักใช้งานได้แม้ว่าเลเยอร์บนจะล้มเหลว
1. HTML → content + functionality (works with no CSS/JS)
2. CSS → presentation/layout (enhances appearance)
3. JS → interactivity (enhances behavior)
<!-- Layer 1: works on its own — submits to the server, full page reload -->
<form action="/search" method="get">
<input name="q" type="search" required />
<button>Search</button>
</form>
// Layer 3: IF JS is available, enhance it into a live AJAX search
form.addEventListener("submit", (e) => {
e.preventDefault(); // upgrade to fetch — no reload
fetchResults(form.q.value);
});
หาก JavaScript ไม่สามารถโหลด (เครือข่ายไม่เสถียร ข้อผิดพลาด ถูกบล็อก) แบบฟอร์มก็ยังคง ใช้งานได้ ผ่านการส่งแบบดั้งเดิม — ผู้ใช้ยังสามารถค้นหาได้ JS เพียง ปรับปรุง มันเท่านั้น
Progressive enhancement โดยทั่วไปมั่นคงกว่า เพราะว่าฐานรากรับประกันว่าจะใช้งานได้
มันสร้างไซต์ที่ยืดหยุ่น เข้าถึงได้ และมีประสิทธิภาพ: เนื้อหาอยู่ใน HTML (ดีสำหรับ SEO ตัวอ่านหน้าจอ และอุปกรณ์ช้า/เก่า) หน้าสามารถใช้งานได้ก่อน/ไม่มี JS (การโหลดที่รู้สึกเร็วขึ้น ใช้งานได้หากสคริปต์ผิดพลาด) และปรับปรุงคือโบนัสไม่ใช่ข้อกำหนด
ในโลกของอุปกรณ์ เครือข่าย และความล้มเหลวที่หลากหลาย การสร้างบน HTML คอร์ที่ใช้งานได้ — แทนที่จะสมมติว่า JS ทำงานเสมอ — ทำให้ไซต์สามารถใช้งานได้สำหรับทุกคน
เฟรมเวิร์กสมัยใหม่สะท้อนเสียงนี้ด้วย server-side rendering และ »แพลตฟอร์มใช้งานได้ก่อน การ hydrate จะปรับปรุง«