Đưa màu thương hiệu của bạn vào các thành phần đầu vào biểu mẫu HTML tích hợp chỉ bằng một dòng mã.
Xuất bản ngày 11 tháng 8 năm 2021
Các phần tử biểu mẫu HTML ngày nay khó tuỳ chỉnh. Có vẻ như bạn chỉ có thể chọn giữa một vài hoặc không có kiểu tuỳ chỉnh, hoặc đặt lại kiểu nhập và tạo kiểu từ đầu. Việc xây dựng từ đầu hoá ra lại tốn nhiều công sức hơn dự kiến. Điều này cũng có thể dẫn đến việc quên các kiểu cho trạng thái phần tử (không xác định, tôi đang nói đến bạn) và mất các tính năng hỗ trợ tiếp cận tích hợp. Việc tạo lại hoàn toàn những gì trình duyệt cung cấp có thể tốn nhiều công sức hơn bạn dự kiến.
accent-color: hotpink;
CSS accent-color trong quy cách giao diện người dùng CSS có thể làm nổi bật các phần tử bằng một dòng CSS, giúp bạn không phải nỗ lực tuỳ chỉnh bằng cách cung cấp một cách để đưa thương hiệu của bạn vào các phần tử.
Thuộc tính accent-color cũng hoạt động với color-scheme, cho phép tác giả tô màu cả các phần tử sáng và tối.
Trong ví dụ sau, người dùng đang dùng giao diện tối, trang này sử dụng color-scheme: light dark và dùng cùng một accent-color: hotpink cho các chế độ kiểm soát có màu hồng cánh sen trong giao diện tối.
Các phần tử được hỗ trợ
Hiện tại, chỉ có 4 phần tử sẽ được tô màu thông qua thuộc tính accent-color: hộp đánh dấu, nút chọn, dải và tiến trình. Bạn có thể xem trước từng màu tại đây https://accent-color.glitch.me trong bảng phối màu sáng và tối.
Hộp kiểm
Đài
Phạm vi
Tiến trình
Đảm bảo độ tương phản
Để ngăn các phần tử không truy cập được xuất hiện, các trình duyệt có accent-color cần xác định một màu tương phản đủ điều kiện để sử dụng cùng với điểm nhấn tuỳ chỉnh. Dưới đây là ảnh chụp màn hình minh hoạ sự khác biệt giữa Chrome 94 (bên trái) và Firefox 92 Nightly (bên phải) về thuật toán:
Điều quan trọng nhất mà bạn cần nắm được từ đây là tin tưởng trình duyệt. Cung cấp một màu thương hiệu và tin tưởng rằng màu đó sẽ đưa ra quyết định sáng suốt cho bạn.
Bổ sung: Tăng độ nhuộm màu
Bạn có thể thắc mắc về cách làm nổi bật nhiều hơn 4 phần tử biểu mẫu này. Sau đây là một hộp cát tối thiểu có thể làm mờ:
- vòng lấy nét
- văn bản được đánh dấu
- danh sách điểm đánh dấu
- chỉ báo mũi tên (chỉ Webkit)
- thanh cuộn (chỉ Firefox)
html {
--brand: hotpink;
scrollbar-color: hotpink Canvas;
}
:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }
:is(
::-webkit-calendar-picker-indicator,
::-webkit-clear-button,
::-webkit-inner-spin-button,
::-webkit-outer-spin-button
) {
color: var(--brand);
}
Tiềm năng trong tương lai
Thông số kỹ thuật không giới hạn việc áp dụng accent-color cho 4 phần tử xuất hiện trong bài viết này, có thể sẽ có thêm nhiều phần tử được hỗ trợ sau này. Các phần tử như <option> đã chọn trong <select> có thể được làm nổi bật bằng accent-color.
Bạn muốn tô màu cho những thành phần nào khác trên web? Gửi tweet đến @argyleink kèm theo bộ chọn của bạn. Bộ chọn đó có thể sẽ được thêm vào bài viết này!