Bạn muốn trang web của mình dễ sử dụng hơn, đặc biệt là với người dùng bàn phím? Hãy tìm hiểu về
:focus-visible
trong CSS! Nó giúp bạn tạo kiểu cho các phần tử chỉ khi chúng được focus bằng bàn phím, cải thiện đáng kể khả năng tiếp cận.
Giới thiệu về :focus-visible
Thuộc tính
:focus-visible
là một pseudo-class trong CSS. Nó cho phép bạn áp dụng các kiểu dáng khác nhau cho một phần tử. Điều này chỉ xảy ra khi phần tử đó được focus bằng bàn phím hoặc một phương tiện hỗ trợ tương tự.
:focus
selector vẫn áp dụng kiểu dáng bất kể phương thức focus là gì (chuột, bàn phím, vv).
Điều này rất hữu ích để cải thiện khả năng tiếp cận trang web. Nó giúp người dùng dễ dàng nhận biết phần tử nào đang được focus. Họ sẽ không bị nhầm lẫn khi điều hướng bằng bàn phím.
Bạn có thể tìm hiểu thêm về CSS để nắm vững các khái niệm cơ bản và nâng cao.
Tại sao nên sử dụng :focus-visible?
Sử dụng
:focus-visible
mang lại nhiều lợi ích quan trọng cho trang web của bạn:
- Cải thiện khả năng tiếp cận: Giúp người dùng bàn phím dễ dàng điều hướng và sử dụng trang web.
- Nâng cao trải nghiệm người dùng: Tạo giao diện trực quan và thân thiện hơn cho tất cả người dùng.
- Tránh làm phiền người dùng chuột: Không hiển thị kiểu focus khi người dùng di chuột qua các phần tử.
- Tuân thủ các tiêu chuẩn web: Đảm bảo trang web của bạn tuân thủ các nguyên tắc về khả năng tiếp cận.
Sự khác biệt giữa :focus và :focus-visible
Cả
:focus
và
:focus-visible
đều liên quan đến trạng thái focus của một phần tử. Tuy nhiên, chúng có sự khác biệt quan trọng.
-
:focus: Áp dụng kiểu dáng cho phần tử khi nó được focus, bất kể phương thức focus (chuột, bàn phím,...). -
:focus-visible: Chỉ áp dụng kiểu dáng khi phần tử được focus bằng bàn phím hoặc một phương tiện hỗ trợ tương tự.
Ví dụ: Khi bạn nhấp chuột vào một nút,
:focus
sẽ được kích hoạt. Nếu bạn dùng phím Tab để di chuyển đến nút đó, cả
:focus
và
:focus-visible
sẽ được kích hoạt.
Cách sử dụng :focus-visible
Sử dụng
:focus-visible
rất đơn giản. Bạn chỉ cần thêm nó vào CSS selector của phần tử bạn muốn tạo kiểu.
button:focus-visible { outline: 2px solid blue; /* Thêm các kiểu dáng khác tùy ý */ }
Trong ví dụ trên, đường viền màu xanh lam sẽ chỉ xuất hiện khi nút được focus bằng bàn phím.
Bạn cũng có thể sử dụng nó để thay đổi màu nền, màu chữ, hoặc bất kỳ thuộc tính CSS nào khác.
Ví dụ nâng cao
Bạn có thể kết hợp
:focus-visible
với các selector khác để tạo kiểu phức tạp hơn.
a:focus-visible { color: red; text-decoration: underline; } input[type="text"]:focus-visible { border: 1px solid green; box-shadow: 0 0 5px green; }
Ví dụ này tạo kiểu khác nhau cho liên kết và ô nhập liệu khi chúng được focus bằng bàn phím.
Khả năng tương thích của trình duyệt
:focus-visible
được hỗ trợ rộng rãi bởi các trình duyệt hiện đại. Bạn có thể sử dụng nó một cách an toàn trong hầu hết các dự án web.
Để hỗ trợ các trình duyệt cũ hơn, bạn có thể sử dụng polyfill. Polyfill là một đoạn mã JavaScript giúp thêm chức năng mới vào các trình duyệt không hỗ trợ nó.
Kết luận
:focus-visible
là một công cụ mạnh mẽ để cải thiện khả năng tiếp cận và trải nghiệm người dùng trên trang web của bạn. Hãy bắt đầu sử dụng nó ngay hôm nay để tạo ra những trang web thân thiện và dễ sử dụng hơn!
:focus-visible
là gì?
:focus-visible
là một pseudo-class trong CSS. Nó chỉ áp dụng kiểu dáng khi một phần tử được focus bằng bàn phím hoặc phương tiện tương tự.
Tại sao nên sử dụng
:focus-visible
?
:focus-visible
cải thiện khả năng tiếp cận cho người dùng bàn phím. Nó cũng tránh hiển thị kiểu focus không cần thiết khi dùng chuột.
:focus-visible
khác với
:focus
như thế nào?
:focus
áp dụng kiểu dáng khi phần tử được focus bằng bất kỳ phương thức nào.
:focus-visible
chỉ áp dụng khi focus bằng bàn phím hoặc phương tiện hỗ trợ.
Trình duyệt nào hỗ trợ
:focus-visible
?
:focus-visible
được hỗ trợ rộng rãi bởi các trình duyệt hiện đại. Bạn có thể cần polyfill cho các trình duyệt cũ hơn.
Làm thế nào để sử dụng
:focus-visible
?
Chỉ cần thêm
:focus-visible
vào CSS selector của phần tử bạn muốn tạo kiểu. Ví dụ:
button:focus-visible { outline: 2px solid blue; }