: tiêu điểm nhìn thấy - Thủ thuật CSS

Lớp :focus-visiblegiả (còn được gọi là lớp giả "Tiêu điểm được Chỉ định") là một cách CSS gốc để tạo kiểu cho các phần tử:

Đang tập trung
Cần có một có thể nhìn thấy chỉ số để chương trình trọng tâm (thêm về điều này sau)

:focus-visibleđược sử dụng tương tự như :focus: để thu hút sự chú ý đến phần tử hiện đang có tiêu điểm.

.element:focus-visible ( background-color: pink; /* Something to get the user's attention */ )

:focus-visiblelà một phần của bản nháp làm việc của Bộ chọn CSS4. Trước khi áp dụng, Mozilla đã giới thiệu lớp :-moz-focusringgiả để đưa chức năng lên Firefox trước một đặc tả chính thức.

Tại sao chúng ta cần: tiêu điểm-hiển thị?

Chưa :focuslàm điều này đã? Có, nhưng có vấn đề. Minh họa rõ ràng nhất là một nút kích hoạt một số JavaScript. Hãy tưởng tượng một băng chuyền hình ảnh với các nút để hoán đổi giữa các hình ảnh. Giả sử bạn đã thêm a tabindexvào các nút để có thể chọn chúng bằng bàn phím, nhưng khi bạn kiểm tra băng chuyền bằng chuột, bạn sẽ thấy đường viền này xung quanh nút tuyệt đẹp của mình:

Đường viền được trình duyệt thêm vào `:focus`

Không phải bạn muốn làm điều này (vì những lo ngại về khả năng tiếp cận), nhưng bạn làm cách nào để loại bỏ nó? Bằng cách đặt lớp :focusgiả:

.next-image-button:focus ( outline: none; )

Bây giờ nút của bạn trông tuyệt vời khi nó được lấy nét, nhưng điều gì sẽ xảy ra khi người dùng nhấn vào nút của bạn mà không dùng chuột mà thay vào đó là bàn phím? Họ không thể thấy nơi họ đã gắn thẻ! Đó là một vấn đề vì bây giờ không có cách nào để biết nút nào được tập trung cho các thao tác trên bàn phím:

Một trong số này là tập trung, nhưng bạn không thể nhìn thấy nó!

Có cách nào để loại bỏ đường viền tiêu điểm màu xanh lam nhưng vẫn hiển thị tiêu điểm phù hợp hơn với thiết kế trang web không? Chắc chắn, bạn có thể có bánh của mình và ăn nó, cảm ơn :focus-visible!

:focus-visiblechỉ áp dụng khi bạn thực sự muốn một chỉ báo trực quan để giúp người dùng biết được tiêu điểm ở đâu. Nói cách khác, nó không thể ẩn đường viền như :focuscó thể. (Chà, nó có thể bằng cách pha trộn nó vào thiết kế, nhưng bất cứ điều gì.) Cả hai phải được sử dụng cùng nhau theo nghĩa đó. Hãy thêm một vào nút của chúng tôi:

.next-image-button:focus ( outline: none; ) .next-image-button:focus-visible ( outline: 3px solid blanchedalmond; /* That'll show 'em */ )

Bây giờ, khi bàn phím được sử dụng để chuyển sang nút, sẽ có một dấu hiệu trực quan về tiêu điểm:

`:focus-visible` làm cho tiêu điểm hiển thị!

Làm cách nào để trình duyệt xác định khi nào đó là: tiêu điểm hiển thị?

Các trình duyệt có một chút thời gian để xác định khi nào bộ chọn giả này nên được áp dụng cho một phần tử nhất định bằng cách sử dụng phương pháp phỏng đoán của riêng chúng. Đầu tiên, hãy xem bản nháp làm việc của CSS4, và sau đó chúng tôi sẽ cố gắng chia nhỏ nó. Từ các thông số kỹ thuật:

Nếu người dùng thể hiện sở thích (chẳng hạn như thông qua tùy chọn hệ thống hoặc cài đặt trình duyệt) để luôn nhìn thấy chỉ báo tiêu điểm có thể nhìn thấy được, thì tác nhân người dùng phải tuân theo điều này bằng cách: tiêu điểm hiển thị luôn khớp trên phần tử đang hoạt động, bất kể bất kỳ điều gì khác các nhân tố. (Một tùy chọn khác có thể dành cho tác nhân người dùng hiển thị chỉ báo tiêu điểm của riêng mình bất kể phong cách tác giả.)

Bất kỳ phần tử nào hỗ trợ nhập bằng bàn phím (chẳng hạn như thành phần nhập hoặc bất kỳ phần tử nào khác có thể kích hoạt bàn phím ảo hiển thị trên tiêu điểm nếu không có bàn phím vật lý) phải luôn khớp: tiêu điểm hiển thị khi tiêu điểm.

Nếu người dùng tương tác với trang thông qua bàn phím, phần tử hiện đang được lấy tiêu điểm phải khớp: tiêu điểm-hiển thị (nghĩa là cách sử dụng bàn phím có thể thay đổi cho dù lớp giả này có khớp ngay cả khi nó không ảnh hưởng đến: tiêu điểm).

Nếu người dùng tương tác với trang thông qua thiết bị trỏ, sao cho tiêu điểm được chuyển đến phần tử mới không hỗ trợ người dùng nhập, phần tử mới được lấy tiêu điểm sẽ không khớp: tiêu điểm-hiển thị.

Nếu phần tử hiện hoạt khớp với: tiêu điểm-hiển thị và một tập lệnh khiến tiêu điểm di chuyển sang nơi khác, thì phần tử mới được lấy tiêu điểm phải khớp với: tiêu điểm-hiển thị.

Ngược lại, nếu phần tử hiện hoạt không khớp: tiêu điểm-có thể nhìn thấy và tập lệnh khiến tiêu điểm di chuyển sang nơi khác, phần tử mới được lấy tiêu điểm sẽ không khớp: tiêu điểm-hiển thị.

Nếu đó là một chút trừu tượng, đây là một diễn giải:

Tình hình	Có áp dụng: tiêu điểm hiển thị không?
Người dùng cho biết họ luôn muốn tiêu điểm được hiển thị thông qua một cài đặt	Đúng
Một phần tử cần bàn phím để hoạt động (như văn bản)	Đúng
Người dùng đang điều hướng bằng bàn phím	Đúng
Người dùng đang điều hướng bằng thiết bị trỏ (như chuột hoặc ngón tay trên màn hình cảm ứng)	Không
Tập lệnh khiến tiêu điểm chuyển từ một `:focus-visible`phần tử sang phần tử khác	Đúng
Tập lệnh khiến tiêu điểm chuyển từ một `:focus-visible`phần tử không sang phần tử khác	Không

Nó phải lặp lại: Đây là các nguyên tắc và các trình duyệt sẽ có thể tự quyết định về những gì được chọn bởi :focus-visible. Chúng ta có thể mong đợi rằng trường hợp điều hướng bàn phím rõ ràng sẽ được xử lý theo cách có thể dự đoán được, nhưng các trình duyệt có khả năng tự đưa ra quyết định, giống như bất kỳ tính năng nào khác.