Ich entwickle eine Webseite in einer gemischten Webbrowser-Umgebung (Chrome / IE11). IE11 unterstützt keine CSS-Variablen. Gibt es eine Polyfüllung oder ein Skript, mit dem ich CSS-Variablen in IE11 verwenden kann?
css
internet-explorer-11
polyfills
R. StackUser
quelle
quelle
Antworten:
Ja, solange Sie benutzerdefinierte Eigenschaften auf Stammebene (IE9 +) verarbeiten.
Aus der README:
Hier einige Beispiele, wie die Bibliothek umgehen kann:
Benutzerdefinierte Eigenschaften auf Stammebene
Verkettete benutzerdefinierte Eigenschaften
Verschachtelte benutzerdefinierte Eigenschaften
Fallback-Werte
Wandelt
<link>
,<style>
und@import
CSSTransformiert Webkomponenten / Schatten-DOM
Der Vollständigkeit halber: w3c specs
Hoffe das hilft.
(Schamlose Eigenwerbung: Check)
quelle
:root { --primary: #fff } body.certain-page { --primary: #aaa }
. Wie könnte ich mit Ihrem Plugin damit umgehen?--primary: #aaa
Deklaration nicht verarbeitet. Eine ausführlichere Erklärung finden Sie in dieser Ausgabe: Erweitern der Unterstützung außerhalb von: root .Diese Polyfüllung ermöglicht eine fast vollständige Unterstützung für benutzerdefinierte Eigenschaften ( nicht nur auf Stammebene ) in IE11:
https://github.com/nuxodin/ie11CustomProperties
Wie es funktioniert
Das Skript nutzt die Tatsache, dass der IE nur minimale Unterstützung für benutzerdefinierte Eigenschaften bietet, bei denen Eigenschaften unter Berücksichtigung der Kaskade definiert und ausgelesen werden können.
.myEl {-ie-test:'aaa'} // only one dash allowed! "-"
dann lesen Sie es in Javascript:
getComputedStyle( querySelector('.myEl') )['-ie-test']
Features aus der README:
Demo:
https://rawcdn.githack.com/nuxodin/ie11CustomProperties/b851ec2b6b8e336a78857b570d9c12a8526c9a91/test.html
quelle
<script src="yourJsPath/ie11CustomProperties.js"></script>
den Kopfbereich Ihrer HTML-Datei hinzufügen , und IE11 stimmt überein.+1 für den Code-Pen-Snippet-Link im obigen Kommentarbereich von [I has kode]. Eine Sache, die ich jedoch gefunden habe, ist, dass das Snippet leicht modifiziert werden muss, damit die Funktionsdeklarationen im JSON-Format definiert sind, damit IE11 sich nicht beschwert. Unten finden Sie die leicht modifizierte Version des Codestift-Snippets:
quelle
Ich habe diese Version von Polyfill ausprobiert, aber es kam zu Fehlern, wenn eine Zeile in CSS mehrere Variablen (FI-Schriftart und Farbe) enthielt. Ein Kollege von mir hat mir geholfen. Siehe Zeile 94.
quelle
Um den Internet Explorer zu unterstützen, verwenden Sie einfach das folgende Skript im index.html-Head-Tag und es funktioniert wie ein Zauber.
quelle