Sifat tersuai sebagai negeri

Idea yang menarik dari James Stanley: Fail CSS (dikemas kini kira -kira sekali sehari) dengan CSS Custom Properties dalam warna "bermusim" (contohnya, Spring adalah hijau dan musim luruh adalah oren). Anda kemudian boleh menggunakan nilai -nilai ini untuk menetapkan tema untuk laman web anda, mengetahui bahawa warna -warna ini akan berubah sedikit setiap hari.

Saya mendapat perkara berikut semasa menulis artikel ini:

 : root {
  --musim-bg: HSL (-68.70967741935485,9.419354838709678%, 96%);
  --musim-bgdark: HSL (-68.70967741935485,9.419354838709678%, 90%);
  --musim-FG: HSL (-68.70967741935485,9.419354838709678%, 30%);
  --musim-HL: HSL (-83.70967741935485,30.0000000000000000004%, 50%);
  --musim-hldark: HSL (-83.70967741935485,30.0000000000000004%, 35%);
}

Saya fikir ia akan menjadi lebih menarik jika fail CSS yang disediakan hanyalah harta tersuai, dan bukannya gaya lain dengan pendapat subjektif (seperti menetapkan latar belakang subjek, dan lain -lain). Dengan cara ini, anda boleh melaksanakan warna dengan cara yang anda pilih tanpa sebarang kesan sampingan.

CSS sebagai API?

Ini mengingatkan saya bahawa fail CSS yang dihoskan CDN seperti ini boleh mengandungi kandungan berguna yang lain, seperti tarikh hari ini (untuk kandungan pseudo), atau kandungan sensitif masa khas yang lain. Mungkin itu fasa bulan? Skor Sukan? ! Sup harian? !

 /*<div> Sup hari itu adalah:</div> */
.soup :: selepas {
  Kandungan: var (-soupoftheday); / * lol agak */
}

Ia hampir seperti API data yang sangat mudah digunakan. Kandungan pseudo juga boleh diakses pada masa kini-tetapi anda tidak boleh memilih teks untuk unsur-unsur pseudo, jadi jangan mentafsirkan ini sebagai kelulusan sebenar untuk menggunakan CSS sebagai API Kandungan.

Fleksibiliti sifat tersuai

Adakah Boyd hanya menulis blog tentang apa yang boleh dimasukkan dalam sifat tersuai. Mereka sangat fleksibel. Hampir apa -apa adalah nilai harta tersuai yang sah, dan penggunaannya cenderung seperti yang anda harapkan.

 badan {
  /* Tidak ada masalah*/
  --RGBA: RGBA (255, 0, 0, 0.1);
  Latar Belakang: Var (-RGBA);

  /* Tidak ada masalah*/
  --rgba: 255, 0, 0, 0.1;
  Latar Belakang: RGBA (var (-RGBA));

  /* Tidak ada masalah*/
  --rgb: 255 0 0;
  --A: 0.1;
  Latar Belakang: RGB (var (-rgb) / var (-a));
}

body :: selepas {
  /* Tidak ada masalah*/
  -Song: "Saya memerlukan petikan untuk menjadi kandungan pseudo \ a dan tidak boleh memecah garisan tanpa hack aneh ini tetapi masih agak permiti (???)";
  Kandungan: var (-lagu);
  ruang putih: pra;
}

Bram van Damme menangkap fleksibiliti ini apabila memperkenalkan artikel Will:

Inilah sebabnya mengapa anda boleh menggunakan sifat tersuai CSS untuk:

• Melaksanakan pengiraan bersyarat

• Lulus data dari CSS ke JavaScript

• Suntikan nada kulit/pengubah warna rambut ke emojis

• Tukar nilai berbilang dengan satu harta tersuai (--foo :; hack)

Bram menunjukkan ciri penukaran keadaan "asas" ini yang dapat dicapai oleh sifat tersuai:

 : root {
  --is-big: 0;
}

.is-big {
  --is-big: 1;
}

.block {
  Padding: Calc (
    25px * var (-is-big)  
    10px * (1-var (-is-big))
  );
  lebar sempadan: calc (
    3px * var (-is-big)  
    1px * (1-var (-is-big))
  );
}

Tambah beberapa sudu kerumitan dan anda akan mendapat Crow (pertanyaan media dengan sifat tersuai).

