Bermigrasi ke warna CSS HD

Dokumen ini adalah bagian dari panduan warna CSS definisi tinggi.

Ada dua strategi utama untuk memperbarui warna project web Anda untuk mendukung menampilkan wide gamut:

1. Degradasi halus: Gunakan ruang warna baru dan biarkan browser serta sistem operasi mencari tahu warna yang akan ditampilkan berdasarkan kemampuan tampilan.

2. Progressive enhancement: Gunakan @supports dan @media untuk menilai kemampuan browser pengguna, dan jika kondisi terpenuhi, berikan warna gamut.

Jika browser tidak memahami warna display-p3:

color: red;
color: color(display-p3 1 0 0);

Jika browser memahami warna display-p3:

color: red;
color: color(display-p3 1 0 0);

Masing-masing memiliki kelebihan dan kekurangan. Berikut adalah daftar singkat tentang pro dan kekurangan:

Degradasi halus

• Kelebihan
  • Rute paling sederhana.
  • Browser gamut memetakan atau menjepit ke sRGB jika bukan layar gamut lebar, Oleh karena itu, tanggung jawab ada di browser.
• Kekurangan
  • Browser dapat menampilkan gamut clamp atau gamut map ke warna yang tidak Anda sukai.
  • Browser mungkin tidak memahami permintaan warna dan akan gagal sepenuhnya. Namun hal ini dapat dimitigasi dengan menentukan warna dua kali, memungkinkan kembali ke warna sebelumnya yang dimengerti.

Progressive enhancement

• Kelebihan
  • Lebih banyak kontrol dengan fidelitas warna yang terkelola.
  • Strategi tambahan yang tidak memengaruhi warna saat ini.
• Kekurangan
  • Anda perlu mengelola dua sintaksis warna terpisah.
  • Anda perlu mengelola dua color gamut yang terpisah.

Memeriksa dukungan gamut dan ruang warna

Browser memungkinkan pemeriksaan dukungan untuk kemampuan dan warna gamut yang luas dukungan sintaksis dari CSS dan JavaScript. Gamut warna yang tepat yang dimiliki pengguna tidak disediakan, jawaban umum diberikan sehingga privasi pengguna dipertahankan. Dukungan ruang warna yang tepat akan tersedia, karena tidak khusus dengan kemampuan perangkat keras pengguna seperti gamut.

Kueri dukungan gamut warna

Contoh kode berikut memeriksa rentang warna pengguna yang berkunjung di tampilan.

Periksa dari CSS

Permintaan dukungan yang paling tidak spesifik adalah dynamic-range kueri media:

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

Perkiraan atau lebih dukungan dapat diajukan dengan color-gamut kueri media:

@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 */
}

Ada dua kueri media tambahan untuk memeriksa dukungan:

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

Memeriksa dari JavaScript

Untuk JavaScript, window.matchMedia() fungsi dapat dipanggil dan diteruskan kueri media untuk evaluasi.

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

Pola di atas dapat disalin untuk kueri media lainnya.

Kueri dukungan ruang warna

Contoh kode berikut memeriksa browser pengguna yang berkunjung dan pilihannya ruang warna yang berbeda.

Periksa dari CSS

Dukungan ruang warna individual dapat ditanyakan menggunakan Kueri @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 */
}

Memeriksa dari JavaScript

Untuk JavaScript, CSS.supports() fungsi dapat dipanggil dan meneruskan pasangan properti dan nilai untuk melihat apakah dipahami oleh browser.

CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')

Menggabungkan pemeriksaan hardware dan penguraian

Sambil menunggu setiap browser mengimplementasikan fitur warna baru ini, adalah ide yang baik untuk memeriksa kemampuan perangkat keras dan kemampuan penguraian warna. Inilah yang sering saya gunakan ketika menyempurnakan warna secara bertahap menjadi definisi tinggi:

: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);
  }
}

Men-debug warna dengan Chrome DevTools

Chrome DevTools telah diupdate dan dilengkapi dengan alat baru untuk membantu developer membuat, mengonversi, dan men-debug warna HD.

Pemilih warna diperbarui

Pemilih warna sekarang mendukung semua ruang warna baru. Mengizinkan penulis untuk berinteraksi dengan nilai saluran seperti yang mereka lakukan.

Batas Gamut

Garis batas gamut juga telah ditambahkan, menggambar garis antara sRGB dan gamut display-p3. Memperjelas gamut mana yang berisi warna yang dipilih.

Hal ini membantu penulis membedakan secara visual antara warna HD dan warna non-HD. Hal ini sangat membantu saat bekerja dengan fungsi color() dan versi baru ruang warna karena format ini mampu menghasilkan warna non-HD dan HD. Jika Anda ingin memeriksa di gamut mana warna Anda berada, pop-up pemilih warna dan lihat!

Konversi warna

DevTools telah mampu mengonversi warna antara format yang didukung seperti hsl, hwb, rgb, dan hex selama bertahun-tahun. shift + click pada contoh warna persegi di Panel Styles untuk melakukan konversi ini. Alat warna yang baru tidak hanya berputar melalui konversi, mereka menghasilkan dialog di mana penulis dapat melihat dan memilih konversi yang mereka inginkan.

Saat mengonversi, penting untuk mengetahui apakah konversi terpotong agar sesuai dengan spasi. DevTools kini memiliki ikon peringatan ke perubahan warna yang memperingatkan Anda pada pemotongan ini.

Pelajari fitur proses debug CSS di DevTools lainnya.

Langkah berikutnya

Manipulasi dan interpolasi yang lebih jelas serta konsisten dan secara keseluruhan memberikan pengalaman yang lebih berwarna bagi pengguna Anda.

Baca referensi warna selengkapnya dari panduan.