Hướng dẫn css focus visible remove border - tiêu điểm css có thể nhìn thấy xóa đường viền
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
Cung cấp A: Nằm tập trung dự phòngNế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ợ 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à đủ.
Mối quan tâm tiếp cậnTầm nhìn thấpHã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.
Nhận thứcCó 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
Tính tương thích của trình duyệt webBảng BCD chỉ tải trong trình duyệt Xem thêmTôi có nên sử dụng tiêu điểm hay tập trung hiển thị không?Thêm: Focus Pseudo-Class vào một yếu tố sẽ làm cho nó hiển thị một phong cách cụ thể tập trung và coi thường các trình duyệt heuristic.Ngược lại,: Focus-Visable, chỉ áp dụng kiểu dáng tùy chỉnh nếu nó được hiển thị một cách tự nhiên.Đó là một tình huống có lợi, một cái nhìn tùy chỉnh đẹp và nhiều năm nghiên cứu trong một tài sản của CSS.
CSS vòng tập trung là gì?Tập trung là một thành phần tiện ích có thể được sử dụng để áp dụng lớp CSS khi một phần tử có tiêu điểm bàn phím.Điều này giúp người dùng bàn phím xác định phần tử nào trên một trang hoặc trong một ứng dụng có tiêu điểm bàn phím khi họ điều hướng xung quanh.a utility component that can be used to apply a CSS class when an element has keyboard focus. This helps keyboard users determine which element on a page or in an application has keyboard focus as they navigate around. |