Saya benar -benar mahu melihat sesuatu yang berlaku di CSS untuk memudahkan proses ini. Ia akan menjadi baik untuk menggunakan sifat adat CSS untuk keadaan biasa. Apabila UI berada di mana -mana negeri, kita boleh menggunakan apa -apa gaya! Fikirkan betapa berguna pertanyaan media sekarang, atau betapa bergunanya pertanyaan kontena, tetapi ini dikompaun kerana ia bukan keadaan orang awam, tetapi hanya keadaan sewenang -wenangnya.

Bram juga memperkenalkan ini, merujuk kepada apa yang disebut Lea Verou "sifat tersuai tahap yang lebih tinggi":

 /* Secara teorinya! */

.square {
  Lebar: 2VW;
  Padding: 0.25VW;
  aspek nisbah: 1/1;

  @if (var (-saiz) = besar) {
    Lebar: 16VW;
    Padding: 1VW;
  }
}

.my-input {
  @if (var (-pil) = on) {
    Border-Radius: 999px;
   }
}

Mengenai penamaan

Akan memanggil mereka "pembolehubah CSS", yang sangat biasa dan mudah difahami. Anda akan membaca (saya juga menulis) ayat -ayat seperti ini: "Pembolehubah CSS (AKA CSS Custom Properties)" atau "CSS Custom Properties (AKA CSS Variables)". Šime Vidas baru-baru ini menunjukkan bahawa terdapat cara yang betul untuk merujuk kepada perkara-perkara ini:-bahagian ini adalah harta tersuai, var (-bahagian ini) adalah pembolehubah, yang datang terus dari penggunaan dalam spesifikasi.

Status Perpustakaan JavaScript ... Automatik?

Ini mengingatkan saya tentang cadangan Vue ini. Saya tidak pasti sama ada ia membuat kemajuan, tetapi ideanya ialah keadaan komponen akan didedahkan secara automatik sebagai harta tersuai CSS.

<template><div> Helo</div>
</template>
<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

Oleh kerana warna adalah sebahagian daripada keadaan komponen ini, -warna boleh digunakan sebagai keadaan CSS komponen ini. Saya rasa ini adalah idea yang baik.

Bagaimana jika setiap kali anda menggunakan UseState dalam React, sifat tersuai CSS diletakkan pada: Root dan Dikemaskini secara automatik. Contohnya, jika anda melakukannya:

 Import React, {Usestate} dari 'https://cdn.skypack.dev/react@^16.13.1';
Import Reactdom dari 'https://cdn.skypack.dev/react-dom@ ^^16.13.1';

const app = () => {
  const [ActiveColor, setActiveColor] = useState ("merah");
  kembali (
    <div classname="box">
      <h1 id="Warna-aktif-ActiveColor">Warna aktif: {ActiveColor}</h1>
       {setActiveColor ("Red")}}> merah
       {setActiveColor ("Blue")}}> biru
    </div>
  );
}

Reactdom.render (<app></app> ,
document.getElementById ("root"))

Dan anda tahu anda boleh melakukan ini:

 .box {
  Border-color: 2px pepejal var (-ActiveColor);
}

Kerana keadaan akan memetakan secara automatik ke sifat tersuai. Seseorang harus membuat cangkuk USESTATEWITHCUSTOMPROKES atau sesuatu yang serupa untuk melakukan ini. #freeidea

Perpustakaan seperti React dan Vue digunakan untuk membina UI. Saya fikir ia sangat bermakna bahawa negeri yang mereka uruskan secara automatik mendedahkan kepada CSS.

Bolehkah penyemak imbas menyediakan lebih banyak status halaman sebagai pembolehubah persekitaran?

Bercakap tentang negeri -negeri bahawa CSS harus tahu, saya telah melihat banyak demo yang melakukan perkara yang menarik dengan memetakan perkara seperti kedudukan tetikus semasa atau kedudukan tatal ke CSS. Saya tidak fikir ia benar -benar tidak munasabah untuk menghendaki data ini didedahkan secara tempatan kepada CSS. Kami sudah mempunyai konsep pembolehubah persekitaran, seperti env (selamat-daerah-inset-top), dan saya dapat melihat bahawa ia digunakan untuk mendedahkan keadaan halaman, seperti env (halaman-s-scroll) atau env (mousey).

Atas ialah kandungan terperinci Sifat tersuai sebagai negeri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!