Space-Toggles

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

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