Faking env() to Use it Now

Es gibt bereits eine env() Funktion in CSS, aber sie kam irgendwie aus dem Nichts als Apple-Ding, um mit „The Notch“ umzugehen, hat es aber zu einem Entwurfsstandard geschafft. Der Punkt wird sein, dass UAs oder Autoren Variablen deklarieren, die nicht geändert werden können. Globale const für CSS, sozusagen.

Dieser Entwurf scheint noch nicht anzugeben, wie wir diese env() Werte tatsächlich *setzen* werden. Wenn Sie sie jetzt wollen, wäre der einfachste Weg, sie zu faken, reguläre CSS-Custom-Properties zu verwenden und sie einfach nicht zu ändern.

Aber wenn Sie trotzdem diese env() Syntax wollen, gibt es ein PostCSS Plugin, um sie zu emulieren. Die Art und Weise, wie das Plugin damit umgeht, ist über eine JavaScript-Datei, die sie deklariert.

postcssCustomProperties({
  importFrom: 'path/to/file.js' /* module.exports = {
    environmentVariables: {
      '--branding-padding': '20px',
      '--branding-small': '600px'
    }
  } */
});

Dass sie ihr Leben als JavaScript beginnen, ist interessant, da es bedeutet, dass wir vielleicht einen einzigen Ort haben könnten, um Variablen festzulegen, die sowohl für JavaScript *als auch* für CSS zugänglich sind.

Das ist, was Harry Nicholls in seinem Artikel „Why you should use CSS env()“ mehr behandelt, wie einige Fallstricke bei der Arbeit mit Einheiten und so weiter. Aber wenn Sie wirklich eine einzige Quelle für unveränderliche Variablen in sowohl CSS als auch JavaScript benötigten, dann würde ich sagen, dass dies ein guter Weg ist – und potenziell entfernt werden könnte, sobald die Unterstützung für env() offiziell eintrifft.