Tiêu điểm hiển thị trong css

Ngoài ra, biểu định kiểu Tác nhân người dùng mặc định trong tất cả các trình duyệt hiện sử dụng lớp giả :focus-visible. Đây là một điều tuyệt vời vì nó tránh được loại sự cố đã xảy ra với :focus ngay từ đầu và loại bỏ nhu cầu sử dụng một số cách giải quyết kỳ lạ, như

:focus-visible {
    outline: dotted thick green;
    background: lime;
    box-shadow: 0.3em 0.3em lightgrey;
}

Nếu tò mò về chi tiết triển khai, bạn có thể đọc loạt bài đăng trên blog được viết dọc theo con đường phát triển tại blog. igalia. com/mrego, hoặc xem cuộc nói chuyện này

ví dụ

Tin vui sau tất cả những thay đổi đã xảy ra gần đây vào khoảng :focus-visible, đó là giờ đây bạn chỉ cần sử dụng bộ chọn :focus-visible để tạo kiểu cho chỉ báo tiêu điểm do công cụ trình duyệt vẽ

Ngoài ra, các trình duyệt không còn hiển thị chỉ báo tiêu điểm khi người dùng không mong đợi, chẳng hạn như tiêu điểm một phần tử thông thường thông qua nhấp chuột

Các tác giả web sẽ không cần bất kỳ cách giải quyết nào để đạt được mục tiêu tạo kiểu cho chỉ báo tiêu điểm được hiển thị bởi công cụ web

Ví dụ: nếu bạn muốn chỉ báo tiêu điểm của mình có đường viền màu đỏ tươi dày với độ lệch nhỏ, bạn chỉ cần sử dụng CSS sau trên trang web của mình

:focus-visible {
    outline: solid thick magenta;
    outline-offset: 0.1em;
}

Và bạn có thể sử dụng các thuộc tính khác, không chỉ các thuộc tính liên quan đến phác thảo, để tùy chỉnh chỉ báo tiêu điểm trong trang web của mình. e. g.

:focus-visible {
    outline: dotted thick green;
    background: lime;
    box-shadow: 0.3em 0.3em lightgrey;
}

Mở ưu tiên

Điều đáng nói là công việc này đã được lựa chọn chung trong số rất nhiều công cụ, trong nhiều công cụ và được công chúng tài trợ một phần, thông qua chiến dịch Ưu tiên mở của Igalia. Nỗ lực này hoạt động nhằm dân chủ hóa việc phát triển các tính năng của nền tảng web, tạo cơ hội cho các nhóm người và tổ chức nhỏ hơn có tác động trực tiếp đến hệ sinh thái web. Nếu bạn muốn tìm hiểu thêm về điều này, Eric Meyer đã có một bài nói chuyện giải thích về nó tại TPAC của W3C

Nhờ có nhiều đóng góp, thử nghiệm này không chỉ mang lại sự phát triển :focus-visible trong WebKit mà còn rất nhiều khả năng tương tác và sự liên kết trong các triển khai khác và cảm giác rằng có nhu cầu thực sự đối với tính năng này. Cảm ơn bạn để mọi người tham gia

Nhận xét

Lớp giả :focus-visible đã được bật theo mặc định trong Safari Technology Preview 138, vui lòng dùng thử và báo cáo bất kỳ vấn đề nào bạn có thể tìm thấy về lỗi. webkit. tổ chức. Bạn cũng có thể gửi một tweet tới @regocas hoặc @webkit để chia sẻ suy nghĩ của mình về tính năng này

Tôi nên sử dụng tiêu điểm hay tiêu điểm

Tôi có thể đặt tiêu điểm bằng CSS không?

là tiêu điểm

Chỉ báo lấy nét có thể nhìn thấy là gì?