Poking di CSS jika () berfungsi sedikit lagi: THE COLOR COLOR THEing

Chrome 137 menghantar fungsi CSS IF (), jadi ia benar -benar mungkin kita akan melihat pelayar lain melaksanakannya, walaupun sukar untuk mengetahui dengan tepat ketika. Walau apa pun, jika () membolehkan kita menggunakan nilai-nilai secara kondusif, yang boleh kita lakukan dengan pertanyaan dan fungsi lain (misalnya, pertanyaan media dan fungsi cahaya-gelap ()), jadi saya pasti anda tertanya-tanya: Apa sebenarnya jika () lakukan?

Sunkanmi memberi kami gambaran yang baik mengenai fungsi semalam, mencucuk sintaks pada tahap yang tinggi. Saya ingin mencucuknya sedikit lebih sukar dalam artikel ini, masuk ke dalam beberapa kemungkinan penggunaan dunia nyata.

Untuk merakam, jika () secara kondisen memberikan nilai kepada harta berdasarkan nilai pembolehubah CSS. Sebagai contoh, kita boleh memberikan nilai yang berbeza kepada sifat warna dan latar belakang berdasarkan nilai --THEME:

• --THEME: "Shamrock"
  • Warna: ‌HSL (146 50% 3%)
  • Latar Belakang: HSL (146 50% 40%)
• --THEME: Apa-apa lagi
  • Warna: HSL (43 74% 3%)
  • Latar Belakang: HSL (43 74% 64%)

 : root {
  / * Tukar kembali ke nilai 'lain' */
  --THEME: "Shamrock";

  badan {
    warna: jika (gaya (-tema: "shamrock"): HSL (146 50% 3%); lain: HSL (43 74% 3%));
    Latar Belakang: Jika (Gaya (-Tema: "Shamrock"): HSL (146 50% 40%); lain: HSL (43 74% 64%));
  }
}

Saya tidak suka sintaks (terlalu banyak kolon, kurungan, dan sebagainya), tetapi kita boleh memformatnya seperti ini (yang saya fikir sedikit lebih jelas):

 Warna: jika (
  Gaya (-Tema: "Shamrock"): HSL (146 50% 3%);
  lain: HSL (43 74% 3%)
);

Kita sepatutnya dapat melakukan beberapa perkara yang gila dengan jika (), dan saya berharap ia menjadi kes akhirnya, tetapi saya melakukan beberapa ujian dan mengetahui bahawa sintaks di atas adalah satu -satunya yang berfungsi. Kami tidak boleh mendasarkan keadaan pada nilai harta CSS biasa (bukannya harta tersuai), atribut HTML (menggunakan ATTR ()), atau sebarang nilai lain. Buat masa ini, sekurang -kurangnya, keadaan mesti berdasarkan nilai harta tersuai (pembolehubah CSS).

Meneroka apa yang boleh kita lakukan dengan jika ()

Berdasarkan contoh pertama, jelas bahawa kita boleh menggunakan jika () untuk bertemakan (dan sistem reka bentuk secara keseluruhan). Walaupun kita boleh menggunakan fungsi cahaya gelap () untuk ini, bagaimana jika tema tidak terang dan gelap, atau bagaimana jika kita mahu mempunyai lebih daripada dua tema atau mod cahaya dan gelap untuk setiap tema? Nah, itulah jika () boleh digunakan.

Pertama, mari kita buat lebih banyak tema/lebih banyak syarat:

 : root {
  /* Shamrock | Saffron | Amethyst */
  --THEME: "Saffron"; /* ... saya pilih awak! */

  badan {
    Warna: jika (
      Gaya (-Tema: "Shamrock"): HSL (146 50% 3%);
      Gaya (-Tema: "Saffron"): HSL (43 74% 3%);
      Gaya (-Tema: "Amethyst"): HSL (282 47% 3%)
    );
    Latar Belakang: jika (
      Gaya (-Tema: "Shamrock"): HSL (146 50% 40%);
      Gaya (-Tema: "Saffron"): HSL (43 74% 64%);
      Gaya (-Tema: "Amethyst"): HSL (282 47% 56%)
    );
    Peralihan: 300ms;
  }
}

