Các color-adjusttài sản được mô tả bởi spec là “màu sắc bảo quản trong các thiết bị khác nhau, khả năng.” Bạn biết làm thế nào có điện thoại, máy tính bảng và các thiết bị khác không có màn hình chất lượng võng mạc? Chà, thuộc tính này cung cấp cho trình duyệt một gợi ý để đưa ra quyết định về cách xử lý màu sắc dựa trên chất lượng đó.
Bạn có thể đang nghĩ điều gì đó dọc theo dòng, "Chờ đã, không phải màu đỏ chỉ là màu đỏ?" Và, vâng, điều đó hoàn toàn đúng. Mục đích của việc tối ưu hóa hoặc điều chỉnh màu sắc trung thực cho dù nó được hiển thị ở đâu?
Vấn đề là các trình duyệt đã có xu hướng đưa ra các quyết định này và tự điều chỉnh màu sắc, như tạo ra màu đỏ hơi khác nếu tác nhân người dùng không có khả năng hiển thị một hex cụ thể do chất lượng màn hình của một số yếu tố khác. Thuộc tính đang nói một cách hiệu quả với trình duyệt, “Này, tôi muốn bạn sử dụng màu này, nhưng thật tuyệt nếu bạn không thể và muốn áp dụng màu thay thế tốt nhất cho tình huống này”. Hoặc ngược lại, nó có thể hướng dẫn trình duyệt khớp chính xác màu với bất kỳ và mọi giá.
Kiểu in
Thật thú vị, thông số kỹ thuật sử dụng ví dụ về in các trang web trong suốt định nghĩa của color-adjust. Tuy nhiên, không có tài liệu thực tế nào cho thấy nó được dùng để in. Điều đó đã không ngăn Chrome và Safari triển khai phiên bản có tên tiền tố webkit-print-color-adjust, đây là một dấu hiệu mạnh mẽ cho thấy nó được thiết kế cho mục đích in.
Vì sao vấn đề này? Thông số kỹ thuật mô tả một trường hợp sử dụng trong đó việc duy trì sọc vằn của bảng được tạo kiểu trên trang in có thể giúp dễ đọc:
Ví dụ: một trang web lập bản đồ cung cấp chỉ đường được in có thể "sọc ngựa vằn" các bước theo chỉ đường, xen kẽ giữa nền trắng và xám nhạt. Việc mất đi dải vằn vằn này và có nền trắng tinh sẽ khiến chỉ đường khó đọc hơn khi nhìn nhanh khi bị phân tâm trong xe hơi.
color-adjustđược đặt thành economy.
Cú pháp
.my-element ( color-adjust: (economy | exact); )Giá trị
economy(giá trị ban đầu): Giá trị này cho phép trình duyệt thực hiện các điều chỉnh đối với màu sắc và kiểu dáng của một phần tử mà nó quyết định nó cần đến, cho dù đó là để cải thiện độ dễ đọc, thay thế màu mà thiết bị không có khả năng hiển thị hoặc một số yếu tố khác. Lưu ý rằng đây là giá trị mặc định và ngay cả khi thuộc tính không được áp dụng, đây là cách trình duyệt sẽ hoạt động.exact: Giá trị này hướng dẫn trình duyệt phải đối sánh một màu bằng mọi giá vì lợi ích của việc duy trì kiểu đã khai báo. Nó sẽ được sử dụng để gọi các kiểu “quan trọng” hoặc “quan trọng” đối với phần tử.
Lưu ý rằng cách sử dụng mặc định về economyviệc thuộc tính có được gọi hay không gợi ý rằng nó color-adjustđược thiết kế để cung cấp tín hiệu cho các trình duyệt chỉ ra các kiểu đủ quan trọng để bảo tồn.
Trạng thái đặc điểm kỹ thuật
Các color-adjusttài sản được định nghĩa trong CSS Màu Mô-đun Tầng 4, mà là trong dự thảo tình trạng làm việc công khai đầu tiên tại thời điểm viết bài này. Điều này có nghĩa là nó vẫn chưa được W3C xác nhận và có thể được cập nhật, thay đổi hoặc thậm chí bị loại bỏ trong các bản sửa đổi sau này. Do đó, thuộc tính này chưa sẵn sàng sản xuất và được coi là thử nghiệm.
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 19 * | 48 | Không | 79 * | 6 * |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Thêm thông tin
- Mô-đun màu CSS Cấp độ 4 Bản thảo công việc đầu tiên
- Thống kê sử dụng Microsoft Edge
- Tài liệu MDN
- Khả năng của Thuộc tính điều chỉnh màu