Space-Toggles

Quelle: https://github.com/propjockey/css-sweeper#css-is-a-programming-language-thanks-to-the-space-toggle-trick
Autoren: Jane Ori und Alex Simonides

CSS ist eine Programmiersprache dank des Space-Toggle-Tricks

Grundlagen des Space Toggle:

Wenn deine --css-var ein Leerzeichen enthält --toggler: ;, kann sie beliebig oft hinzugefügt werden, ohne den Wert zu verändern:

--toggler: ;
    --red-if-toggler: var(--toggler) red;
    background: var(--red-if-toggler, green); /* wird rot sein! */

Wenn deine --css-var initial enthält --toggler: initial; (oder nie definiert wurde), erzwingt sie beim Zugriff ein Fallback:

--toggler: initial;
    --red-if-toggler: var(--toggler) red;
    background: var(--red-if-toggler, green); /* wird grün sein! */

Space Toggles können für UND-Logik kombiniert werden:

--red-if-togglersalltrue: var(--tog1) var(--tog2) var(--tog3) red;

Space Toggles können für ODER-Logik kombiniert werden:

--red-if-anytogglertrue: var(--tog1, var(--tog2, var(--tog3))) red;

Checkboxen (und Radiobuttons) sind großartige Quellen für Space Toggles (Danke an @RockStarwind für diese Idee):

#common-css-var-area { 
      /* setze alle "not"-Werte standardmäßig auf wahr */ 
      --not-flagged: ; 
    }
    #mycheckbox:checked ~ #common-css-var-area { 
      --flagged: ; 
      --not-flagged: initial; 
    }
    #anotherbox:checked ~ #common-css-var-area { 
      --open: ; 
    }
    #common-css-var-area {
      --yellow-if-flagged-and-open: var(--open) var(--flagged) yellow;
      --white-if-not-flagged-and-open: var(--open) var(--not-flagged) white;
      --red-if-flagged: var(--flagged) red;
      color: var(--yellow-if-flagged-and-open, var(--white-if-not-flagged-and-open, var(--red-if-flagged, black)))
    }
    /* Farbe ist schwarz, wenn nicht markiert und nicht geöffnet */

Zur Referenz – hier wurde der Space Toggle kürzlich diskutiert:

Einführungstweet (etwas komplex)

Bibliothek, die Space Toggles basierend auf @media-Zuständen bereitstellt

Tweet zur Einführung von css-media-vars mit Erklärung, dass Space Toggle standardkonform ist

Beispiel mit einer Schaltung, die Checkboxen zur Zustandsverwaltung nutzt

Space Toggle wurde mehrfach unabhängig entdeckt:

@anatudor – vermutlich die Erste, vor ca. 3 Jahren

@JamesOx57 – im April 2020, was die Entwicklung von augmented-ui v2 anstieß

@DavidKPiano – im Juni 2020; verwendet zusätzlich leere Kommentare --pnl: /**/; und nennt es „prop-and-lock“

Mehr