Cukup mudah, tetapi terdapat beberapa perkara yang mudah dimusnahkan. Pertama, tidak ada "keadaan lain" kali ini, yang bermaksud bahawa jika tema itu tidak Shamrock, Saffron, atau Amethyst, gaya penyemak imbas lalai digunakan. Jika tidak, fungsi IF () menyelesaikan nilai pernyataan sebenar yang pertama , iaitu tema safron dalam kes ini. Kedua, peralihan berfungsi keluar dari kotak; Dalam demo di bawah, saya telah menambah antara muka pengguna untuk menukarkan --THEME, dan untuk peralihan, secara harfiah hanya peralihan: 300ms bersama fungsi IF ():

Nota: Jika tema-swapping dikawal pengguna, seperti memilih pilihan, anda sebenarnya tidak memerlukan jika () sama sekali. Anda hanya boleh menggunakan logik yang saya gunakan pada permulaan demo (: root: mempunyai (#shamrock: diperiksa) { / * styles * /}). Amit Sheen mempunyai demonstrasi yang sangat baik di majalah Smashing.

Untuk menjadikan kod lebih banyak dipelihara, kita boleh meluncurkan warna ke dalam pembolehubah CSS juga, kemudian gunakannya dalam fungsi IF (), kemudian luncurkan fungsi IF () ke dalam pembolehubah CSS:

 / * Persediaan */
: root {
  /* Shamrock | Saffron | Amethyst */
  --THEME: "Shamrock"; /* ... saya pilih awak! */

  / * Warna asas */
  --Shamrock: HSL (146 50% 40%);
  --Saffron: HSL (43 74% 64%);
  --Amethyst: HSL (282 47% 56%);

  / * Warna asas, tetapi pada 3% ringan */
  --ShamRock-Perlengkapan: HSL (dari VAR (-Shamrock) HS 3%);
  --Saffron-Perlengkapan: HSL (dari VAR (-Saffron) HS 3%);
  --Amethyst-Perlengkapan: HSL (dari var (-amethyst) HS 3%);

  -Background: jika (
    gaya (-tema: "shamrock"): var (-shamrock);
    Gaya (-Tema: "Saffron"): var (-Saffron);
    Gaya (-Tema: "Amethyst"): var (-amethyst)
  );

  -warna: jika ((
    gaya (-tema: "shamrock"): var (-shamrock-complementari);
    gaya (-tema: "safron"): var (-saffron-pelengkap);
    Gaya (-Tema: "Amethyst"): var (-Amethyst-Perlengkapan)
  );

  / * Penggunaan */
  badan {
    /* Satu pemboleh ubah, semua ifs! */
    latar belakang: var (-latar belakang);
    warna: var (-warna);
    aksen-warna: var (-warna);

    /* Tidak dapat melupakan ini! */
    Peralihan: 300ms;
  }
}

Serta menggunakan pembolehubah CSS dalam fungsi IF (), kita juga boleh bersarang fungsi lain. Dalam contoh di bawah, saya telah melemparkan cahaya gelap () di sana, yang pada dasarnya membalikkan warna untuk mod gelap:

 -Background: jika (
  gaya (-tema: "shamrock"): cahaya-gelap (var (-shamrock), var (-shamrock-complementery));
  gaya (-tema: "safron"): cahaya gelap (var (-safron), var (-saffron-pelengkap));
  Gaya (-Tema: "Amethyst"): cahaya-gelap (var (-amethyst), var (-amethyst-complementery))
);

jika () vs pertanyaan gaya kontena

Jika anda tidak menggunakan pertanyaan gaya kontena sebelum ini, mereka pada dasarnya memeriksa sama ada bekas mempunyai pembolehubah CSS tertentu (sama seperti fungsi IF ()). Inilah contoh/demo yang sama tetapi dengan pertanyaan gaya kontena dan bukannya fungsi IF ():

 : root {
  /* Shamrock | Saffron | Amethyst */
  --THEME: "Shamrock"; /* ... saya pilih awak! */

  --Shamrock: HSL (146 50% 40%);
  --Saffron: HSL (43 74% 64%);
  --Amethyst: HSL (282 47% 56%);

  --ShamRock-Perlengkapan: HSL (dari VAR (-Shamrock) HS 3%);
  --Saffron-Perlengkapan: HSL (dari VAR (-Saffron) HS 3%);
  --Amethyst-Perlengkapan: HSL (dari var (-amethyst) HS 3%);

  badan {
    /* Bekas telah memilih Shamrock! */
    @Container Style (-Tema: "Shamrock") {
      -background: cahaya-gelap (var (-shamrock), var (-shamrock-complementari));
      -warna: cahaya-gelap (var (-shamrock-complementari), var (-shamrock));
    }

    @Container Style (-Tema: "Saffron") {
      -background: cahaya-gelap (var (-safron), var (-saffron-pelengkap));
      -warna: cahaya-gelap (var (-saffron-pelengkap), var (-saffron));
    }

    @Container Style (-Tema: "Amethyst") {
      -background: cahaya-gelap (var (-amethyst), var (-amethyst-complementari));
      -warna: cahaya-gelap (var (-amethyst-complementari), var (-amethyst));
    }

    latar belakang: var (-latar belakang);
    warna: var (-warna);
    aksen-warna: var (-warna);
    Peralihan: 300ms;
  }
}

Seperti yang anda lihat, di mana jika () memudahkan nilai bersyarat, pertanyaan gaya kontena memudahkan sifat dan nilai bersyarat. Selain itu, ia benar -benar hanya sintaks yang berbeza.

Perkara tambahan yang boleh anda lakukan dengan jika () (tetapi mungkin tidak menyedari)

Semak sama ada pembolehubah CSS wujud:

 / * Menyembunyikan ikon jika pemboleh ubah tidak ditetapkan */
.icon {
  Paparan: jika (
    gaya (-ikon keluarga): blok sebaris;
    lain: Tiada
  );
}

Buat pernyataan bersyarat yang lebih kompleks:

 H1 {
  saiz fon: jika ((
    gaya (-besar-besaran: benar): xxx-besar;
    Gaya (-Tema: "Themewithlargerheadings"): XXX-Large
  );
}

Semak jika dua pembolehubah CSS sepadan:

 / * Jika #s2 mempunyai latar belakang yang sama dengan #s1, tambahkan sempadan */
#s2 {
  Border-top: jika (
    Gaya (-S2-Background: var (-S1-background)): merah pepejal nipis
  );
}

jika () dan calc (): apabila matematik tidak matematik

Ini tidak akan berfungsi (mungkin seseorang dapat membantu saya menentukan mengapa):

 div {
  / * 3/3 = 1 */
  --Calc: Calc (3/3);
  / * Biru, kerana jika () tidak akan mengira -calc */
  Latar Belakang: jika (gaya (-calc: 1): merah; lain: biru);
}

Untuk membuat jika () hitung -CALC, kita perlu mendaftarkan pembolehubah CSS menggunakan @Property terlebih dahulu, seperti ini:

 @Property -Calc {
  Sintaks: "<number> ";
  nilai awal: 0;
  Warisan: palsu;
}</number>

Pemikiran penutupan

Walaupun saya tidak berminat dengan sintaks dan bagaimana ia tidak boleh dibaca kadang -kadang boleh kelihatan (terutamanya jika ia diformat pada satu baris), saya mega teruja untuk melihat bagaimana () berkembang. Saya suka dapat menggunakannya dengan sifat biasa (contohnya, warna: jika (gaya (latar belakang: putih): hitam; gaya (latar belakang: hitam): putih);) Untuk mengelakkan perlu menetapkan pembolehubah CSS jika mungkin.

Ia juga akan mengagumkan jika pengiraan Calc () boleh dikira dengan cepat tanpa perlu mendaftarkan pembolehubah.

Bahawa dikatakan, saya masih sangat gembira dengan bagaimana jika () sekarang, dan tidak sabar untuk membina sistem reka bentuk yang lebih mudah.

Atas ialah kandungan terperinci Poking di CSS jika () berfungsi sedikit lagi: THE COLOR COLOR THEing. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!