<system-color>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Kiểu dữ liệu <system-color> trong CSS thường phản ánh các lựa chọn màu sắc mặc định được sử dụng cho các phần khác nhau của trang web.
Tuy nhiên, các tác nhân người dùng có thể cung cấp tính năng trợ năng gọi là chế độ màu buộc, trong đó màu sắc bị giới hạn trong bảng màu do người dùng và tác nhân người dùng định nghĩa, ghi đè lựa chọn màu sắc của tác giả trong một số thuộc tính nhất định. Trong chế độ màu buộc, <system-color> hiển thị các màu đã chọn để phần còn lại của trang có thể tích hợp với chúng. Một ví dụ về chế độ màu buộc là chế độ tương phản cao trên Windows.
Trong chế độ màu buộc, các tác giả nên sử dụng màu từ kiểu <system-color> cho tất cả các thuộc tính không thuộc tập hợp các thuộc tính có màu bị ghi đè. Điều này đảm bảo trang nhất quán sử dụng cùng bảng màu trên tất cả các thuộc tính.
Tác giả có thể phát hiện chế độ màu buộc bằng tính năng media forced-colors.
Giá trị <system-color> có thể được sử dụng ở bất kỳ nơi nào có thể dùng <color>.
Cú pháp
Lưu ý rằng các từ khóa này không phân biệt chữ hoa chữ thường, nhưng được liệt kê ở đây với chữ hoa/thường hỗn hợp để dễ đọc.
Tùy thuộc vào cài đặt của bạn, màu mẫu hiển thị trong bảng có thể thay đổi. Bạn cũng có thể xem trang này với các trình duyệt, hệ điều hành và cài đặt hệ thống khác nhau để kiểm tra sự khác biệt.
| Từ khóa | Mô tả | Mẫu |
|---|---|---|
AccentColor |
Nền của các điều khiển giao diện người dùng được nhấn mạnh. | |
AccentColorText |
Văn bản của các điều khiển giao diện người dùng được nhấn mạnh. | |
ActiveText |
Văn bản của các liên kết đang hoạt động. | |
ButtonBorder |
Màu viền cơ sở của các điều khiển. | |
ButtonFace |
Màu nền của các điều khiển. | |
ButtonText |
Màu văn bản của các điều khiển. | |
Canvas |
Nền của nội dung ứng dụng hoặc tài liệu. | |
CanvasText |
Màu văn bản trong nội dung ứng dụng hoặc tài liệu. | |
Field |
Nền của các trường nhập liệu. | |
FieldText |
Văn bản trong các trường nhập liệu. | |
GrayText |
Màu văn bản cho các mục bị vô hiệu hóa (ví dụ: điều khiển bị vô hiệu hóa). | |
Highlight |
Nền của các mục được chọn. | |
HighlightText |
Màu văn bản của các mục được chọn. | |
LinkText |
Văn bản của các liên kết không hoạt động, chưa được truy cập. | |
Mark |
Nền của văn bản được đánh dấu đặc biệt (chẳng hạn bằng phần tử HTML mark). |
|
MarkText |
Văn bản được đánh dấu đặc biệt (chẳng hạn bằng phần tử HTML mark). |
|
SelectedItem |
Nền của các mục được chọn, ví dụ: hộp kiểm được chọn. | |
SelectedItemText |
Văn bản của các mục được chọn. | |
VisitedText |
Văn bản của các liên kết đã được truy cập. |
Các từ khóa màu hệ thống đã lỗi thời
Các từ khóa sau đây đã được định nghĩa trong các phiên bản trước của CSS Color Module. Hiện nay chúng đã lỗi thời và không được dùng trên các trang web công cộng.
| Từ khóa | Mô tả | Thay thế | Mẫu |
|---|---|---|---|
ActiveBorder |
Viền cửa sổ đang hoạt động | ButtonBorder |
|
ActiveCaption |
Thanh tiêu đề cửa sổ đang hoạt động. Nên dùng với CaptionText làm màu nền trước. |
Canvas |
|
AppWorkspace |
Màu nền của giao diện đa tài liệu. | Canvas |
|
Background |
Nền màn hình. | Canvas |
|
ButtonHighlight |
Màu của viền hướng về nguồn sáng cho các phần tử 3-D trông có vẻ 3-D nhờ lớp viền bao quanh đó. | ButtonFace |
|
ButtonShadow |
Màu của viền tránh xa nguồn sáng cho các phần tử 3-D trông có vẻ 3-D nhờ lớp viền bao quanh đó. | ButtonFace |
|
CaptionText |
Văn bản trong thanh tiêu đề, hộp kích thước và hộp mũi tên thanh cuộn. Nên dùng với màu nền ActiveCaption. |
CanvasText |
|
InactiveBorder |
Viền cửa sổ không hoạt động. | ButtonBorder |
|
InactiveCaption |
Thanh tiêu đề cửa sổ không hoạt động. Nên dùng với màu nền trước InactiveCaptionText. |
Canvas |
|
InactiveCaptionText |
Màu văn bản trong thanh tiêu đề không hoạt động. Nên dùng với màu nền InactiveCaption. |
GrayText |
|
InfoBackground |
Màu nền cho điều khiển tooltip. Nên dùng với màu nền trước InfoText. |
Canvas |
|
InfoText |
Màu văn bản cho điều khiển tooltip. Nên dùng với màu nền InfoBackground. |
CanvasText |
|
Menu |
Nền menu. Nên dùng với màu nền trước MenuText hoặc -moz-MenuBarText. |
Canvas |
|
MenuText |
Văn bản trong menu. Nên dùng với màu nền Menu. |
CanvasText |
|
Scrollbar |
Màu nền của thanh cuộn. | Canvas |
|
ThreeDDarkShadow |
Màu tối hơn (thường là ngoài cùng) trong hai viền tránh xa nguồn sáng cho các phần tử 3-D có vẻ 3-D nhờ hai lớp viền bao quanh đồng tâm. | ButtonBorder |
|
ThreeDFace |
Màu nền mặt cho các phần tử 3-D có vẻ 3-D nhờ hai lớp viền bao quanh đồng tâm. Nên dùng với màu nền trước ButtonText. |
ButtonFace |
|
ThreeDHighlight |
Màu sáng hơn (thường là ngoài cùng) trong hai viền hướng về nguồn sáng cho các phần tử 3-D có vẻ 3-D nhờ hai lớp viền bao quanh đồng tâm. | ButtonBorder |
|
ThreeDLightShadow |
Màu tối hơn (thường là trong cùng) trong hai viền hướng về nguồn sáng cho các phần tử 3-D có vẻ 3-D nhờ hai lớp viền bao quanh đồng tâm. | ButtonBorder |
|
ThreeDShadow |
Màu sáng hơn (thường là trong cùng) trong hai viền tránh xa nguồn sáng cho các phần tử 3-D có vẻ 3-D nhờ hai lớp viền bao quanh đồng tâm. | ButtonBorder |
|
Window |
Nền cửa sổ. Nên dùng với màu nền trước WindowText. |
Canvas |
|
WindowFrame |
Khung cửa sổ. | ButtonBorder |
|
WindowText |
Văn bản trong cửa sổ. Nên dùng với màu nền Window. |
CanvasText |
Ví dụ
Sử dụng màu hệ thống
Trong ví dụ này, chúng ta có một nút thông thường lấy độ tương phản bằng cách sử dụng thuộc tính box-shadow. Trong chế độ màu buộc, box-shadow bị buộc thành none, vì vậy ví dụ sử dụng tính năng media forced-colors để đảm bảo có viền với màu phù hợp (trong trường hợp này là ButtonBorder).
HTML
<button class="button">Press me!</button>
CSS
.button {
border: 0;
padding: 10px;
box-shadow:
-2px -2px 5px gray,
2px 2px 5px gray;
}
@media (forced-colors: active) {
.button {
/* Use a border instead, since box-shadow
is forced to 'none' in forced-colors mode */
border: 2px ButtonBorder solid;
}
}
Kết quả
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Color Module Level 4 # css-system-colors |
Khả năng tương thích trình duyệt
Xem thêm
<color>: kiểu dữ liệu mà các từ khóa này thuộc về