The color-adjustproperti digambarkan oleh spec sebagai “melestarikan warna pada perangkat yang berbeda-kemampuan.” Tahukah Anda bagaimana ada ponsel, tablet, dan perangkat lain di luar sana tanpa layar berkualitas retina? Properti ini memberikan petunjuk kepada browser untuk membuat keputusan tentang cara menangani warna berdasarkan kualitas tersebut.
Anda mungkin memikirkan sesuatu seperti, "Tunggu, bukankah merah hanya merah?" Dan, ya, itu benar sekali. Apa gunanya mengoptimalkan atau menyesuaikan warna yang benar di mana pun ia ditampilkan?
Intinya adalah bahwa browser sudah cenderung membuat penentuan ini dan menyesuaikan warna sendiri, seperti mengeluarkan warna merah yang sedikit berbeda jika agen pengguna tidak dapat merender hex tertentu karena kualitas layar dari beberapa faktor lain. Properti ini secara efektif berkata ke browser, "Hei, saya ingin Anda menggunakan warna ini, tapi bagus jika Anda tidak bisa dan ingin menerapkan alternatif terbaik Anda untuk situasi tersebut." Atau, sebaliknya, ini dapat menginstruksikan browser untuk benar-benar mencocokkan warna dengan segala cara.
Gaya Cetak
Yang cukup menarik, spesifikasi tersebut menggunakan contoh pencetakan halaman web di seluruh definisi color-adjust. Namun, sebenarnya tidak ada dokumentasi yang dimaksudkan untuk dicetak. Itu tidak menghentikan Chrome dan Safari untuk mengimplementasikan versi yang diawali dengan nama webkit-print-color-adjust, yang merupakan indikasi kuat bahwa ini dimaksudkan untuk tujuan pencetakan.
Mengapa ini penting? Spesifikasi menjelaskan kasus penggunaan di mana mempertahankan garis zebra dari tabel bergaya pada halaman yang dicetak dapat membantu keterbacaan:
Misalnya, situs web pemetaan yang menawarkan arah tercetak mungkin "zebra-stripe" langkah-langkah dalam petunjuk arah, bergantian antara latar belakang putih dan abu-abu terang. Kehilangan garis-garis zebra ini dan memiliki latar belakang putih bersih akan membuat petunjuk arah lebih sulit dibaca dalam sekejap saat terganggu di dalam mobil.
color-adjustdiatur ke economy.
Sintaksis
.my-element ( color-adjust: (economy | exact); )Nilai
economy(nilai awal): Nilai ini memungkinkan browser membuat penyesuaian pada warna dan gaya elemen yang diperlukan, apakah itu untuk meningkatkan keterbacaan, mengganti warna yang tidak dapat ditampilkan perangkat, atau beberapa faktor lainnya. Perhatikan bahwa ini adalah nilai default dan, meskipun properti tidak diterapkan, seperti inilah perilaku browser.exact: Nilai ini memerintahkan browser untuk mencocokkan warna dengan segala cara demi mempertahankan gaya yang dinyatakan. Ini akan digunakan untuk memanggil gaya yang "penting" atau "signifikan" ke elemen.
Perhatikan bahwa penggunaan default economyapakah properti dipanggil atau tidak menyarankan yang color-adjustdirancang untuk memberikan sinyal ke browser yang menunjukkan gaya yang cukup penting untuk dipertahankan.
Status Spesifikasi
The color-adjustproperti didefinisikan dalam CSS Color Modul Level 4, yang dalam rancangan status kerja publik pertama pada saat tulisan ini. Ini berarti itu belum didukung oleh W3C dan dapat diperbarui, diubah atau bahkan dihilangkan dalam revisi selanjutnya. Dengan demikian, properti ini belum siap produksi dan dianggap eksperimental.
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 19 * | 48 | Tidak | 79 * | 6 * |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Informasi Lebih Lanjut
- Modul Warna CSS Level 4 Draf Pekerjaan Umum Pertama
- Statistik penggunaan Microsoft Edge
- Dokumentasi MDN
- Kemungkinan Properti penyesuaian warna