Gotcha besar dengan sifat tersuai

Baru -baru ini saya mendapati bahawa ramai orang (termasuk saya sendiri) dikelirukan oleh ciri -ciri CSS Custom Custom ini, jadi saya memutuskan untuk merakamnya.

Mari tambahkan beberapa sifat tersuai dalam CSS:

 html {
  -Color-1: merah;
  -Color-2: Blue;
}

Kami menggunakannya dengan segera untuk membuat kecerunan latar belakang:

 html {
  -Color-1: merah;
  -Color-2: Blue;

  --bg: gradien linear (ke kanan, var (-warna-1), var (-warna-2));
}

Sekarang anggap terdapat dua div di halaman:

<div></div>
<div></div>

Mari gaya mereka:

 div {
  Latar Belakang: Var (-BG);
}

Ini berfungsi sepenuhnya! Luar Biasa!

Sekarang mari kita ubah gaya. Saya tidak mahu ia berubah dari merah ke biru, saya mahu ia berubah dari hijau ke biru. Sangat mudah, saya mengemas kini merah ke hijau:

 html {
  -Color-1: merah;
  -Color-2: Blue;

  --bg: gradien linear (ke kanan, var (-warna-1), var (-warna-2));
}
div {
  Latar Belakang: Var (-BG);
}
.variation {
  -Color-1: Hijau;
}

Tidak sah! (Siren kuat, tanduknya kuat, dan haiwan domestik bersembunyi di mana -mana).

Kawan, ini tidak berfungsi.

Sejauh yang saya faham, masalahnya ialah --bg tidak pernah diisytiharkan di mana -mana div. Ia boleh menggunakan --bg kerana ia diisytiharkan pada tahap yang lebih tinggi, tetapi apabila ia digunakan, nilainya telah dikunci. Hanya kerana anda menukar atribut lain yang digunakan apabila pengisytiharan --bg tidak bermakna bahawa atribut akan mencari semua lokasi di mana ia digunakan sebagai kebergantungan dan mengemas kini segala -galanya yang menggunakannya.

Malangnya, penjelasan ini tidak betul. Tetapi ini adalah penjelasan terbaik yang boleh saya fikirkan.

Penyelesaian? Nah, ada beberapa.

Penyelesaian 1: Hadkan skop pembolehubah ke mana ia digunakan.

Anda boleh melakukan ini:

 html {
  -Color-1: merah;
  -Color-2: Blue;
}

div {
  --bg: gradien linear (ke kanan, var (-warna-1), var (-warna-2));
  Latar Belakang: Var (-BG);
}
.variation {
  -Color-1: Hijau;
}

Sekarang --bg diisytiharkan pada kedua-dua Div, dan perubahan kepada --color-1 Dependencies berfungsi.

Penyelesaian 2: Tetapkan pemilih untuk kebanyakan pembolehubah dengan koma dipisahkan.

Katakan anda melakukan operasi umum untuk menetapkan sekumpulan pembolehubah dalam :root . Kemudian anda menghadapi masalah ini. Anda hanya boleh menambah pemilih tambahan ke perisytiharan utama untuk memastikan anda memukul julat yang betul.

 html,
div {
  -Color-1: merah;
  -Color-2: Blue;

  --bg: gradien linear (ke kanan, var (-warna-1), var (-warna-2));
}
div {
  Latar Belakang: Var (-BG);
}
.variation {
  -Color-1: Hijau;
}

Dalam beberapa contoh lain yang mungkin tidak terlalu jauh, ia mungkin kelihatan seperti ini:

 : akar, 
.button,
. Whatever-it-is-a-bandaid {
  --Padding-inline: 1rem;
  -Paduan-blok: 1rem;
  --Padding: var (-padding-block) var (-padding-inline);
}

.button {
  padding: var (-padding);
}
.button.less-wide {
  --Padding-inline: 0.5rem;
}

Penyelesaian 3: Mod Komprehensif

Pergi ke nya - letakkan pembolehubah di mana -mana.

 * {
  -akses: saya;
  -di mana sahaja: anda;
  --want: to;

  --hogWild: var (-akses) var (-di mana sahaja);
}

Ini bukan penyelesaian yang baik. Saya pernah mendengar sembang baru-baru ini di mana salah satu tapak bersaiz sederhana ditangguhkan oleh 500ms kerana rendering halaman, kerana setiap cabutan halaman memerlukan semua atribut untuk dikira. Ia "berfungsi", tetapi ini adalah salah satu daripada beberapa contoh di mana anda boleh menyebabkan masalah prestasi yang sah melalui pemilih.

Penyelesaian 4: Memperkenalkan sifat "lalai" baru dan sandaran

Semua kredit di sini dikreditkan kepada Stephen Shaw, yang saya lihat dahulu dalam penerokaan semua kandungan ini.

Mari kembali ke tempat pertama kita menunjukkan soalan ini:

 html {
  -Color-1: merah;
  -Color-2: Blue;

  --bg: gradien linear (ke kanan, var (-warna-1), var (-warna-2));
}

Apa yang perlu kita lakukan ialah memberi diri kita dua perkara:

1. Cara untuk menutup seluruh latar belakang
2. Cara untuk menutup sebahagian daripada latar belakang kecerunan

Oleh itu, kita mesti melakukan ini:

 html {
  -Color-1: merah;
  -Color-2: Blue;
}
div {
  --BG-Default: Linear-Gradient (ke kanan, var (-warna-1), var (-Color-2));
  latar belakang: var (-bg, var (-bg-default));
}

Perhatikan bahawa kami tidak mengisytiharkan --bg sama sekali. Ia hanya duduk di sana menunggu nilai, dan jika ia mendapat nilai, ia adalah nilai "menang". Tetapi jika tidak, ia akan kembali ke --bg-default kami. Sekarang ……

1. Jika saya menetapkan --color-1 atau --color-2 , ia menggantikan bahagian kecerunan seperti yang diharapkan (selagi saya melakukan ini pada pemilih yang menyentuh salah satu div).
2. Sebagai alternatif, saya boleh menetapkan --bg untuk menetapkan semula keseluruhan latar belakang kepada apa sahaja yang saya mahukan.

Rasanya seperti cara yang baik untuk menanganinya.

Kadang -kadang ada kesilapan dalam sifat adat CSS. Tetapi itu bukan salah satu daripada mereka. Walaupun ia agak seperti pepijat kepada saya, jelasnya tidak. Hanya salah satu perkara yang perlu anda ketahui.

Atas ialah kandungan terperinci Gotcha besar dengan sifat tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!