Tài liệu này nằm trong hướng dẫn về màu sắc cho CSS độ phân giải cao.
Có hai chiến lược chính để cập nhật màu cho dự án web nhằm hỗ trợ màn hình 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 tìm ra màu nào sẽ hiển thị dựa trên khả năng hiển thị.
Tính năng nâng cao tăng dần: 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 các điều kiện được đáp ứng, hãy cung cấp các màu gam màu rộng.
Nếu trình duyệt không hiểu được màu display-p3
:
color: red;
color: color(display-p3 1 0 0);
Nếu trình duyệt hiểu được màu display-p3
:
color: red;
color: color(display-p3 1 0 0);
Mỗi hình thức đều có những ưu và nhược điểm riêng. Dưới đây là danh sách ngắn gọn các ưu và nhược điểm:
Xuống cấp nhẹ
- Ưu điểm
- Tuyến đường đơn giản nhất.
- Gam trình duyệt sẽ ánh xạ hoặc kẹp với 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ể chuyển gam clamp hoặc gam map thành một màu bạn không yêu thích.
- Trình duyệt có thể không hiểu được yêu cầu màu sắc và không thực hiện được hoàn toàn. 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 hiển thị dự phòng tầng về màu trước đó mà nó hiểu được.
Nâng cao dần dần
- Ưu điểm
- Kiểm soát nhiều hơn nhờ độ 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ý hai 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 xem có hỗ trợ gam màu và không gian màu hay không
Trình duyệt cho phép kiểm tra khả năng hỗ trợ gam màu rộng cũng như khả năng hỗ trợ cú pháp màu từ CSS và JavaScript. Gam màu chính xác mà người dùng không có, câu trả lời chung được cung cấp để bảo vệ quyền riêng tư của người dùng. Tuy nhiên, tính năng hỗ trợ hệ màu chính xác được cung cấp vì tính năng này không dành riêng cho các chức năng của phần cứng của người dùng, chẳng hạn 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 trên màn hình của họ.
Kiểm tra qua CSS
Yêu cầu hỗ trợ ít cụ thể nhất là truy vấn nội dung nghe nhìn dynamic-range
:
@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 thông qua truy vấn nội dung nghe nhìn color-gamut
:
@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 hai truy vấn phương tiện để kiểm tra hỗ trợ:
Kiểm tra từ JavaScript
Đối với JavaScript, hàm window.matchMedia()
có thể được gọi và chuyển một truy vấn nội dung nghe nhì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 phương tiện còn lại.
Các truy vấn hỗ trợ về hệ màu
Các mã ví dụ sau đây kiểm tra trình duyệt của người dùng truy cập và lựa chọn không gian màu cần sử dụng.
Kiểm tra qua CSS
Bạn có thể yêu cầu hỗ trợ từng màu sắc bằng truy vấn @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, hàm CSS.supports()
có thể được gọi và chuyển một cặp thuộc tính và giá trị để xem trình duyệt có hiểu hay không.
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 việc kiểm tra phần cứng và phân tích cú pháp cùng nhau
Trong khi đợi từng 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. Đây thường là những gì tôi sử dụng 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ả các hệ màu mới. Cho phép tác giả tương tác với các giá trị kênh giống như họ thường làm.
Ranh giới gam màu
Chúng tôi cũng thêm một đường ranh giới gam màu, vẽ một đường giữa gam srgb và gam display-p3. Làm rõ gam màu đã chọn nằm trong gam màu nào.
Đ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 HD.
Việc này đặc biệt hữu ích khi làm việc với hàm color()
và không gian màu mới vì chúng có thể tạo ra cả màu không phải HD và 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 sắc 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 một bảng màu hình vuông trong ngăn Kiểu để thực hiện hoạt động chuyển đổi này. Các công cụ màu mới không chỉ xoay vòng qua các lượt chuyển đổi, mà còn cung cấp một hộp thoại để tác giả có thể xem và chọn lượt chuyển đổi họ muốn.
Khi chuyển đổi, bạn phải biết liệu lượt chuyển đổi đã được cắt cho vừa với không gian hay chưa. Công cụ cho nhà phát triển hiện có một biểu tượng cảnh báo về màu đã chuyển đổi để cảnh báo cho bạn về hoạt động cắt này.
Khám phá thêm 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
Tăng độ rung, thao tác và nội suy nhất quán hơn và nhìn chung mang lại trải nghiệm nhiều màu sắc hơn cho người dùng.
Đọc thêm tài nguyên màu trong hướng dẫn.