Lớp giả Bộ chọn này rất hữu ích để cung cấp một chỉ báo lấy nét khác dựa trên phương thức đầu vào của người dùng [chuột so với bàn phím]. Trong ví dụ này, bộ chọn :focus-visible
áp dụng trong khi một phần tử phù hợp với lớp giả :focus
và UA [tác nhân người dùng] xác định thông qua các heuristic rằng trọng tâm nên được thể hiện rõ về phần tử. [Nhiều trình duyệt hiển thị "vòng lấy nét" theo mặc định trong trường hợp này.]:focus-visible
pseudo-class applies while an element matches the :focus
pseudo-class and the UA [User Agent] determines via heuristics that the focus should be made evident on the element. [Many browsers show a "focus ring" by default in this case.]Thử nó
Cú pháp
Ví dụ
Ví dụ cơ bản
:focus-visible
sử dụng hành vi của UA để xác định thời điểm phù hợp. So sánh những gì xảy ra khi bạn nhấp vào các điều khiển khác nhau với chuột, so với khi bạn sử dụng chúng bằng cách sử dụng bàn phím. Lưu ý sự khác biệt trong hành vi từ các yếu tố được tạo kiểu với :focus
.
Default styles
:focus only
:focus-visible only
input,
button {
margin: 10px;
}
.focus-only:focus {
outline: 2px solid black;
}
.focus-visible-only:focus-visible {
outline: 4px dashed darkorange;
}
Cung cấp A: Nằm tập trung dự phòng
Nếu mã của bạn phải hoạt động trong các phiên bản trình duyệt cũ không hỗ trợ :focus-visible
, hãy kiểm tra các hỗ trợ của :focus-visible
với
input,
button {
margin: 10px;
}
.focus-only:focus {
outline: 2px solid black;
}
.focus-visible-only:focus-visible {
outline: 4px dashed darkorange;
}
0 và lặp lại kiểu tập trung tương tự trong đó, nhưng bên trong quy tắc :focus
. Lưu ý rằng ngay cả khi bạn không chỉ định bất cứ điều gì cho :focus
, các trình duyệt cũ sẽ chỉ đơn giản là hiển thị phác thảo gốc, có thể là đủ.
Button with fallback
Button without fallback
.button {
margin: 10px;
border: 2px solid darkgray;
border-radius: 4px;
}
.button:focus-visible {
/* Draw the focus when :focus-visible is supported */
outline: 3px solid deepskyblue;
outline-offset: 3px;
}
@supports not selector[:focus-visible] {
.button.with-fallback:focus {
/* Fallback for browsers without :focus-visible support */
outline: 3px solid deepskyblue;
outline-offset: 3px;
}
}
Mối quan tâm tiếp cận
Tầm nhìn thấp
Hãy chắc chắn rằng chỉ báo lấy nét trực quan có thể được nhìn thấy bởi những người có tầm nhìn thấp. Điều này cũng có lợi cho bất cứ ai sử dụng màn hình trong một không gian sáng rực [như bên ngoài dưới ánh mặt trời]. WCAG 2.1 SC 1.4.11 Độ tương phản phi văn bản yêu cầu chỉ báo lấy nét trực quan ít nhất là 3 đến 1.
- Các chỉ số lấy nét trực quan có thể truy cập: Cung cấp cho trang web của bạn một số trọng tâm! Mẹo thiết kế các chỉ số lấy nét hữu ích và có thể sử dụng
Nhận thức
Có thể không rõ ràng là tại sao chỉ báo lấy nét xuất hiện và biến mất nếu một người đang sử dụng các hình thức đầu vào hỗn hợp. Đối với người dùng có mối quan tâm nhận thức, hoặc những người ít biết chữ hơn, việc thiếu hành vi nhất quán này đối với các yếu tố tương tác có thể gây nhầm lẫn.
Thông số kỹ thuật
Bộ chọn cấp độ 4 # tiêu cự-visible-pseudo # the-focus-visible-pseudo |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt