Wie kann ich CSS-Variablen in IE11 verwenden?

IE11-Polyfills für CSS-Variablen

IE11 bietet keine Unterstützung für CSS-Variablen, was für Webentwicklungsumgebungen mit gemischten Browsern eine Herausforderung darstellt. Glücklicherweise gibt es eine Lösung in Form von Polyfills oder Skripten.

CSS Vars Ponyfill

Eine solche Polyfill ist CSS Vars Ponyfill, verfügbar auf GitHub und NPM. Diese leichte (6 KB min gzip), abhängigkeitsfreie Bibliothek bietet verschiedene Funktionen:

• Clientseitige Transformation von benutzerdefinierten CSS-Eigenschaften
• Live-Updates für Laufzeitwerte
• Unterstützung für verkettete und verschachtelte var()-Funktionen
• Kompatibilität mit Webkomponenten und Shadow-DOM-CSS

Einschränkungen und Überlegungen

Während CSS Vars Ponyfill bietet umfangreiche Unterstützung, es gibt jedoch Einschränkungen:

• Die Unterstützung benutzerdefinierter Eigenschaften ist auf :root- und :host-Deklarationen beschränkt.
• Die Verwendung von var() ist gemäß W3C auf Eigenschaftswerte beschränkt Spezifikationen.

Beispielimplementierungen

Die Polyfüllung demonstriert ihre Fähigkeiten anhand von Beispielen wie:

• Root-Ebene benutzerdefinierte Eigenschaften:

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

  Nach dem Login kopieren

• Verkettete und verschachtelte benutzerdefinierte Eigenschaften:

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

  Nach dem Login kopieren

• Fallback-Werte:

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

  Nach dem Login kopieren

• Transformationen für CSS-Importe und Webkomponenten:

  <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>

  Nach dem Login kopieren

Fazit

Durch den Einsatz von CSS Vars Ponyfill, Entwickler kann die Vorteile von CSS-Variablen auch in IE11 nutzen. Diese Polyfüllung ermöglicht die Erstellung konsistenter und wiederverwendbarer Stile für moderne und ältere Browser und verbessert so die Flexibilität und Leistung von Webanwendungen.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Variablen in IE11 verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!