Css vòng lấy nét là gì?

Tiếp theo, vì chúng tôi sẽ thêm các kiểu tiêu điểm của riêng mình với

:focus {
  outline-style: solid;
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--background-color),
              0 0 0 5px var(--focus-ring-color);
}

1, nên chúng tôi sẽ muốn ẩn kiểu tiêu điểm

:focus {
  outline-style: solid;
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--background-color),
              0 0 0 5px var(--focus-ring-color);
}

2 mặc định của trình duyệt. Thay vì xóa hoàn toàn đường viền bằng cách đặt

:focus {
  outline-style: solid;
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--background-color),
              0 0 0 5px var(--focus-ring-color);
}

3, chúng tôi sẽ đặt

:focus {
  outline-style: solid;
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--background-color),
              0 0 0 5px var(--focus-ring-color);
}

4. Thao tác này sẽ ẩn đường viền trong khi vẫn đảm bảo đường viền vẫn hiển thị ở chế độ tương phản cao của Windows

Sarah Higley có một bài đăng trên blog tuyệt vời với mẹo này và các mẹo khác về chế độ tương phản cao của Windows

:focus {
  outline-color: transparent;
}

Chúng tôi cũng sẽ đặt

:focus {
  outline-style: solid;
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--background-color),
              0 0 0 5px var(--focus-ring-color);
}

5 thành

:focus {
  outline-color: transparent;
}

0. Điều này là để đảm bảo kiểu tiêu điểm trình duyệt mặc định trong Edge, có 2 màu, không hiển thị

:focus {
  outline-color: transparent;
  outline-style: solid;
}

Bây giờ chúng ta sẽ thêm phác thảo

:focus {
  outline-style: solid;
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--background-color),
              0 0 0 5px var(--focus-ring-color);
}

1 của chúng ta. Kiểu này để lại một khoảng trống xung quanh thành phần tiêu điểm có cùng màu với màu nền được đặt cuối cùng và một vòng lấy nét có màu của vòng tiêu điểm được đặt cuối cùng

Miễn là màu của vòng lấy nét có đủ độ tương phản so với màu nền, điều này sẽ đáp ứng tiêu chí thành công có thể nhìn thấy tiêu điểm

:focus {
  outline-style: solid;
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--background-color),
              0 0 0 5px var(--focus-ring-color);
}

Cuối cùng, chúng ta sẽ thêm một số màu nền khác nhau. Màu khoảng trống của bóng hộp sẽ luôn khớp với màu nền của phần tử được lấy nét vì chúng tôi đang đặt màu nền bằng cách sửa đổi biến CSS

:focus {
  outline-color: transparent;
}

2

.bg-color {
  background-color: var(--background-color);
}

.bg-color--vanilla {
  --background-color: #fff8e9;
}

.bg-color--strawberry {
  --background-color: #ffeae8;
}

.bg-color--chocolate {
  --background-color: #ecdad4;
}

Kết quả

Đây là bản demo CodePen với kết quả cuối cùng. Bạn có thể kiểm tra các kiểu lấy nét bằng cách nhấn qua các nút

Tôi đã mày mò một công cụ có giao diện người dùng tùy chỉnh nhưng tôi vẫn muốn hỗ trợ điều hướng bằng bàn phím và điều hướng bằng bàn phím đi kèm với việc lập bảng để tập trung vào các yếu tố

Tôi có một phần tử là hộp kiểm bên dưới, nhưng chuyển đổi giữa nhãn "T" và "-", vì vậy tôi đang sử dụng CSS để thay đổi trạng thái trực quan

.bool input:checked + label.t::before {
  content: 'T';
}
.bool input + label::before {
  content: '-';
  width: 100%;
  font-size: inherit;
  line-height: inherit;
}

Vấn đề là khi tôi đánh dấu tiêu điểm vào hộp kiểm, văn bản nhãn trông không có tiêu điểm. Tôi có thể thêm đường viền (hoặc thứ gì đó) vào nhãn, nhưng tôi muốn nó trông giống như vòng tiêu điểm mặc định của trình duyệt

TỚI. Firefox có

:focus {
  outline-style: solid;
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--background-color),
              0 0 0 5px var(--focus-ring-color);
}

7 khen ngợi màu vòng tiêu điểm của webkit và (may mắn thay) Firefox bỏ qua màu có tiền tố

:focus {
  outline-style: solid;
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--background-color),
              0 0 0 5px var(--focus-ring-color);
}

8

Nếu bạn tập trung vào một yếu tố tương tác e. g trường nhập hoặc nút, trình duyệt sẽ hiển thị vòng tiêu điểm xung quanh nó. Hành vi như vậy khá thuận tiện khi nói đến khả năng truy cập, tuy nhiên kiểu mặc định có thể không phù hợp với hướng dẫn kiểu của bạn. Nó có thể hấp dẫn để

