Dokumen ini adalah bagian dari panduan warna CSS definisi tinggi.
Ada dua strategi utama untuk memperbarui warna project web Anda guna mendukung tampilan gamut lebar:
Degradasi halus: Gunakan ruang warna baru dan biarkan browser serta sistem operasi menentukan warna yang akan ditampilkan berdasarkan kemampuan tampilan.
Progressive enhancement: Gunakan
@supportsdan@mediauntuk menilai kemampuan browser pengguna, dan jika kondisi terpenuhi, akan memberikan warna gamut yang luas.
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 ini daftar singkat pro dan kontranya:
Degradasi halus
- Kelebihan
- Rute paling sederhana.
- Gamut browser memetakan atau membatasi ke sRGB jika bukan tampilan gamut lebar, sehingga tanggung jawab ada di browser.
- Kekurangan
- Browser mungkin menjepit atau memetakan gamut ke warna yang tidak Anda sukai.
- Browser mungkin tidak memahami permintaan warna dan gagal sepenuhnya. Namun, hal ini dapat dimitigasi dengan menentukan warna dua kali, sehingga memungkinkan penurunan penggantian ke warna sebelumnya yang dipahami.
Progressive enhancement
- Kelebihan
- Kontrol lebih besar dengan fidelitas warna terkelola.
- Strategi tambahan yang tidak memengaruhi warna saat ini.
- Kekurangan
- Anda perlu mengelola dua sintaksis warna terpisah.
- Anda perlu mengelola dua color gamut terpisah.
Memeriksa dukungan gamut dan ruang warna
Browser memungkinkan pemeriksaan dukungan untuk kemampuan gamut lebar dan dukungan sintaksis warna dari CSS dan JavaScript. Gamut warna persis yang belum tersedia oleh pengguna. Jawaban umum diberikan sehingga privasi pengguna dijaga. Namun, dukungan ruang warna yang tepat tersedia, karena tidak spesifik untuk kemampuan hardware pengguna seperti gamut.
Kueri dukungan color gamut
Contoh kode berikut memeriksa rentang warna pengguna yang berkunjung di tampilannya.
Periksa dari CSS
Permintaan dukungan yang paling tidak spesifik adalah
kueri media
dynamic-range:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
Perkiraan, atau lebih, dukungan dapat ditanyakan dengan
kueri media
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 */
}
Ada dua kueri media tambahan untuk memeriksa dukungan:
Periksa dari JavaScript
Untuk JavaScript, fungsi
window.matchMedia()
dapat dipanggil dan meneruskan 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 pemilihan ruang warna yang akan digunakan.
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 */
}
Periksa dari JavaScript
Untuk JavaScript, fungsi
CSS.supports()
dapat dipanggil dan meneruskan pasangan properti dan nilai untuk melihat apakah
browser memahaminya.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
Menggabungkan hardware dan pemeriksaan penguraian
Selagi menunggu setiap browser menerapkan fitur warna baru ini, sebaiknya periksa kemampuan hardware dan kemampuan penguraian warna. Inilah yang sering saya gunakan ketika secara bertahap meningkatkan warna 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 kini mendukung semua ruang warna baru. Memungkinkan penulis untuk berinteraksi dengan nilai channel seperti yang biasa mereka lakukan.
Batas Gamut
Garis batas gamut juga telah ditambahkan, sehingga menggambar garis antara sRGB dan gamut display-p3. Memperjelas gamut mana 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 ruang warna baru karena keduanya mampu menghasilkan warna non-HD dan HD. Jika
ingin memeriksa gamut warna yang Anda miliki, munculkan pemilih warna dan lihat hasilnya.
Konversi warna
DevTools dapat 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 baru tidak hanya merotasi
konversi, tetapi juga menghasilkan dialog tempat penulis dapat melihat dan memilih
konversi yang mereka inginkan.
Saat melakukan konversi, penting untuk mengetahui apakah konversi sudah diklip agar sesuai dengan ruang. DevTools kini memiliki ikon peringatan terhadap warna yang dikonversi yang akan memberi tahu Anda tentang pemotongan ini.
Temukan lebih banyak fitur proses debug CSS di DevTools.
Langkah berikutnya
Lebih banyak getaran, manipulasi dan interpolasi yang konsisten, dan secara keseluruhan memberikan pengalaman yang lebih berwarna bagi pengguna.
Baca referensi warna lainnya dari panduan ini.