Benutzerdefinierte Eigenschaften als Zustand

Eine interessante Idee von James Stanley: Eine CSS -Datei (ungefähr einmal am Tag aktualisiert) mit CSS -benutzerdefinierten Eigenschaften in "saisonalen" Farben (zum Beispiel ist der Frühling grün und der Herbst ist orange). Sie können diese Werte dann verwenden, um das Thema für Ihre Website festzulegen und zu wissen, dass sich diese Farben jeden Tag leicht ändern.

Ich habe das Folgende erhalten, als ich diesen Artikel schreibe:

 :Wurzel {
  -Seasonal-BG: HSL (-68.70967741935485, 9,419354838709678%, 96%);
  -Saison-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.00000000000004%, 35%);
}

Ich denke, es wäre noch interessanter, wenn die bereitgestellte CSS -Datei nur eine benutzerdefinierte Eigenschaft ist, anstatt andere Stile mit subjektiven Meinungen (z. B. das Festlegen des Subjekt -Hintergrunds usw.). Auf diese Weise können Sie die Farbe auf eine Weise implementieren, die Sie ohne Nebenwirkungen auswählen.

CSS als API?

Dies erinnert mich daran, dass eine CDN-veranstaltete CSS-Datei wie diese andere nützliche Inhalte enthalten kann, wie z. B. das heutige Datum (für Pseudo-Inhalt) oder andere spezielle zeitkritische Inhalte. Vielleicht ist es die Mondphase? Sportpartitur? ! Tägliche Suppe? !

 /*<div> Die Suppe des Tages ist:</div> */
.Soup :: nach {
  Inhalt: var (-Suppeoftheday); / * lol irgendwie */
}

Es ist fast wie eine äußerst einfach zu verwendende Daten -API. Pseudo-Inhalt ist heutzutage sogar zugänglich.

Flexibilität benutzerdefinierter Eigenschaften

Will Boyd hat gerade einen Blog darüber geschrieben, was in benutzerdefinierten Eigenschaften enthalten sein kann. Sie sind sehr flexibel. Fast alles ist ein gültiger benutzerdefinierter Eigenschaftswert, und seine Verwendung ist in der Regel wie erwartet.

 Körper {
  /* Kein Problem*/
  -RGBA: RGBA (255, 0, 0, 0,1);
  Hintergrund: var (-rgba);

  /* Kein Problem*/
  -RGBA: 255, 0, 0, 0,1;
  Hintergrund: RGBA (var (-rgba));

  /* Kein Problem*/
  -RGB: 255 0 0;
  -A: 0,1;
  Hintergrund: RGB (var (-rgb) / var (-a));
}

Body :: After {
  /* Kein Problem*/
  -Song: "Ich brauche Zitate, um Pseudo-Inhalte zu sein, und kann ohne diesen seltsamen Hack \ a keine Zeilenpausen haben, aber immer noch ziemlich permitiv (???)";
  Inhalt: var (-Lied);
  weißer Raum: PRE;
}

Bram van Damme erfasst diese Flexibilität bei der Einführung von Wills Artikel:

Aus diesem Grund können Sie CSS -benutzerdefinierte Eigenschaften verwenden, um:

• Bedingte Berechnungen durchführen

• Übergeben Sie Daten von CSS an JavaScript

• Injizieren Sie einen Hautton-/Haarfarbenmodifikator in Emojis

• Wechseln Sie mehrere Werte mit einer benutzerdefinierten Eigenschaft (--foo:; Hack)

Bram weist darauf hin, dass diese "grundlegende" Zustandsschaltfunktion, die benutzerdefinierte Eigenschaften erreichen können:

 :Wurzel {
  -IS-Big: 0;
}

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

.block {
  Polsterung: Calc (
    25px * var (-ist-big)  
    10px * (1-var (-is-big))
  );
  Randbreit: Calc (Calc ()
    3px * var (-ist-big)  
    1px * (1-var (-is-big))
  );
}

Fügen Sie ein paar Komplexitätsschiffe hinzu und Sie erhalten Krähen (Medienabfrage mit benutzerdefinierten Eigenschaften).

Ich möchte wirklich, dass in CSS etwas passiert, um diesen Prozess zu vereinfachen. Es wäre großartig, CSS -benutzerdefinierte Eigenschaften für den gemeinsamen Zustand zu verwenden. Wenn die Benutzeroberfläche in jedem Zustand ist, können wir jeden Stil anwenden! Denken Sie darüber nach, wie nützlich die Medienabfrage jetzt ist oder wie nützlich die Containerabfrage sein wird, aber dies ist noch verstärkt, weil es nicht der Zustand der Öffentlichkeit ist, sondern nur willkürlicher Staat.

Bram stellte dies auch vor und bezog sich auf das, was Lea Verou als „benutzerdefinierte Eigenschaften auf höherer Ebene“ bezeichnet:

 /* Theoretisch! */

.Quadrat {
  Breite: 2VW;
  Polsterung: 0,25 VW;
  Aspektverhältnis: 1/1;

  @if (var (-size) = big) {
    Breite: 16VW;
    Polsterung: 1VW;
  }
}

.My-Input {
  @if (var (-Pill) = on) {
    Border-Radius: 999px;
   }
}

Über die Benennung

Wird sie "CSS -Variablen" nennt, was sehr häufig und leicht zu verstehen ist. Sie werden Sätze wie folgt lesen (ich habe auch geschrieben): "CSS -Variablen (auch bekannt als CSS -benutzerdefinierte Eigenschaften)" oder "CSS -benutzerdefinierte Eigenschaften (auch bekannt als CSS -Variablen)". Šime Vidas hat kürzlich darauf hingewiesen, dass es eine ziemlich korrekte Möglichkeit gibt, sich auf folgende Dinge zu beziehen:-Dieser Teil ist eine benutzerdefinierte Eigenschaft, Var (-dieser Teil) ist eine Variable, die direkt aus der Verwendung in der Spezifikation stammt.

Status der JavaScript -Bibliothek ... Automatisch?

Dies erinnert mich an diesen Vue -Vorschlag. Ich bin mir nicht sicher, ob es Fortschritte macht, aber die Idee ist, dass der Zustand der Komponente automatisch als CSS -benutzerdefinierte Eigenschaft ausgesetzt wird.

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

Da Farbe Teil des Zustands dieser Komponente ist, kann -Farbe als Zustand der CSS dieser Komponente verwendet werden. Ich denke, das ist eine gute Idee.

Was ist, wenn Sie bei React den UseState verwenden, die benutzerdefinierten CSS -Eigenschaften aufgestellt werden: root und automatisch aktualisiert. Zum Beispiel, wenn Sie dies tun:

 reag import, {usestate} aus 'https://cdn.skypack.dev/react@^16.13.1';
Importieren Sie Reactdom von 'https://cdn.skypack.dev/react-dom@^16.13.1';

const app = () => {
  const [activeColor, setactiveColor] = usustate ("rot");
  zurückkehren(
    <div classname="box">
      <h1 id="Aktive-Farbe-activeColor">Aktive Farbe: {activeColor}</h1>
       {setactiveColor ("rot")}}> rot
       {setactiveColor ("blau")}}> blau
    </div>
  );
}

Reactdom.render (<app></app> Anwesend
document.getElementById ("root"))

Und Sie wissen, dass Sie das tun können:

 .Kasten {
  Grenzfarbe: 2px Solid Var (-ActiveColor);
}

Da der Status automatisch den benutzerdefinierten Eigenschaften zugeordnet ist. Jemand sollte einen UsestateWithCustomProperties -Haken oder ähnliches erstellen. #freidea

Bibliothek wie React und Vue werden verwendet, um UIS zu erstellen. Ich denke, es ist sehr sinnvoll, dass der Staat, den er verwaltet, automatisch CSS aussetzt.

Kann der Browser einen mehr Seitenstatus als Umgebungsvariablen bereitstellen?

Apropos Staaten, dass CSS es wissen sollte, ich habe viele Demos gesehen, die interessante Dinge tun, indem ich Dinge wie die aktuelle Mausposition oder die Scrollposition auf CSS abbildert. Ich denke nicht, dass es völlig unangemessen ist, dass diese Daten lokal CSS ausgesetzt werden. Wir haben bereits das Konzept von Umgebungsvariablen wie Env (Safe-Area-Inset-Top), und ich kann sehen, dass es verwendet wird, um Seitenzustände wie Env (Page-Scroll-Percentage) oder Env (Mausyy) aufzudecken.

Das obige ist der detaillierte Inhalt vonBenutzerdefinierte Eigenschaften als Zustand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!