Hướng dẫn accent-color css - css màu nhấn

Question

Thuộc tính accent-color CSS đặt màu nhấn cho các điều khiển giao diện người dùng được tạo bởi một số yếu tố.accent-color CSS property sets the accent color for user-interface controls generated by some elements.

Nội dung chính Show

Định nghĩa chính thức
Cú pháp chính thức
Đặt màu nhấn tùy chỉnh
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Vé lỗi Firefox #1705605 (Mozilla Bugzilla)
Giá trị ban đầu: Tự động
Áp dụng cho: Tất cả các yếu tố
Trước khi bạn thực hiện thêm màu nhấn vào tất cả mọi thứ, điều đáng chú ý là bốn điều khiển hình thức cụ thể hỗ trợ thuộc tính accent-color:
Một cách tiếp cận khác là bắt buộc cho các điều khiển hình thức khác
Hỗ trợ trình duyệt
Android chrome
Trình duyệt Android

Thử nó

Các trình duyệt hỗ trợ accent-color hiện đang áp dụng nó cho các phần tử HTML sau:

```
accent-color = 
  auto     |
  <color>  
```
0
```
accent-color = 
  auto     |
  <color>  
```
1
```
accent-color = 
  auto     |
  <color>  
```
2
```
accent-color = 
  auto     |
  <color>  
```
3

Cú pháp

/* Keyword values */
accent-color: auto;

/* <color> values */
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0, 200, 0);
accent-color: hsl(228, 4%, 24%);

/* Global values */
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;

Giá trị

accent-color = 
  auto     |
  <color>

4

Đại diện cho một màu được chọn UA, sẽ phù hợp với màu nhấn của nền tảng, nếu có.

accent-color = 
  auto     |
  <color>

5

Chỉ định màu được sử dụng làm màu nhấn.

Định nghĩa chính thức

Cú pháp chính thức

accent-color = 
  auto     |
  <color>

Ví dụ

Đặt màu nhấn tùy chỉnh

HTML

<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />

CSS

input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}

Kết quả

Thông số kỹ thuật

Sự chỉ rõ
CSS Cơ bản Người dùng Mô-đun người dùng cấp 4 # Widget-accent # widget-accent

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Yêu cầu kéo CSSWG #5187 (GitHub)

.element {
  accent-color: #f8a100;
}

Thuộc tính CSS màu Accent (Trạng thái nền tảng Chrome)

Vé lỗi Firefox #1705605 (Mozilla Bugzilla)

accent-color: auto | <color>;

Vé lỗi Safari #227587 (Safari Bugzilla) auto
Yêu cầu về vị trí: Thuộc tính CSS màu Accent (Thông báo Chromium đến Safari) all elements
Thuộc tính accent-color trong CSS có khả năng ghi lại màu có dấu của các điều khiển biểu mẫu được cung cấp bởi các kiểu mặc định của trình duyệt với giá trị màu tùy chỉnh. yes
accent-color được xác định trong mô -đun giao diện người dùng cơ bản CSS Cấp độ 4, hiện đang trong bản nháp hoạt động. Điều đó có nghĩa là các chi tiết vẫn là một công việc đang tiến triển và có thể thay đổi giữa bây giờ và khi thông số kỹ thuật trở thành một khuyến nghị chính thức. the keyword
```
accent-color = 
  auto     |
  <color>  
```
4 or a computed color
Cú pháp by computed value type

Giá trị ban đầu: Tự động

/* Keyword */
accent-color: auto;

/* <color> */
accent-color: red;
accent-color: #f8a100
accent-color: rgba(102, 100, 70, 1);
accent-color: hsla(180, 100%, 70%, 1);

/* Global*/
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: unset;

Áp dụng cho: Tất cả các yếu tố

Kế thừa: Có

Giá trị tính toán: Từ khóa

accent-color = 
  auto     |
  <color>

4 hoặc màu được tính toán

