🚀 Thuộc tính inert – Nhỏ nhưng "đáng tiền" cho dev & user

Đôi khi một thay đổi nhỏ cũng đủ làm trải nghiệm dev và người dùng mượt mà hơn hẳn. Và inert chính là một ví dụ.

Trước khi có inert, việc chặn tương tác với background sau modal khá “lằng nhằng”:

• Phải thêm pointer-events: none; cho cả đống phần tử.
• Dùng JavaScript để remove focus khỏi background.
• Trap focus thủ công trong modal để đảm bảo accessibility.

👉 Kết quả: code vừa rối vừa dễ lỗi.

🔒 Khi bạn thêm inert vào một phần tử

Chỉ với một keyword ngắn gọn, bạn có thể:

✨ Vô hiệu hóa hoàn toàn phần tử và mọi nội dung bên trong.

✨ Ngăn người dùng click, tab hay tương tác ngoài ý muốn.

✨ Khiến trình đọc màn hình bỏ qua khu vực đó – cực hữu ích cho accessibility.

Nó cực kỳ phù hợp cho modals và pop-up!

Hãy thử tưởng tượng bạn đang làm modal hay popup. Bình thường, việc chặn tương tác với phần còn lại của trang khá lằng nhằng. Nhưng với inert, chỉ cần một dòng là xong – người dùng sẽ chỉ tập trung vào modal, không còn lo bị phân tâm.

Điều tuyệt nhất là gì?

👉 Tất cả các trình duyệt lớn đều đã hỗ trợ, với độ phủ hơn 94%. Nói cách khác, bạn có thể dùng ngay mà không sợ "đụng" compatibility issues.

Đơn giản. Gọn gàng. Hiệu quả.

Và tất nhiên, accessibility tốt hơn cũng đồng nghĩa SEO ngon hơn. 🚀

Tham khảo tại: https://web.dev/articles/inert?hl=vi