Custom Properties als State

Hier ist eine tolle Idee von James Stanley: eine CSS-Datei (die sich vermutlich täglich aktualisiert) mit CSS-Custom-Properties für „saisonale“ Farben (z. B. Frühling ist Grün, Herbst ist Orange). Sie würden dann die Werte verwenden, um Ihre Website zu thematisieren, in dem Wissen, dass sich diese Farben von Tag zu Tag leicht ändern.

Das ist, was ich beim Schreiben dieses Artikels bekommen habe

:root {
  --seasonal-bg: hsl(-68.70967741935485,9.419354838709678%,96%);
  --seasonal-bgdark: hsl(-68.70967741935485,9.419354838709678%,90%);
  --seasonal-fg: hsl(-68.70967741935485,9.419354838709678%,30%);
  --seasonal-hl: hsl(-83.70967741935485,30.000000000000004%,50%);
  --seasonal-hldark: hsl(-83.70967741935485,30.000000000000004%,35%);
}

Ich denke, es wäre unterhaltsamer, wenn die bereitgestellte CSS-Datei nur die Custom Properties und nicht die meinungsbildenden anderen Styles (wie das Setzen des Body-Hintergrunds und dergleichen) enthalten würde. So könnten Sie die Farben so implementieren, wie Sie es wünschen, ohne unerwünschte Nebeneffekte.

CSS als API?

Das bringt mich auf die Idee, dass eine CDN-gehostete CSS-Datei wie diese andere nützliche Dinge enthalten könnte, wie das heutige Datum für die Verwendung in Pseudo-Inhalten oder andere zeitkritische Dinge. Vielleicht die Mondphase? Sportereignisse?! Suppe des Tages?!

/* <div class="soup">The soup of the day is: </div> */
.soup::after {
  content: var(--soupOfTheDay); /* lol kinda */
}

Es ist fast wie eine Daten-API, die extrem einfach zu verwenden ist. Pseudo-Inhalte sind heutzutage sogar zugängliche Inhalte – aber Sie können den Text von Pseudo-Elementen nicht auswählen, also lesen Sie dies nicht als tatsächliche Befürwortung der Verwendung von CSS als Inhalts-API.

Flexibilität von Custom Properties

Will Boyd hat gerade über das Mögliche in einer Custom Property gebloggt. Sie sind enorm flexibel. Fast alles ist ein gültiger Wert für eine Custom Property, und die Verwendung verhält sich dann so, wie Sie es erwarten würden.

body {
  /* totally fine */
  --rgba: rgba(255, 0, 0, 0.1);
  background: var(--rgba);

  /* totally fine */
  --rgba: 255, 0, 0, 0.1;
  background: rgba(var(--rgba));

  /* totally fine */
  --rgb: 255 0 0;
  --a: 0.1;
  background: rgb(var(--rgb) / var(--a));
}

body::after {
  /* totally fine */
  --song: "I need quotes to be pseudo content \A and can't have line breaks without this weird hack \A but still fairly permissive (💧💧💧) ";
  content: var(--song);
  white-space: pre;
}

Bram Van Damme hat diese Flexibilität aufgegriffen, während er Wills Artikel behandelte

Deshalb können Sie CSS Custom Properties verwenden, um

• bedingte Berechnungen durchzuführen

• Daten aus Ihrem CSS an Ihr JavaScript zu übergeben

• Hautton-/Haarfarben-Modifikatoren auf Emojis zu injizieren 

• mehrere Werte mit einer einzigen Custom Property zu wechseln (--foo: ; Hack)

Bram hebt diese „grundlegende“ Zustandswechsel-Qualität hervor, die eine Custom Property leisten kann

:root {
  --is-big: 0;
}

.is-big {
  --is-big: 1;
}

.block {
  padding: calc(
    25px * var(--is-big) +
    10px * (1 - var(--is-big))
  );
  border-width: calc(
    3px * var(--is-big) +
    1px * (1 - var(--is-big))
  );
}

Fügen Sie ein paar Löffel Komplexität hinzu und Sie erhalten The Raven (Media Queries mit Custom Properties).

