Menjelajahi kontras warna () untuk Pertama Kalinya

Saya melihat di catatan rilis untuk Safari Technical Preview 122 yang memiliki dukungan untuk fungsi color-contrast() di CSS. Safari keluar pertama dari gerbang di sini. Sejauh yang saya tahu, belum ada browser lain yang mendukung ini dan saya tidak tahu kapan Safari yang stabil akan mengirimkannya, atau apakah ada browser lain yang akan mengirimkannya. Tapi! Itu ide yang sangat bagus! Alat asli apa pun untuk membuat kami mengirimkan antarmuka yang lebih mudah diakses (di mana kontras warna menjadi bagiannya) sangat keren bagi saya. Jadi mari kita coba membuatnya bekerja.

Siapa pun dapat mengunduh Pratinjau Teknis Safari , jadi saya melakukannya.

Saya harus bertanya-tanya tentang ini, tetapi hanya karena ini adalah browser pra-rilis, itu tidak berarti semua fitur ini aktif secara default. Sama seperti Chrome Canary yang memiliki tanda fitur yang harus Anda aktifkan, begitu pula Pratinjau Teknis Safari. Jadi, saya harus membaliknya seperti ini:

Catatan rilis tidak memiliki informasi apa pun tentang cara menggunakan color-contrast() , tetapi untungnya pencarian web menghasilkan spesifikasi ( ini adalah bagian dari Color Module 5 ), dan MDN memiliki halaman untuknya dengan informasi sintaks yang sangat dasar.

Beginilah cara saya memahaminya:

Contoh di atas agak konyol, karena akan selalu mengembalikan white – yang paling kontras dengan black . Fungsi ini sebenarnya berguna jika satu atau beberapa nilai warna tersebut dinamis , artinya kemungkinan besar itu adalah properti khusus CSS.

Fungsi mengembalikan warna, jadi kasus penggunaan teratas, saya kira, akan menyetel warna berdasarkan latar belakang dinamis. Begitu…

 section { background: var(--bg); color: color-contrast(var(--bg), white, black); }

Sekarang kita dapat melemparkan warna apa pun di --bg dan kita akan mendapatkan teks putih atau hitam, tergantung pada apa yang paling kontras:

Itu sangat keren , bahkan dalam kasus penggunaan paling dasar.

Berikut adalah demo dari Dave di mana dia tidak hanya mengatur warna teks pada induknya, tetapi juga warna tautan, dan tautan memiliki serangkaian warna berbeda untuk dipilih. Mainkan dengan slider HSL (di Safari Technology Preview, tentu saja) untuk melihatnya berfungsi.

Hanya memilih dua warna yang memiliki kontras yang cukup sudah cukup mudah (meskipun Anda akan terkejut betapa seringnya hal itu dikacaukan bahkan oleh kita yang memiliki niat baik). Tapi oh wow apakah itu cepat rumit dengan situasi yang berbeda, apalagi memiliki banyak variasi warna, atau Tuhan melarang, kombinasi sewenang-wenang.

Ini adalah video saya bermain dengan penguji Dave sehingga Anda dapat melihat bagaimana warna diperbarui di berbagai tempat.


Postingan Menjelajahi color-contrast () untuk Pertama Kalinya muncul pertama kali di CSS-Tricks .

Anda dapat mendukung CSS-Tricks dengan menjadi Supporter MVP .

April 27, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *