CSS-Umgebungsvariablen

0
37

Wir alle waren eingeführt, um das env () – Funktion in CSS, wenn Sie all das drama um “Die Kerbe” und das iPhone X ging nach unten. Die Art und Weise, dass Apple landete auf helfen Sie uns verschieben der Inhalte Weg von den “unsicheren” Bereichen war es uns im wesentlichen hart-codierten Variablen zu verwenden:

Polsterung:
env(safe-Bereich-inset-top)
env(safe-Bereich-Einschub rechts)
env(safe-Bereich-inset unten)
env(safe-Bereich-inset Links);

Äh ok! Komisch! Jetzt, neun Monate später, eine “Inoffizielle Vorschlag Entwurf” für env() gelandet ist. Dies ist, wie die specs funktionieren, wie ich es verstehe. Manchmal browser-Anbieter vorantreiben Sachen, die Sie benötigen, und dann ist es standardisiert. Es ist nicht immer darauf warten, um für Normungsgremien, Dinge zu erfinden und dann die browser-Anbieter die Implementierung dieser Dinge.

Umgebungsvariablen sind etwas zu begeistern? Heck yeah! In einem Sinn, Sie sind wie eine mehr eingeschränkte version von CSS Benutzerdefinierte Eigenschaften, aber das bedeutet, dass Sie kann potenziell verwendet für andere Dinge.

CSS-Umwelt-Variablen sind immer standardisiert:https://t.co/QKFBM3WFT2
Ermöglichen, zu erhalten und verwenden Sie die browser – und die vom Autor definierte Variablen: Typografie, Farben, notch und andere spezifische layout/Gerät-Werte.
Sie arbeiten in der Medien-Anfragen, in denen Benutzerdefinierte CSS-Eigenschaften nicht verwendet werden. pic..com/FWrPiBiAqp

— Serg Hospodarets (@malyw) April 29, 2018

👀 Marke neue Skillung für global env ( – ) Variablen in CSS: https://t.co/6YfXWFTyhN

Vergessen Kerben, die wichtige Sache hier ist die Möglichkeit, eigene CSS-Variablen aus der Kaskade. Cool ① für perf/code-Organisation ② weil Sie vielleicht in der Lage sein, um Sie in media queries!

— Eric Portis (@etportis) April 30, 2018

Eric zeigt auch einige sehr genial früh denken:

AUSGABE 4 – Definieren Sie den vollständigen Satz der Orte env() kann verwendet werden.

  • Sollte in der Lage sein, Sie zu ersetzen eine beliebige Teilmenge von MQ-syntax, zum Beispiel.
  • Sollte in der Lage sein zu ersetzen, Selektoren, vielleicht?
  • Sollte es auf eine Regel-Ebene, so können Sie beliebige Sachen in der Regel, wie die Wiederverwendung von einem block von Deklarationen?

Wahrscheinlich immer noch änderbar-mit-JavaScript als gut. Ich würde denken, der Hauptgrund, CSS Custom Properties funktioniert nicht mit media queries und-Selektoren und solche ist, weil Sie die Arbeit mit der Kaskade, das eröffnet einige sehr seltsame Endlosschleife Logik, wo es Sinn macht CSS nicht beschreiten wollen.

Wenn Sie in der PostCSS Sache, es ist ein plugin! Ich möchte aber warnen… die gleichen Probleme, widerfahren Vorverarbeitung CSS Benutzerdefinierte Eigenschaften gilt hier (außer dem ersten in diesem Artikel).