Wir alle lernten die env()-Funktion in CSS kennen, als das ganze Drama um „The Notch“ und das iPhone X aufkam. Die Art und Weise, wie Apple uns half, Inhalte von diesen „unsicheren“ Bereichen fernzuhalten, war, uns im Wesentlichen hartkodierte Variablen zur Verfügung zu stellen, die wir verwenden konnten.
padding:
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left);Äh, ok! Seltsam! Nun, neun Monate später ist ein „inoffizieller Entwurfsentwurf“ für env() gelandet. So funktionieren Spezifikationen, soweit ich das verstehe. Manchmal treiben Browserhersteller Dinge voran, die sie benötigen, und dann werden sie standardisiert. Es ist nicht immer so, dass man darauf wartet, dass Standardisierungsgremien Dinge erfinden und die Browserhersteller diese dann implementieren.
Sind Umgebungsvariablen etwas, worüber man sich freuen kann? Aber ja! In gewisser Weise sind sie wie eine eingeschränktere Version von CSS Custom Properties, aber das bedeutet, dass sie potenziell für *mehr Dinge* verwendet werden können.
CSS-Umgebungsvariablen werden standardisiert:https://#/QKFBM3WFT2
Ermöglichen Sie das Abrufen und Verwenden von browser- und autordefinierten Variablen: Typografie, Farben, Notch und andere spezifische Layout-/Gerätewerte.
Sie funktionieren in Media Queries, wo CSS Custom Properties nicht verwendet werden können. pic.twitter.com/FWrPiBiAqp— Serg Hospodarets (@malyw) 29. April 2018
👀 Brandneue Spezifikation für globale env()-Variablen in CSS: https://#/6YfXWFTyhN
Vergessen Sie Notches, das Wichtigste hier ist die Möglichkeit, CSS-Variablen von der Kaskade zu trennen. Cool ① für Leistung/Codeorganisation ②, weil Sie sie möglicherweise in Media Queries verwenden können!
— Eric Portis (@etportis) 30. April 2018
Eric weist auch auf einige sehr beeindruckende frühe Überlegungen hin
PROBLEM 4 – Definieren Sie den vollständigen Satz von Stellen, an denen
env()verwendet werden kann.
- Sollte beispielsweise eine beliebige Untermenge der MQ-Syntax ersetzen können.
- Sollte Selektoren ersetzen können, vielleicht?
- Sollte es auf Regel-Ebene funktionieren, damit Sie beliebige Dinge in eine Regel einfügen können, wie z. B. die Wiederverwendung eines Deklarationsblocks?
Wahrscheinlich immer noch mit JavaScript veränderbar. Ich denke, der Hauptgrund, warum CSS Custom Properties *nicht* mit Media Queries, Selektoren und Ähnlichem funktionieren, ist, dass sie mit der Kaskade funktionieren, was zu einigen sehr seltsamen Endlosschleifenlogiken führt, bei denen es sinnvoll ist, dass CSS sich nicht einmischen möchte.
Wenn Sie sich für PostCSS interessieren, gibt es ein Plugin! Aber ich warne... die gleichen Probleme, die bei der Vorverarbeitung von CSS Custom Properties auftreten, gelten auch hier (außer dem ersten in diesem Artikel).
Ich verstehe nicht wirklich, warum es nicht möglich war, var() so zu modifizieren, dass es auch beliebige Nicht-Custom-Properties lesen kann. Allein das würde viel Nützliches ermöglichen.
Bei Media Queries, ist das Problem, dass sie immer auf der Root-Ebene sind? Vielleicht erlauben Sie, dass sie dann auf einen Selektor beschränkt sind, wie es Sass/Less tun.
Der Notch bei Smartphones wird dieses Jahr zum Mainstream werden und wir müssen eine Lösung dafür finden. Das sind interessante Dinge. Danke fürs Teilen!
Das wäre großartig, um die Browser-Schriftgröße zu ermitteln und die Mentalität „die meisten Benutzer sind auf 16px eingestellt“ abzulegen.
CSS scheint sich langsam zu einer kleinen Programmiersprache zu entwickeln.
env(scrollbar-size)wäre großartig