Meneroka Kontrast Warna () untuk kali pertama

Saya melihat dalam nota pelepasan untuk Safari Technical Preview 122 bahawa ia mempunyai sokongan untuk fungsi kontras warna () dalam CSS. Safari pertama kali keluar dari pintu di sini. Setakat yang saya tahu, tiada pelayar lain yang menyokong ini dan saya tidak tahu apabila safari stabil akan menghantarnya, atau jika ada pelayar lain yang akan berlaku. Tetapi! Ini idea yang sangat baik! Mana -mana alat asli untuk membawa kita untuk menghantar antara muka yang lebih mudah diakses (di mana kontras warna adalah bahagian) adalah sejuk oleh saya. Oleh itu, mari cuba membuatnya berfungsi.

Sesiapa sahaja boleh memuat turun Pratonton Teknikal Safari, jadi saya melakukannya.

Saya terpaksa bertanya tentang perkara ini, tetapi hanya kerana ini adalah pelayar pra-pelepasan, ini tidak bermakna semua ciri ini aktif secara lalai. Sama seperti Chrome Canary mempunyai bendera ciri yang perlu anda hidupkan, begitu juga Pratonton Teknikal Safari. Jadi, saya terpaksa membalikkannya seperti ini:

Nota pelepasan tidak mempunyai maklumat tentang bagaimana untuk menggunakan kontras warna (), tetapi mujurlah carian web muncul spec (ia adalah sebahagian daripada modul warna 5), ​​dan MDN mempunyai halaman untuknya dengan maklumat sintaks yang sangat asas.

Inilah cara saya memahaminya:

Contoh di atas adalah sedikit bodoh, kerana ia akan selalu kembali putih - yang paling kontras dengan hitam. Fungsi ini sebenarnya berguna apabila satu atau lebih nilai warna tersebut dinamik , bermakna kemungkinan ia adalah harta tersuai CSS.

Fungsi ini mengembalikan warna, jadi kes penggunaan teratas, saya rasa, akan menetapkan warna berdasarkan latar belakang yang dinamik. Jadi…

 Bahagian {
  Latar Belakang: Var (-BG);
  Warna: Kontrast Warna (var (-Bg) vs putih, hitam);
}

Sekarang kita boleh melemparkan sebarang warna sama sekali di - -bg dan kita akan mendapat teks putih atau hitam, bergantung pada apa yang paling kontras:

Itu sangat sejuk, walaupun dalam kes penggunaan yang paling asas.

Berikut adalah demo dari Dave di mana dia bukan hanya menetapkan warna teks di ibu bapa, tetapi warna pautan juga, dan pautan mempunyai set warna yang berbeza untuk dipilih. Bermain dengan slider HSL (dalam pratonton teknologi Safari, tentu saja) untuk melihatnya berfungsi.

Hanya memilih dua warna yang mempunyai kontras yang cukup cukup mudah (walaupun anda akan terkejut berapa kerap ia diskriminasi oleh kita yang mempunyai niat yang baik). Tetapi oh wow adakah ia menjadi rumit dengan cepat dengan situasi yang berbeza, apalagi mempunyai sekumpulan variasi warna, atau Allah melarang, kombinasi sewenang -wenangnya.

Berikut adalah video saya bermain dengan penguji Dave supaya anda dapat melihat bagaimana warna dikemas kini di tempat yang berbeza.

Atas ialah kandungan terperinci Meneroka Kontrast Warna () untuk kali pertama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!