Progressive enhancement là gì?

Question

Accepted Answer

**Progressive enhancement** là một chiến lược xây dựng từ một **nền tảng** vững chắc, có chức năng (semantic HTML hoạt động ở mọi nơi) và sau đó *xếp chồng thêm* CSS cho phần trình bày và JavaScript cho hành vi phong phú hơn — để trải nghiệm cốt lõi vẫn hoạt động ngay cả khi các lớp trên thất bại. ## Ba lớp ```text 1. HTML → nội dung + chức năng (hoạt động không cần CSS/JS) 2. CSS → trình bày/layout (tăng cường vẻ ngoài) 3. JS → tính tương tác (tăng cường hành vi) ``` ## Một ví dụ cụ thể: một form ```html ``` ```js // Lớp 3: NẾU JS có sẵn, nâng cấp nó thành tìm kiếm AJAX trực tiếp form.addEventListener("submit", (e) => { e.preventDefault(); // nâng cấp lên fetch — không reload fetchResults(form.q.value); }); ``` Nếu JavaScript tải lỗi (mạng chập chờn, lỗi, bị chặn), form **vẫn hoạt động** qua việc submit native — người dùng vẫn có thể tìm kiếm. JS chỉ *tăng cường* nó. ## Progressive enhancement so với graceful degradation - **Progressive enhancement** — bắt đầu từ nền tảng, xây dựng *lên trên*. (Bottom-up.) - **Graceful degradation** — bắt đầu từ phiên bản đầy đủ tính năng, đảm bảo nó *xuống cấp* một cách chấp nhận được. (Top-down.) Progressive enhancement nhìn chung vững chắc hơn vì nền tảng được đảm bảo hoạt động. ## Tại sao điều này quan trọng Nó tạo ra các site bền bỉ, có accessibility, hiệu năng tốt: nội dung nằm trong HTML (tốt cho SEO, screen reader, và các thiết bị chậm/cũ), trang dùng được trước/không cần JS (tải cảm nhận nhanh hơn, hoạt động nếu một script lỗi), và các tăng cường là phần thưởng thêm chứ không phải yêu cầu. Trong một thế giới với đủ loại thiết bị, mạng và lỗi khác nhau, xây dựng trên một lõi HTML hoạt động được — thay vì giả định JS luôn chạy — giữ cho một site dùng được cho mọi người. Các framework hiện đại lặp lại điều này với server-side rendering và "nền tảng hoạt động trước, hydration tăng cường."