Loại hoạt hình: theo loại giá trị được tính toán

Giá trị

Cuối cùng, một cách dễ dàng của người Viking đến các hình thức phong cách!

Các hình thức kiểu dáng theo truyền thống là tốt, khủng khiếp. Không cần phải xem xét xa hơn là tùy chỉnh yếu tố
```
accent-color = 
  auto     |
  <color>  
```
3 để xem mức độ khó khăn đối với các điều khiển kiểu. Những gì thường dẫn đến là một quyết định giữa việc chấp nhận các kiểu mặc định của trình duyệt hoặc một thang máy chính để thiết lập lại và tái tạo chúng từ đầu.
Ở đây, những gì thường cần để có được một màu
```
accent-color = 
  auto     |
  <color>  
```
3 tùy chỉnh:
accent-color cho phép chúng tôi thay đổi màu được sử dụng trong các điều khiển biểu mẫu chỉ với một dòng CSS:
Nó hoạt động với các điều khiển biểu mẫu cụ thể

Trước khi bạn thực hiện thêm màu nhấn vào tất cả mọi thứ, điều đáng chú ý là bốn điều khiển hình thức cụ thể hỗ trợ thuộc tính accent-color:

Hộp kiểm (____10)

Mỗi trình duyệt có cách tính cách sử dụng màu gì. Bản demo này trên Glitch cho thấy một loạt các điều khiển hộp kiểm với nhiều màu nhấn khác nhau. Xem nó trong một trình duyệt hỗ trợ accent-color để xem cách trình duyệt đó kết hợp màu UI với các màu có giọng khác nhau.

Thuật toán màu Chrome Chrome, trái, so với Firefox (tín dụng: Web.DEV)

Và, nếu chúng ta có màu nhấn mà chúng ta yêu thích nhưng nó chỉ làm việc với sự lựa chọn màu UI của trình duyệt, chúng ta có thể tiếp cận với thuộc tính

input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}

0 để ghi đè lên nó.

Buuuuuut, bạn có thể không muốn đặt câu hỏi về sự lựa chọn của trình duyệt ngay cả khi nó kết thúc một chút không nhất quán giữa các trình duyệt. Điều đó rất nhiều để tung hứng và bạn có thể gây hại nhiều hơn cho khả năng tiếp cận của UI hơn là tốt.

Trình duyệt sẽ không ghi đè accent-color ở chế độ tối như đôi khi trong các tình huống khác.

Một cách tiếp cận khác là bắt buộc cho các điều khiển hình thức khác

Một lần nữa, chỉ có một vài điều khiển biểu mẫu hiện đang hỗ trợ màu nhấn. Điều đó có nghĩa là chúng ta vẫn cần dùng đến các phương pháp tiếp cận hack truyền thống để tạo kiểu cho các loại điều khiển hình thức khác. Nhưng, hey, Adam Argyle và Joey Arhar có lưng của bạn với một đoạn trích đẹp giúp mang lại màu nhấn cho các điều khiển hình thức khác cũng như các dấu hiệu danh sách, lựa chọn và trọng tâm có thể nhìn thấy:

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);
}

Hỗ trợ trình duyệt

I E	Bờ rìa	Firefox	Trình duyệt Chrome	Cuộc đi săn	Opera
Không	93	92	93	15.4	79

iOS safari	Android chrome	Android Firefox	Trình duyệt Android	Opera Mobile
15.4	104	101	104	Không

iOS safari

Android chrome

Android Firefox

Trình duyệt Android

Opera Mobile
Nguồn: Caniuse
Video: accent-color trên ShopTalk
Chris và Dave thể hiện không chỉ là những điều cơ bản của accent-color, mà còn làm thế nào nó có thể được sử dụng để viết các CSS gọn gàng hơn, tài khoản cho các bảng màu và thậm chí một số thủ thuật khó có thể thực hiện được nếu không có nó.
đọc thêm
CSS Accent-Color (Web.DEV)