Bagaimanakah Saya Boleh Menggunakan Pembolehubah CSS dalam IE11?

IE11 Polyfills untuk Pembolehubah CSS

IE11 tidak mempunyai sokongan untuk pembolehubah CSS, yang memberikan cabaran untuk persekitaran pembangunan web pelayar bercampur. Nasib baik, penyelesaian wujud dalam bentuk polyfill atau skrip.

CSS Vars Ponyfill

Salah satu polyfill tersebut ialah CSS Vars Ponyfill, tersedia di GitHub dan NPM. Pustaka bebas pergantungan yang ringan (6kB min gzip), ini menawarkan pelbagai ciri:

• Transformasi sisi pelanggan bagi sifat tersuai CSS
• Kemas kini langsung untuk nilai masa jalan
• Sokongan untuk fungsi var() berantai dan bersarang
• Keserasian dengan komponen web dan shadow DOM CSS

Batasan dan Pertimbangan

Sementara CSS Vars Ponyfill menyediakan sokongan yang besar, ia mempunyai had:

• Sokongan harta tersuai terhad kepada :root dan :pengisytiharan hos.
• penggunaan var() terhad kepada nilai harta, mengikut W3C spesifikasi.

Contoh Pelaksanaan

Polyfill menunjukkan keupayaannya dengan contoh seperti:

• Peringkat akar sifat tersuai:

  :root {
    --a: red;
  }
  
  p {
    color: var(--a);
  }

• Sifat tersuai berantai dan bersarang:

  :root {
    --a: var(--b);
    --b: var(--c);
    --c: red;
  }
  
  p {
    color: var(--a);
  }

• Nilai sandaran:

  p {
    font-size: var(--a, 1rem);
    color: var(--b, var(--c, var(--d, red))); 
  }

• Transformasi untuk import CSS dan komponen web:

  <link rel="stylesheet" href="/absolute/path/to/style.css">
  <link rel="stylesheet" href="../relative/path/to/style.css">
  
  <style>
    @import "/absolute/path/to/style.css";
    @import "../relative/path/to/style.css";
  </style>

Kesimpulan

Dengan menggunakan CSS Vars Ponyfill, pembangun boleh memanfaatkan faedah pembolehubah CSS walaupun dalam IE11. Polyfill ini membolehkan penciptaan gaya yang konsisten dan boleh diguna semula merentas penyemak imbas moden dan lama, meningkatkan fleksibiliti dan prestasi aplikasi web.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Pembolehubah CSS dalam IE11?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!