Hướng dẫn focus-visible css - css hiển thị tiêu điểm

Thử nó

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).

Cú pháp

Ví dụ

Ví dụ cơ bản

Trong ví dụ này, bộ chọ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.

<input value="Default styles" /><br />
<button>Default stylesbutton><br />
<input class="focus-only" value=":focus only" /><br />
<button class="focus-only">:focus onlybutton><br />
<input class="focus-visible-only" value=":focus-visible only" /><br />
<button class="focus-visible-only">:focus-visible onlybutton>

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;
}

<button class="button with-fallback" type="button">
    Button with fallback
button>
<button class="button without-fallback" type="button">
  Button without fallback
button>

.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.

Xem thêm