Tài liệu này nằm trong hướng dẫn về màu sắc có độ phân giải cao cho CSS.
Có hai chiến lược chính để hỗ trợ việc cập nhật màu dự án web hiển thị gam màu rộng:
Xuống cấp nhẹ: Sử dụng hệ màu mới và cho phép trình duyệt và hệ điều hành dựa vào khả năng hiển thị để xác định màu nào sẽ hiển thị.
Tính năng nâng cao tiến bộ: Sử dụng
@supports
và@media
để đánh giá khả năng của trình duyệt của người dùng và nếu đáp ứng điều kiện, hãy gam màu.
Nếu trình duyệt không hiểu màu display-p3
:
color: red;
color: color(display-p3 1 0 0);
Nếu trình duyệt hiểu màu display-p3
:
color: red;
color: color(display-p3 1 0 0);
Mỗi phương thức này đều có những ưu điểm và nhược điểm riêng. Sau đây là danh sách ngắn gọn về các ưu điểm và nhược điểm:
Xuống cấp nhẹ
- Ưu điểm
- Cách đơn giản nhất.
- Gam trình duyệt ánh xạ hoặc gắn vào sRGB nếu không phải là màn hình gam rộng, do đó, trách nhiệm thuộc về trình duyệt.
- Nhược điểm
- Trình duyệt có thể kẹp hoặc gán gam màu thành màu mà bạn không thích.
- Trình duyệt có thể không hiểu được yêu cầu màu và hoàn toàn không thành công. Tuy nhiên bạn có thể giảm thiểu điều này bằng cách chỉ định màu hai lần, cho phép thác trở về màu trước đó.
Cải tiến tiến bộ
- Ưu điểm
- Kiểm soát tốt hơn với độ trung thực màu được quản lý.
- Chiến lược bổ sung không ảnh hưởng đến màu hiện tại.
- Nhược điểm
- Bạn cần quản lý 2 cú pháp màu riêng biệt.
- Bạn cần quản lý hai gam màu riêng biệt.
Kiểm tra tính năng hỗ trợ gam màu và hệ màu
Trình duyệt cho phép kiểm tra khả năng hỗ trợ các chức năng gam màu rộng và màu sắc hỗ trợ cú pháp từ CSS và JavaScript. Gam màu chính xác mà người dùng có không được cung cấp, đưa ra câu trả lời tổng quát để đảm bảo quyền riêng tư của người dùng duy trì. Tuy nhiên, tính năng hỗ trợ hệ màu chính xác vẫn chưa được cung cấp dành riêng cho các chức năng phần cứng của người dùng (như gam màu).
Truy vấn hỗ trợ gam màu
Các mã ví dụ sau đây kiểm tra dải màu của người dùng truy cập trong màn hình.
Kiểm tra thông qua Dịch vụ so sánh giá (CSS)
Yêu cầu hỗ trợ ít cụ thể nhất là
dynamic-range
truy vấn phương tiện:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
Bạn có thể yêu cầu hỗ trợ gần đúng hoặc nhiều hơn bằng cách
color-gamut
truy vấn phương tiện:
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
Có thêm 2 truy vấn nội dung nghe nhìn để kiểm tra khả năng hỗ trợ:
Kiểm tra từ JavaScript
Đối với JavaScript, phương thức
window.matchMedia()
có thể được gọi và truyền một truy vấn phương tiện để đánh giá.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
Bạn có thể sao chép mẫu trên cho các truy vấn nội dung nghe nhìn còn lại.
Truy vấn hỗ trợ hệ màu
Các mã ví dụ sau đây kiểm tra trình duyệt của người dùng đang truy cập và lựa chọn trình duyệt không gian màu để làm việc.
Kiểm tra thông qua Dịch vụ so sánh giá (CSS)
Bạn có thể yêu cầu hỗ trợ hệ màu riêng bằng cách sử dụng
Cụm từ tìm kiếm @supports
:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
Kiểm tra từ JavaScript
Đối với JavaScript, phương thức
CSS.supports()
hàm có thể được gọi và truyền một cặp thuộc tính và giá trị để xem liệu giá trị
mà trình duyệt không hiểu.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
Kết hợp quy trình kiểm tra phần cứng và phân tích cú pháp
Trong khi đợi mỗi trình duyệt triển khai các tính năng màu mới này, bạn nên kiểm tra cả tính năng phần cứng và khả năng phân tích cú pháp màu sắc. Tôi thường sử dụng cách này khi tăng dần màu sắc lên độ phân giải cao:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Gỡ lỗi màu bằng Công cụ của Chrome cho nhà phát triển
Công cụ của Chrome cho nhà phát triển được cập nhật và được trang bị các công cụ mới để giúp nhà phát triển tạo, chuyển đổi và gỡ lỗi màu HD.
Đã cập nhật công cụ chọn màu
Công cụ chọn màu hiện hỗ trợ tất cả hệ màu mới. Cho phép tác giả tương tác với các giá trị của kênh theo cách mà chúng sẽ làm.
Ranh giới giao màu
Một đường ranh giới gam màu cũng được thêm vào, vẽ một đường giữa srgb và gam display-p3. Làm rõ gam màu được chọn nằm trong đó.
Điều này giúp tác giả phân biệt trực quan giữa màu HD và màu không phải màu HD.
Điều này đặc biệt hữu ích khi làm việc với hàm color()
và hàm mới
hệ màu vì chúng có thể tạo ra cả màu không phải HD lẫn HD. Nếu
bạn muốn kiểm tra xem màu của mình thuộc gam màu nào, hãy bật công cụ chọn màu lên và xem!
Chuyển đổi màu
Công cụ cho nhà phát triển có thể chuyển đổi màu giữa các định dạng được hỗ trợ như hsl,
hwb, rgb và hex trong nhiều năm. shift + click
trên bảng màu hình vuông ở
Ngăn Kiểu để thực hiện lượt chuyển đổi này. Các công cụ màu mới không chỉ chuyển đổi
thông qua lượt chuyển đổi, chúng sẽ mang lại một hộp thoại
trong đó tác giả có thể xem và chọn
lượt chuyển đổi mà họ muốn.
Khi chuyển đổi, điều quan trọng là phải biết liệu lượt chuyển đổi có bị cắt bớt để vừa với . Công cụ cho nhà phát triển hiện có biểu tượng cảnh báo về màu được chuyển đổi để cảnh báo bạn đối với đoạn video này.
Tìm hiểu thêm về tính năng gỡ lỗi CSS trong Công cụ cho nhà phát triển.
Các bước tiếp theo
Sống động hơn, thao tác và nội suy nhất quán hơn và về tổng thể mang lại nhiều màu sắc hơn cho người dùng.
Đọc thêm về tài nguyên màu khỏi hướng dẫn đó.