Tuy nhiên, đó là một anti-pattern, vì người dùng sử dụng bàn phím làm thiết bị đầu vào sẽ không thể xác định phần tử nào hiện đang được focus và nhận thông tin đầu vào từ bàn phím

Bạn có thể dễ dàng ghi đè kiểu dáng mặc định bằng cách sử dụng quy tắc CSS sau

Tuy nhiên, nó sẽ áp dụng đường viền khi một phần tử được lấy tiêu điểm bất kể nguồn. Đó là hành vi hơi khác so với hành vi mặc định, e. g. phần tử nút chỉ nhận được vòng lấy nét nếu nó đã được lấy nét bằng bàn phím. Nếu bạn chỉ muốn thay đổi đường viền cho các tình huống khi vòng tiêu điểm hiển thị từ quan điểm của trình duyệt, bạn có thể hoàn thành mục tiêu với sự trợ giúp của quy tắc sau

Trình duyệt hỗ trợ khá tốt, tuy nhiên bạn có thể dự phòng sử dụng polyfill nếu cần

Cuối cùng nhưng không kém phần quan trọng, nếu bạn sử dụng Vật liệu góc, bạn có thể sử dụng hoặc một trong các lệnh liên quan (cdkMonitorElementFocus và cdkMonitorSubtreeFocus) để lấy nguồn của sự kiện tiêu điểm. Bạn có thể xác định quy tắc CSS sau dựa trên sự hiện diện của lớp CSS phân biệt nguồn tiêu điểm

Chỉ báo tiêu điểm (thường được biểu thị bằng "vòng tiêu điểm") xác định thành phần hiện đang được tiêu điểm trên trang của bạn. Đối với những người dùng không sử dụng được chuột thì chỉ số này cực kỳ quan trọng vì nó đóng vai trò như một điểm tựa cho con trỏ chuột của họ.

Nếu chỉ báo 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 kiểu lại. Chỉ cần nhớ ghi nhớ người dùng bàn phím của bạn

Sử dụng :focus { outline-style: solid; outline-color: transparent; box-shadow: 0 0 0 2px var(--background-color), 0 0 0 5px var(--focus-ring-color); } 9 để luôn hiển thị chỉ báo tiêu điểm

Lớp giả

:focus {
  outline-style: solid;
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--background-color),
              0 0 0 5px var(--focus-ring-color);
}

9 được áp dụng bất cứ khi nào một phần tử được tập trung, bất kể thiết bị đầu vào (chuột, bàn phím, bút stylus, v.v.). ) hoặc phương pháp được sử dụng để tập trung nó. Ví dụ:

:focus {
  outline-color: transparent;
}

1 bên dưới có một

:focus {
  outline-color: transparent;
}

2 khiến nó có thể được đặt tiêu điểm. Nó cũng có một phong cách tùy chỉnh cho trạng thái

:focus {
  outline-style: solid;
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--background-color),
              0 0 0 5px var(--focus-ring-color);
}

9 của nó

div[tabindex="0"]:focus {
  outline: 4px dashed orange;
}

Bất kể bạn sử dụng chuột để bấm vào nó hay bàn phím để tab vào nó, thì

:focus {
  outline-color: transparent;
}

1 sẽ luôn giống nhau

Thật không may, các trình duyệt có thể không phù hợp với cách chúng áp dụng tiêu điểm. Việc một phần tử có nhận được tiêu điểm hay không có thể phụ thuộc vào trình duyệt và hệ điều hành

Ví dụ:

button:focus {
  outline: 4px dashed orange;
}

2 bên dưới cũng có kiểu tùy chỉnh cho trạng thái

:focus {
  outline-style: solid;
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--background-color),
              0 0 0 5px var(--focus-ring-color);
}

9 của nó

________số 8

Nếu bạn nhấp vào

button:focus {
  outline: 4px dashed orange;
}

2 bằng chuột trong Chrome trên macOS, bạn sẽ thấy kiểu tiêu điểm tùy chỉnh của nó. Tuy nhiên, bạn sẽ không thấy kiểu tiêu điểm tùy chỉnh nếu nhấp vào

button:focus {
  outline: 4px dashed orange;
}

2 trong Safari trên macOS. Điều này là do trong Safari, phần tử không nhận được tiêu điểm khi bạn nhấp vào phần tử đó

Xem phần tóm tắt về những trình duyệt và hệ điều hành nào sẽ áp dụng tiêu điểm cho các phần tử

button:focus {
  outline: 4px dashed orange;
}

2

Do hành vi lấy nét không nhất quán nên có thể cần thử nghiệm một chút trên các thiết bị khác nhau để đảm bảo kiểu lấy nét của bạn được người dùng chấp nhận

Sử dụng button:focus { outline: 4px dashed orange;}8 để hiển thị có chọn lọc chỉ báo tiêu điểm

Lớp giả

