Di chuyển sang màu HD CSS

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.

Adam Argyle
Adam Argyle
X GitHub

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:

  1. 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ị.

  2. 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:

Hỗ trợ trình duyệt

  • 98
  • 98
  • 100
  • 13,1

Nguồ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 thông qua truy vấn nội dung nghe nhìn color-gamut:

Hỗ trợ trình duyệt

  • 58
  • 79
  • 110
  • 10

Nguồ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 hai truy vấn phương tiện để kiểm tra hỗ trợ:

  1. @media (color)
  2. @media (color-index)

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á.

Hỗ trợ trình duyệt

  • 9
  • 12
  • 6
  • 5.1

Nguồn

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:

Hỗ trợ trình duyệt

  • 28
  • 12
  • 22
  • 9

Nguồn

@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.

Công cụ cho nhà phát triển cho thấy khả năng hỗ trợ màu display-p3.

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.

Công cụ cho nhà phát triển hiển thị một đường gam màu trong công cụ chọn màu.

Đ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.

Ảnh chụp màn hình cắt gam màu của Công cụ cho nhà phát triển, với biểu tượng cảnh báo bên cạnh màu.

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.