Chỉ báo lấy nét (thường được biểu thị bằng "vòng lấy nét") xác định trên trang của bạn. Đối với những người dùng không thể sử dụng chuột, lựa chọn này là một chỉ báo cực kỳ quan trọng vì nó đóng vai trò như một đại diện cho con trỏ chuột.
Nếu chỉ báo lấy tiêu điểm mặc định của trình duyệt xung đột với thiết kế của bạn, bạn có thể sử dụng CSS để định lại kiểu. Chỉ cần nhớ lưu ý đến người dùng bàn phím của bạn!
Sử dụng :focus để luôn hiện chỉ báo lấy nét
:focus
lớp giả được áp dụng bất cứ khi nào một phần tử được lấy làm tâm điểm, bất kể đầu vào
thiết bị (chuột, bàn phím, bút cảm ứng, v.v.) hoặc phương pháp dùng để lấy nét. Ví dụ:
<div> bên dưới có tabindex giúp nó có thể làm tâm điểm. Chiến dịch này cũng có
kiểu tuỳ chỉnh cho trạng thái :focus:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Bất kể bạn sử dụng chuột để nhấp vào hay dùng bàn phím để nhấn phím tab,
<div> sẽ luôn trông giống nhau.
Rất tiếc, trình duyệt có thể không nhất quán với cách áp dụng tiêu điểm. Có hoặc không không phải một phần tử nhận được tiêu điểm có thể phụ thuộc vào trình duyệt và hệ thống.
Ví dụ: <button> bên dưới cũng có một kiểu tuỳ chỉnh cho :focus
trạng thái.
button:focus {
outline: 4px dashed orange;
}
Nếu nhấp vào biểu tượng <button> bằng chuột trong Chrome trên macOS, bạn sẽ thấy
kiểu tiêu điểm tuỳ chỉnh. Tuy nhiên, bạn sẽ không thấy kiểu lấy nét tuỳ chỉnh nếu bạn
hãy nhấp vào biểu tượng <button> trong Safari trên macOS. Điều này là do trong
Safari, phần tử này không nhận được tiêu điểm khi bạn nhấp vào phần tử đó.
Do hoạt động của tiêu điểm không nhất quán nên có thể bạn cần thử nghiệm một chút trên nhiều thiết bị để đảm bảo người dùng có thể chấp nhận kiểu lấy nét của bạn.
Dùng :focus-visible để hiển thị có chọn lọc chỉ báo lấy tiêu điểm
Gói thuê bao mới
:focus-visible
lớp giả được áp dụng bất cứ khi nào một phần tử nhận được tiêu điểm và
thông qua suy đoán mà trình duyệt xác định rằng việc hiển thị chỉ báo tập trung sẽ
có lợi cho người dùng. Cụ thể, nếu lượt tương tác gần đây nhất của người dùng
diễn ra qua bàn phím và thao tác nhấn phím không bao gồm thẻ meta, ALT / OPTION,
hoặc CONTROL, thì :focus-visible sẽ khớp.
Nút trong ví dụ bên dưới sẽ hiển thị chỉ báo tiêu điểm một cách có chọn lọc. Nếu bạn dùng chuột để nhấp vào đó, kết quả sẽ khác với khi bạn sử dụng lần đầu nhấn phím tab vào đó.
button:focus-visible {
outline: 4px dashed orange;
}
Dùng :focus-within để tạo kiểu cho phần tử mẹ của một phần tử được lấy tiêu điểm
Chiến lược phát hành đĩa đơn
:focus-within
lớp giả được áp dụng cho một phần tử khi chính phần tử đó nhận được
tâm điểm hoặc khi một phần tử khác bên trong phần tử đó nhận tiêu điểm.
Bạn có thể dùng hộp đánh dấu này để đánh dấu một vùng trên trang nhằm vẽ sự chú ý của người dùng đến khu vực đó. Ví dụ: biểu mẫu bên dưới nhận tiêu điểm cả khi biểu mẫu được chọn và cũng khi bất kỳ nút chọn nào của biểu mẫu đó được đã chọn.
form:focus-within {
background: #ffecb3;
}
Thời điểm hiển thị chỉ báo lấy nét
Nguyên tắc chung là hãy tự hỏi: "Nếu bạn đã nhấp vào nút điều khiển này trong khi khi bạn dùng thiết bị di động, bạn có muốn thiết bị hiển thị bàn phím không?"
Nếu câu trả lời là "có", thì nút điều khiển có thể luôn thể hiện tiêu điểm
chỉ báo, bất kể thiết bị đầu vào được sử dụng để lấy tiêu điểm là gì. Một ví dụ điển hình là
phần tử <input type="text">. Người dùng cần gửi dữ liệu đầu vào đến
qua bàn phím bất kể phần tử nhập vào ban đầu nhận được như thế nào
tiêu điểm, vì vậy sẽ rất hữu ích khi luôn hiển thị chỉ báo lấy nét.
Nếu câu trả lời là "không" thì bộ điều khiển có thể chọn
hiển thị một tiêu điểm có chọn lọc
chỉ báo. Một ví dụ điển hình là phần tử <button>. Nếu người dùng nhấp vào quảng cáo bằng
chuột hoặc màn hình cảm ứng, thao tác đã hoàn tất và chỉ báo lấy nét có thể không
là cần thiết. Tuy nhiên, nếu người dùng di chuyển bằng bàn phím, thì sẽ hữu ích
hiển thị chỉ báo tập trung để người dùng có thể quyết định xem họ có muốn
nhấp vào phần điều khiển bằng các phím ENTER hoặc SPACE.
Tránh outline: none
Thật ra thì cách các trình duyệt quyết định thời điểm vẽ chỉ báo tiêu điểm là
khó hiểu. Thay đổi giao diện của phần tử <button> bằng CSS hoặc cung cấp
một phần tử tabindex sẽ khiến hành vi đổ chuông mặc định của trình duyệt thành
kích hoạt.
Một phản mẫu rất phổ biến là loại bỏ chỉ báo tiêu điểm bằng cách sử dụng CSS, chẳng hạn như:
/* Don't do this!!! */
:focus {
outline: none;
}
Một cách hay hơn để giải quyết vấn đề này là sử dụng kết hợp :focus và
polyfill :focus-visible. Khối mã đầu tiên dưới đây minh hoạ cách
polyfill hoạt động và ứng dụng mẫu bên dưới nó cung cấp một ví dụ về cách sử dụng
đoạn mã polyfill để thay đổi chỉ báo lấy tiêu điểm trên một nút.
/*
This will hide the focus indicator if the element receives focus via the
mouse, but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
/*
Optionally: Define a strong focus indicator for keyboard focus.
If you choose to skip this step, then the browser's default focus
indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
…
}