button:focus {
  outline: 4px dashed orange;
}

8 mới được áp dụng bất cứ khi nào một phần tử nhận được tiêu điểm và trình duyệt xác định thông qua phỏng đoán rằng việc hiển thị chỉ báo tiêu điểm sẽ có lợi cho người dùng. Đặc biệt, nếu tương tác gần đây nhất của người dùng thông qua bàn phím và phím bấm không bao gồm phím meta,

:focus {
  outline-color: transparent;
}

50 /

:focus {
  outline-color: transparent;
}

51 hoặc

:focus {
  outline-color: transparent;
}

52, thì

button:focus {
  outline: 4px dashed orange;
}

8 sẽ khớp

Nút trong ví dụ bên dưới sẽ hiển thị có chọn lọc chỉ báo tiêu điểm. Nếu bạn sử dụng chuột để nhấp vào nó, kết quả sẽ khác so với khi bạn lần đầu tiên sử dụng bàn phím để tab vào nó

:focus {
  outline-color: transparent;
}

5

Sử dụng :focus { outline-color: transparent; } 54 để tạo kiểu cho phần tử gốc của phần tử được tập trung

Lớp giả

:focus {
  outline-color: transparent;
}

54 được áp dụng cho một phần tử khi chính phần tử đó nhận tiêu điểm hoặc khi một phần tử khác bên trong phần tử đó nhận tiêu điểm

Nó có thể được sử dụng để đánh dấu một vùng của trang nhằm thu hút sự chú ý của người dùng đến vùng đó. Ví dụ: biểu mẫu bên dưới nhận được tiêu điểm cả khi biểu mẫu được chọn và cả khi bất kỳ nút radio nào của biểu mẫu được chọn

:focus {
  outline-color: transparent;
  outline-style: solid;
}

2

Khi nào hiển thị chỉ báo lấy nét

Một nguyên tắc nhỏ là hãy tự hỏi: "Nếu bạn nhấp vào điều khiển này khi đang sử dụng thiết bị di động, bạn có muốn nó hiển thị bàn phím không?"

Nếu câu trả lời là "có", thì điều khiển có thể luôn hiển thị chỉ báo tiêu điểm, bất kể thiết bị đầu vào được sử dụng để lấy nét. Một ví dụ điển hình là phần tử

:focus {
  outline-color: transparent;
}

56. Người dùng sẽ cần gửi thông tin đầu vào đến phần tử thông qua bàn phím bất kể phần tử đầu vào ban đầu nhận được tiêu điểm như thế nào, vì vậy sẽ hữu ích khi luôn hiển thị chỉ báo tiêu điểm

Nếu câu trả lời là "không", thì bộ điều khiển có thể chọn hiển thị có chọn lọc chỉ báo tiêu điểm. Một ví dụ điển hình là phần tử

button:focus {
  outline: 4px dashed orange;
}

2. Nếu người dùng nhấp vào nó bằng chuột hoặc màn hình cảm ứng, hành động đã hoàn tất và có thể không cần chỉ báo tiêu điểm. Tuy nhiên, nếu người dùng đang điều hướng bằng bàn phím, sẽ hữu ích khi hiển thị chỉ báo tiêu điểm để người dùng có thể quyết định xem họ có muốn bấm vào điều khiển hay không bằng cách sử dụng phím

:focus {
  outline-color: transparent;
}

58 hoặc

:focus {
  outline-color: transparent;
}

59

Tránh :focus { outline-color: transparent; outline-style: solid; } 20

Thành thật mà nói, cách các trình duyệt quyết định khi nào vẽ một chỉ báo tiêu điểm là rất khó hiểu. Thay đổi giao diện của phần tử

button:focus {
  outline: 4px dashed orange;
}

2 bằng CSS hoặc gán cho phần tử một giá trị

:focus {
  outline-color: transparent;
}

2 sẽ khiến hành vi vòng tiêu điểm mặc định của trình duyệt bắt đầu hoạt động

Một cách chống mẫu rất phổ biến là xóa chỉ báo tiêu điểm bằng CSS, chẳng hạn như

:focus {
  outline-color: transparent;
  outline-style: solid;
}

9

Một cách tốt hơn để giải quyết vấn đề này là sử dụng kết hợp

:focus {
  outline-style: solid;
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--background-color),
              0 0 0 5px var(--focus-ring-color);
}

9 và

button:focus {
  outline: 4px dashed orange;
}

8 polyfill. Khối mã đầu tiên bên dưới minh họa cách thức hoạt động của polyfill và ứng dụng mẫu bên dưới cung cấp ví dụ về cách sử dụng polyfill để thay đổi chỉ báo tiêu điểm trên một nút

Tiêu điểm CSS nghĩa là gì?

Vòng lấy nét trong web là gì?

Vòng lấy nét trong trợ năng là gì?

Bộ chọn tiêu điểm trong CSS là gì?