it-swarm.com.de

Problemumgehung für CSS-Variablen im IE?

Ich entwickle zurzeit eine Webanwendung in Outsystems, in der ich die CSS anpassen muss, in der ich Variablen verwende. Ich muss garantieren, dass die App über alle Browser läuft, auch im Internet Explorer. IE unterstützt keine CSS-Variablen, wie Sie in der folgenden Abbildung von this source sehen können.

 

Gibt es eine Problemumgehung für die Verwendung von Variablen in IE, da ich CSS-Variablen verwenden muss?

15
Rafael Valente

Ja, es gibt eine Möglichkeit, dieselbe Art, wie Sie jede CSS-Kompatibilität herstellen: Verwenden Sie ein spezielles CSS-Fallback, das vom Browser unterstützt wird.

body {
  --text-color: red;
}

body {
  color: red /* default supported fallback style */
  color: var(--text-color); /* will not be used by any browser that doesn't support it, and will default to the previous fallback */
}

Diese Lösung ist unglaublich redundant und vereitelt "fast" den Zweck von CSS-Variablen ... ABER es ist für die Browserkompatibilität erforderlich. Wenn Sie dies tun, werden die CSS-Variablen im Wesentlichen unbrauchbar. Ich fordere Sie jedoch auf, sie weiterhin zu verwenden, da dies eine wichtige Erinnerung daran ist, dass diese Werte an anderer Stelle referenziert werden und in jedem Fall aktualisiert werden müssen Auftreten von "Farbe" und dann haben Sie ein inkonsistentes Styling, da relevante CSS-Werte nicht synchron sind. Die Variable wird eher als Kommentar dienen, aber sehr wichtig.

15

Falls jemand auf dieses Problem stößt, hat es ein ähnliches Problem, bei dem ich es so einstellen musste. 

a {
  background: var(--new-color);
  border-radius: 50%;
}

Ich fügte die Hintergrundfarbe vor der Variablen hinzu. Wenn diese nicht geladen wurde, fiel sie auf das Feld zurück. 

a {
  background: #3279B8;
  background: var(--new-color);
  border-radius: 50%;
}
5
Derek MC

Es gibt noch keine Möglichkeit in "normaler" CSS, aber werfen Sie einen Blick auf sass/scss oder weniger.

hier ist ein scss beispiel

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
2
André Schmid

Es gibt eine Polyfill, die eine fast vollständige Unterstützung für CSS-Variablen in IE11 ermöglicht:
https://github.com/nuxodin/ie11CustomProperties
(Ich bin der Autor)

Das Skript macht sich die Tatsache zunutze, dass IE) nur minimale Unterstützung für benutzerdefinierte Eigenschaften bietet, bei denen Eigenschaften definiert und unter Berücksichtigung der Kaskade ausgelesen werden können.
.myEl {-ie-test:'aaa'} // only one dash allowed! "-"
dann lies es in Javascript:
getComputedStyle( querySelector('.myEl') )['-ie-test']

Aus der README:

Features

  • behandelt dynamisch hinzugefügten HTML-Inhalt
  • behandelt dynamisch hinzugefügte, -Elemente
  • verkettung --bar:var(--foo)
  • fallback var(--color, blue)
  • : focus,: target,: hover
  • js-integration:
    • style.setProperty('--x','y')
    • style.getPropertyValue('--x')
    • getComputedStyle(el).getPropertyValue('--inherited')
  • Inline-Stile: <div ie-style="--color:blue"...
  • kaskade funktioniert
  • vererbung funktioniert
  • unter 3k (min + gzip) und frei von Abhängigkeiten

Demo:

https://rawcdn.githack.com/nuxodin/ie11CustomProperties/b851ec2b6b8e336a78857b570d9c12a8526c9a91/test.html

2
Tobias Buschor

Eine andere Möglichkeit besteht darin, Farben in einer JS-Datei zu deklarieren (in meinem Fall reagiere ich) und dann einfach die Variable zu verwenden, die Sie in der JS-Datei definiert haben.

Zum Beispiel:

  • in globals.js
export const COLORS = {
  yellow: '#F4B400',
  yellowLight: '#F4C849',
  purple: '#7237CC',
  purple1: '#A374EB',
}
  • in deiner Akte
import { COLORS } from 'globals'

und dann benutze einfach COLORS.yellow, COLORS.purple, usw.

1
Sata Suarez
body {
  --text-color : red; /* --text-color 정의 */
}    

body {
   color: var(--text-color, red); /* --text-color 정의되지 않으면 red로 대체됨 */
}

body {
   color: var(--text-color, var(--text-color-other, blue));
   /* --text-color, --text-color-other 가 정의되지 않으면 blue로 대체됨 */
}
1
이다빈

Erstellen Sie eine separate .css-Datei für Ihre Variablen. Kopieren Sie den Inhalt der variable.css-Datei an das Ende Ihrer main.css-Datei. Suchen Sie alle Variablennamen in der Datei main.css und ersetzen Sie sie mit dem Hex-Code für diese Variablen. Zum Beispiel: ctrl-h um var (- myWhiteVariable) zu finden und durch # 111111 zu ersetzen. 

Randbemerkung: Wenn Sie:: root {} in der Datei main.css beibehalten und nur auskommentieren, können Sie diese Hexcodes später verwenden, um die Fallback-Farben zu aktualisieren. 

0
Walter Ingham