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 có độ phân giải cao cho CSS.

Adam Argyle

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:

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 dựa vào khả năng hiển thị để xác định màu nào sẽ hiển thị.

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

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 bằng cách color-gamut truy vấn phương tiện:

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 2 truy vấn nội dung nghe nhìn để kiểm tra khả năng hỗ trợ:

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

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

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

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, 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 đó.