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:
Degradasi halus: Gunakan ruang warna baru dan biarkan browser serta sistem operasi mencari tahu warna yang akan ditampilkan berdasarkan kemampuan tampilan.
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:
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.