CurrentColor adalah kata kunci dinamik dalam CSS yang merujuk warna teks elemen semasa, dan nilainya akan dikemas kini secara automatik sebagai perubahan atribut warna. Gunakan CurrentColor untuk mengelakkan berulang kali menentukan nilai warna, simpan sempadan, ikon, bayang -bayang dan gaya lain yang selaras dengan warna teks. Sebagai contoh, selepas menetapkan warna sempadan: CurrentColor, hanya ubah warna untuk menyegerakkan warna sempadan. Senario aplikasi termasuk warna ikon berikut warna teks, sempadan dan warna teks, dan pemadanan warna bersatu status fokus bentuk, dan lain -lain. Kaedah menggunakan adalah mudah, seperti .box {warna: hijau; Sempadan: 1px CurrentColor pepejal; }. Petua termasuk menggunakan Fill = "CurrentColor" dalam ikon SVG dan sifat tersuai dengan CSS. Nota: Pelayar moden disokong secara meluas, tetapi anda perlu memberi perhatian kepada isu keserasian dalam IE9 dan ke bawah. Adalah disyorkan untuk secara jelas menetapkan nilai warna untuk mengelakkan ketidakpastian yang disebabkan oleh warisan. Pada masa yang sama, periksa kesan rendering sebenar melalui DevTools dan uji prestasi di bawah tema yang berbeza.

currentColor adalah kata kunci yang sangat praktikal tetapi sering diabaikan dalam CSS. Ia pada dasarnya merupakan rujukan dinamik yang menunjuk kepada nilai atribut color elemen semasa. Iaitu, tidak kira apa warna teks yang anda tetapkan kepada elemen dalam gaya, currentColor akan "ingat" warna itu dan boleh digunakan untuk sifat CSS yang lain, seperti sempadan, warna latar belakang, bayang -bayang, dll.

Ini amat berguna apabila mewujudkan gaya tema yang konsisten atau membangunkan perpustakaan komponen, kerana ia membolehkan anda menggunakan semula definisi warna tanpa perlu mengulangi nilai tertentu.

Bilakah menggunakan currentColor ?

Perkara yang paling biasa adalah apabila anda mahu gaya (seperti sempadan, warna ikon) konsisten dengan warna teks, tetapi tidak mahu menulis nilai warna mati.

Sebagai contoh: jika anda ingin membuat butang, teks berwarna biru dan sempadan berwarna biru; Jika anda menukar tema, ia menjadi teks hijau dan sempadan hijau. Pada masa ini, jika anda menulis border-color: #3366cc secara langsung, anda perlu menukar dua mata setiap kali anda menukar tema. Tetapi jika anda menulis border-color: currentColor , anda hanya perlu menukar warna teks sekali, dan warna sempadan akan berubah secara automatik.

Senario aplikasi termasuk tetapi tidak terhad kepada:

• Warna ikon mengikuti warna teks
• Sempadan, garis bawah dan teks dengan warna yang sama
• Status fokus kawalan borang adalah seragam

Bagaimana menggunakannya dalam projek?

Ia mudah digunakan, sama seperti menggunakan nilai warna:

 .box {
  warna: hijau;
  Sempadan: 1px CurrentColor pepejal;
}

Kod di atas akan menjadikan warna sempadan .box Box sentiasa sama dengan warna teksnya. Walaupun anda menukar warna teks kemudian melalui JavaScript atau warisan induk, sempadan akan dikemas kini secara automatik.

Beberapa petua praktikal:

• Gunakan fill="currentColor" dalam ikon SVG untuk menukar warna ikon dengan warna teks.

• Lebih fleksibel untuk digunakan dengan sifat tersuai CSS, sebagai contoh:

   : root {
    --Text-color: biru;
  }
  .specle {
    warna: var (-warna teks);
    Border-color: CurrentColor;
  }

  ---

  Nota dan keserasian

  Walaupun pelayar moden pada dasarnya menyokong currentColor , ia mungkin tidak diiktiraf dalam beberapa versi lama (seperti IE9 dan ke bawah). Sekiranya anda perlu bersesuaian dengan pelayar lama ini, anda mungkin perlu menurunkan atau mengelakkan menggunakannya.

  Di samping itu, satu perkara yang perlu diperhatikan ialah currentColor bukan nilai tetap, ia dinamik dan bergantung kepada nilai color elemen semasa. Jadi jika anda tidak menetapkan color , ia mungkin mewarisi dari elemen induk, kadang -kadang menghasilkan hasil yang tidak dijangka.

  Petua:

  • Sentiasa menetapkan nilai color secara eksplisit untuk mengelakkan ketidakpastian yang disebabkan oleh warisan
  • Gunakan devtools untuk melihat sama ada warna akhir yang dijangkakan seperti yang diharapkan
  • Prestasi ujian di bawah topik yang berbeza untuk komponen UI utama

  ---

  Pada dasarnya itu sahaja. currentColor tidak rumit, tetapi ia dapat membantu anda mengurangkan kod berlebihan dan meningkatkan kebolehkerjaan, terutama dalam merancang sistem dan senario penukaran tema.

  Atas ialah kandungan terperinci Apakah csscurrentcolor dan aplikasi praktikalnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!