CSS dilahirkan pada tahun 1996, apabila kebanyakan monitor komputer mempunyai ekspresi warna yang sangat terhad. Warna CSS, sama ada ditakrifkan dalam format RGB, HSL atau heksadesimal, terhad kepada teknologi paparan pada masa itu dan semuanya terletak di ruang warna SRGB.

Hari ini, kebanyakan peranti baru datang dengan paparan gamut warna yang luas . Gamut warna merujuk kepada pelbagai warna yang boleh dipaparkan paparan. Memaparkan Gamut Warna Lebar boleh memaparkan lebih banyak warna daripada SRGB, dan mereka menggunakan ruang warna P3 paparan. (Terdapat juga Rec.2020, ruang warna yang lebih besar, tetapi ia sangat jarang dan tidak memerlukan pertimbangan pada masa ini.) Sebagai Lea Verou dari Kumpulan Kerja CSS berkata, "Laman web kami kelihatan membosankan kerana kemajuan teknologi skrin lebih cepat daripada kelajuan kemas kini spesifikasi warna CSS." Jika kita ingin memanfaatkan pelbagai warna yang boleh dipaparkan oleh kebanyakan skrin, kita perlu menggunakan format warna CSS baru: Lab, LCH, atau Display-P3.

Sesetengah laman web telah mula menggunakan warna gamut warna yang luas, seperti laman web rasmi Panic, yang pernah membangunkan editor teks Coda yang popular dan permainan Goose Untitled yang masih popular, dan laman web pemasaran untuk produk yang dipanggil Playdate. Mereka semua menggunakan paparan-p3 dengan cerdik, menyampaikan warna-warna cerah yang menakjubkan.

Untuk memahami pelbagai warna SRGB yang hilang, lihat contoh berikut. Dataran dalaman mengandungi warna di luar gamut warna SRGB. Kuadrat luaran menunjukkan kesan warna yang terhad kepada gamut warna SRGB (yang bermaksud warna terdekat yang boleh dipaparkan oleh penyemak imbas tanpa menggunakan paparan-p3, makmal atau LCH). (Sila ambil perhatian bahawa sokongan semasa hanya terhad kepada pengguna Safari.)

Pemilih warna dalam pratonton Teknologi Safari boleh dengan mudah menunjukkan warna mana yang berada di luar gamut warna SRGB.

Penjelasan terperinci mengenai sintaks baru

Sebelum menyelam ke dalam sintaks makmal (), lch () dan warna () fungsi, mari kita lihat sintaks RGB () dan HSL () baru (disokong oleh semua pelayar web kecuali Internet Explorer).

Dalam sintaks lama, setiap nombor dipisahkan oleh koma: RGB (200, 100, 20); Sekarang koma tidak lagi diperlukan, jadi nilai RGB yang dipisahkan ruang (200 100 20); juga sah. Untuk menentukan ketelusan, kita kini boleh menggunakan RGB (200 100 20/50%) dan bukannya menggunakan RGBA () atau HSLA (). Sintaks baru tidak membawa manfaat yang nyata, tetapi ia patut dilihat, kerana ia selaras dengan sintaks LCH (), makmal () dan warna ().

makmal (), lch (), dan warna () sentiasa menggunakan nombor yang dipisahkan ruang (koma tidak dibenarkan), dan slash ke hadapan diikuti dengan peratusan untuk menentukan ketelusan. Mari lihat bagaimana mereka berfungsi.

Warna CSS () Fungsi dan Ruang Warna Display-P3

Fungsi warna () membolehkan anda menentukan warna dalam ruang warna tertentu (bukannya menggunakan ruang warna SRGB yang digunakan dalam RGB (), HSL (), atau hexadecimal). Untuk menggunakan warna gamut warna yang luas, ruang warna yang perlu kita tentukan adalah paparan-p3, yang menggunakan tiga nilai untuk mewakili saluran merah, hijau dan biru warna: 1 0 0 bermaksud merah tulen, 0 0 1 bermaksud biru tulen, dan 0 1 0 bermaksud hijau tulen.

 <code>background-color: color(display-p3 1 0 0.331); /* 亮粉色*/</code>

Pada masa penulisan, paparan-p3 adalah satu-satunya cara untuk mengakses warna gamut yang tinggi dan telah disokong oleh Safari sejak 2017. Namun, sekali Lab () dan LCH () dilaksanakan (Chrome dan Safari sedang dalam pembangunan), mereka akan menjadi pilihan yang lebih baik. Berikut adalah pandangan Lea Verou:

Display-P3 tidak dianggap seragam dan sukar untuk membuat varian (lebih cerah atau lebih gelap, lebih cerah atau kurang lebih cerah, dan lain-lain) dengan menyesuaikan parameternya. Tambahan pula, ia hanya satu penyelesaian jangka pendek. Ia berfungsi sekarang, kerana jarang dapat memaparkan skrin dengan gamut warna yang lebih luas daripada P3. Setelah perkakasan berlangsung lagi, warna (paparan-p3 ...) akan menghadapi masalah yang sama seperti warna SRGB hari ini. LCH dan Lab adalah bebas peranti dan boleh mewakili keseluruhan warna visi manusia, jadi mereka berfungsi dengan betul tidak kira bagaimana perkakasan berlangsung.

Kecerahan yang lebih baik: makmal dan lch

Anda mungkin melihat beberapa artikel dalam talian yang berfikir HSL lebih mudah difahami daripada nilai RGB atau heksadesimal.

Berikut adalah pandangan Chris Coyier pada tahun 2015:

Rayuan sebenar HSLA adalah bahawa ia lebih intuitif menggambarkan bagaimana perubahan nilai akan mempengaruhi warna. Meningkatkan nilai kedua akan meningkatkan ketepuan warna. Mengurangkan nilai ketiga akan mengurangkan kecerahan warna. Ini menjadikannya lebih mudah untuk membuat perubahan warna anda sendiri.

Walaupun HSL mungkin lebih mudah difahami daripada Hexadecimal atau RGB, ia jauh dari sempurna. Cara ia mengira kecerahan tidak sepadan dengan persepsi manusia. Menurut HSL, HSL (240deg 100%50%) dan HSL (60deg 100%50%) mempunyai kecerahan yang sama, iaitu 50%. Mari bandingkan kedua -duanya.

Kepada mata manusia, biru kelihatan lebih gelap. Seperti kata Brian Kardell:

Operasi ini hanya boleh dilakukan dengan baik apabila mencampurkan warna, mencerahkan, gelap dan operasi lain termasuk persepsi tentang bagaimana mata kita sebenarnya berfungsi, dan bukannya bagaimana mesin suka menyimpan dan memaparkan warna.

Berikut adalah contoh visual yang disediakan oleh Lea Verou, yang menunjukkan kelebihan Lab/LCH ke atas HSL. Dia mengulas:

Satu helah untuk mencipta kecerunan yang indah dengan warna yang sama pada kecerahan yang berbeza adalah untuk menukar ke makmal, menukar nilai L, dan kemudian menukar kembali ke HSL/RGB.

Kedua -dua makmal dan LCH menggunakan ruang warna cielab, yang direka untuk konsisten dengan penglihatan manusia. Jika anda memberikan dua warna nilai kecerahan yang sama, mereka kelihatan kecerahan yang sama dengan mata manusia tanpa mengira warna mereka.

Makmal

 <code>background-color: lab(40% 83 -104); /* 一種紫色*/</code>

L dalam makmal () bermaksud kecerahan, ditulis sebagai peratusan (boleh sehingga 400% untuk mendapatkan putih terang, tetapi biasanya antara 0% dan 100%). A dan B tidak mewakili apa -apa - mereka adalah saluran warna. A adalah nilai antara hijau (negatif) dan merah (positif), manakala B ialah nilai antara biru (negatif) dan kuning (positif). Kecerahan mudah difahami untuk kita. Walau bagaimanapun, nilai merah/hijau dan biru/kuning tidak sepenuhnya intuitif. LCH mungkin alternatif yang lebih baik.

Lch

 <code>background-color: lch(69% 56 244); /* 一種藍(lán)色*/</code>

LCH () adalah yang paling mudah difahami di antara nilai warna baru. L masih mewakili kecerahan (dan berfungsi dengan cara yang sama), C mewakili kromatik, dan H mewakili warna. Chroma sebahagian besarnya sama dengan ketepuan, tetapi juga boleh difahami sebagai intensiti warna atau getaran. Tidak seperti format warna baru yang lain, anda sebenarnya boleh meramalkan kesan yang mengubah nilai -nilai individu ini - dalam hal ini ia sama dengan HSL. Cara terbaik untuk mengetahui adalah untuk mencuba pemilih warna LCH ini.

Tentukan nilai sandaran

Kita perlu mempertimbangkan dua sokongan: sokongan penyemak imbas untuk nilai warna CSS baru dan keupayaan skrin untuk memaparkan warna ini.

Bagi penyemak imbas yang tidak menyokong fungsi warna, mudah untuk kembali kepada nilai SRGB yang paling terkini, yang sama seperti yang kita gunakan untuk menentukan atribut sandaran:

 <code>.pink-text { color: rgb(255, 0, 79); /* 將用作回退值*/ color: color(display-p3 1 0 0.331); /* 如果支持則使用*/ }</code>