Ich würde es absolut lieben, wenn im CSS etwas getan würde, um dies zu erleichtern. Die Verwendung von CSS Custom Properties für generischen Zustand wäre erstaunlich. Wir könnten beliebige Stile anwenden, wenn die Benutzeroberfläche in beliebigen Zuständen ist! Denken Sie darüber nach, wie nützlich Media Queries jetzt sind oder wie Container Queries sein werden, aber multipliziert, weil es sich um einen beliebigen Zustand handelt und nicht nur um einen Zustand, den diese preisgeben.

Bram hat das auch behandelt und das erwähnt, was Lea Verou „höhere Custom Properties“ nannte.

/* Theoretical! */

.square {
  width: 2vw;
  padding: 0.25vw;
  aspect-ratio: 1/1;

  @if (var(--size) = big) {
    width: 16vw;
    padding: 1vw;
  }
}

.my-input {
  @if(var(--pill) = on) {
    border-radius: 999px;
   }
}

Zur Benennung

Will nennt sie „CSS-Variablen“, was sehr üblich und verständlich ist. Sie werden Sätze lesen (und ich habe welche geschrieben), die lauten: „CSS-Variablen (auch bekannt als CSS Custom Properties)“ oder „CSS Custom Properties (auch bekannt als CSS-Variablen)“. Šime Vidas hat kürzlich bemerkte, dass es einen ziemlich korrekten Weg gibt, diese Dinge zu bezeichnen: --dieser-teil ist die Custom Property und var(--dieser-teil) ist die Variable, was direkt aus der Verwendung in der Spezifikation stammt.

Zustand von JavaScript-Bibliotheken… Automatisch?

Das erinnert mich an diesen Vue-Vorschlag. Ich bin mir nicht sicher, ob er irgendwo hingekommen ist, aber die Idee ist, dass der Zustand einer Komponente automatisch als CSS Custom Properties verfügbar gemacht würde.

<template>
  <div class="text">Hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style vars="{ color }">
.text {
  color: var(--color);
}
</style>

Dadurch, dass color Teil des Zustands dieser Komponente ist, ist --color als Zustand für das CSS dieser Komponente verfügbar. Ich halte das für eine großartige Idee.

Was wäre, wenn jedes Mal, wenn Sie useState in React verwenden, CSS Custom Properties auf :root gesetzt würden und automatisch aktualisiert würden. Zum Beispiel, wenn Sie das hier machen würden

import React, { useState } from 'https://cdn.skypack.dev/react@^16.13.1';
import ReactDOM from 'https://cdn.skypack.dev/react-dom@^16.13.1';

const App = () => {
  const [ activeColor, setActiveColor ] = useState("red");
  return(
    <div className="box">
      <h1>Active Color: {activeColor}</h1>
      <button onClick={() => {setActiveColor("red")}}>red</button>
      <button onClick={() => {setActiveColor("blue")}}>blue</button>
    </div>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))

Und Sie wüssten, dass Sie so etwas tun könnten

.box {
  border-color: 2px solid var(--activeColor);
}

Da sich der Zustand automatisch einer Custom Property zugeordnet hätte. Jemand sollte einen useStateWithCustomProperties Hook oder so etwas machen, um das zu tun. #kostenloseidee

Bibliotheken wie React und Vue dienen dem Aufbau von Benutzeroberflächen. Ich finde, es macht viel Sinn, dass der Zustand, den sie verwalten, automatisch für CSS verfügbar gemacht wird.

Könnten Browser uns mehr Seitenstatus als Umgebungsvariablen geben?

Wenn wir schon von Zustand sprechen, den CSS kennen sollte, habe ich einige Demos gesehen, die lustige Dinge tun, indem sie Dinge wie die aktuelle Mausposition oder Scrollposition auf CSS abbilden. Ich denke, es ist nicht völlig unvernünftig zu verlangen, dass diese Daten nativ für CSS verfügbar gemacht werden. Wir haben bereits das Konzept von Umgebungsvariablen, wie z. B. env(safe-area-inset-top), und ich könnte mir vorstellen, dass dies verwendet wird, um den Seitenstatus verfügbar zu machen, wie env(page-scroll-percentage) oder env(mouseY).