Oleh kerana lembaran gaya cascading, jika penyemak imbas tidak memahami baris kedua kod dalam contoh di atas, ia akan diabaikan dan nilai RGB () akan digunakan. Ia boleh menjadi susah untuk menaip dua baris kod CSS setiap kali anda ingin menentukan warna. Pembolehubah CSS adalah cara terbaik untuk menyelesaikan masalah ini. Dalam contoh ini, kami akan menggunakan @sokongan untuk menentukan sama ada penyemak imbas menyokong fungsi warna dalam CSS:

 <code>/* https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/ */ :root { --bright-green: rgb(0, 255, 0); } /* 支持時(shí)使用Display-P3顏色。 */ @supports (color: color(display-p3 1 1 1)) { :root {  --bright-green: color(display-p3 0 1 0); } } header { color: var(--bright-green); }</code>

Jika warna sangat penting untuk reka bentuk anda, anda boleh menggunakan imej latar belakang, kerana kebanyakan pelayar menyokong warna gamut yang tinggi dalam imej.

 <code>@supports not (color: color(display-p3 1 0 0.331)) { @supports (-webkit-background-clip: text){  .pink-text {   background-image: url("pink-P3.png");   background-size: cover;   -webkit-background-clip: text;   -webkit-text-fill-color: transparent;  } } } .pink-text { color: rgb(255, 0, 79); color: color(display-p3 1 0 0.331); }</code>

Terdapat plugin PostCSS yang menukarkan Lab () dan LCH () berfungsi untuk RGB (). Jika anda menggunakan SASS, Miriam Suzanne mempunyai alat yang dipanggil Blend.

Pertanyaan media warna

@Supports memberitahu kami sama ada penyemak imbas menyokong sintaks CSS yang berkaitan. Apa yang tidak memberitahu kami ialah sama ada monitor pengguna dapat memaparkan nilai warna tertentu. Jika monitor tidak menyokong warna gamut yang tinggi, skrin akan memaparkan warna SRGB yang paling terkini. Ini bermakna semua monitor dijaga tanpa menulis sebarang kod tambahan.

Walau bagaimanapun, jika anda lebih suka memilih warna sandaran secara manual daripada mempunyai penyemak imbas mengira satu untuk anda, anda boleh lulus nilai warna kedua ke fungsi warna (). Walau bagaimanapun, ini memerlukan penyemak imbas untuk menyokong fungsi warna (tetapi sokongan untuk parameter kedua belum dilaksanakan di mana -mana pelayar).

 <code>background-color: color(display-p3 1 0 0.331, #f54281);</code>

Jika anda memerlukan lebih banyak kawalan berbutir untuk melaksanakan beberapa operasi lanjutan, spesifikasi tahap pertanyaan media 4 menyediakan pertanyaan media warna-warna baru yang dapat membantu kami menyelesaikan masalah ini.

 <code>@media (color-gamut: p3) { /* 僅在支持P3顏色的硬件上運(yùn)行的代碼*/ }</code>

Dalam contoh ini, kami jelas menyemak sokongan P3, tetapi kami juga boleh menyemak ruang warna Rec-2020 yang disebutkan di atas, yang mempunyai gamut warna yang lebih luas daripada P3. Pada masa ini, bilangan skrin yang menyokong REC-2020 adalah sangat kecil, termasuk hanya TV HD, yang bermaksud ia tidak akan menjadi sasaran umum bagi pemaju dalam masa terdekat. Anda juga boleh menyemak sokongan SRGB, tetapi kini hampir semua monitor menyokongnya. Sebaliknya, pertanyaan warna-Gamut mempunyai sokongan penyemak imbas yang cukup baik pada masa penulisan.

Nota: Pertanyaan Media Julat Dinamik

Dalam nota pelepasan Safari 13.1, pertanyaan media pelbagai dinamik digunakan untuk menggunakan warna P3 secara kondusif. Jelas sekali, ini bukan kes penggunaan yang baik. Menurut Florian Rivoal, editor spesifikasi pertanyaan media, pertanyaan ini bertujuan untuk digunakan dalam video:

[S] Skrin ome boleh menunjukkan lampu ultra-terang untuk jumlah masa yang singkat, yang digunakan dalam video untuk perkara-perkara seperti percikan api, cahaya matahari langsung, dan lain-lain. Ini lebih cerah daripada putih, dan tidak dimaksudkan untuk digunakan dengan imej statik. Ia akan menjadi tidak selesa, dan juga akan merosakkan skrin.

Nota Lain: Sokongan Alat Reka Bentuk

Malangnya, alat reka bentuk web yang popular seperti Figma, Sketch, dan XD tidak menyokong Lab, LCH, atau ruang warna P3. Walau bagaimanapun, Photoshop mempunyai pemetik warna makmal.

Itu sahaja! Dalam era apabila skrin menyokong lebih banyak warna berbanding sebelum ini, warna CSS juga berkembang. Ini adalah masa yang menarik untuk pencinta warna!

Atas ialah kandungan terperinci Warna yang berkembang di web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!