Der große Gotcha mit benutzerdefinierten Eigenschaften

Vor kurzem stellte ich fest, dass viele Menschen (einschließlich mir) durch diese Funktion von CSS -benutzerdefinierten Attributen verwirrt sind, also habe ich beschlossen, sie aufzuzeichnen.

Fügen wir ein paar benutzerdefinierte Eigenschaften in CSS hinzu:

 html {
  -Color-1: Rot;
  -Color-2: Blau;
}

Wir verwenden sie sofort, um einen Hintergrundgradienten zu erstellen:

 html {
  -Color-1: Rot;
  -Color-2: Blau;

  -BG: Linear-Gradient (nach rechts, var (-color-1), var (-color-2));
}

Angenommen, es gibt zwei Divs auf der Seite:

<div></div>
<div></div>

Lass uns sie stylen:

 div {
  Hintergrund: var (-BG);
}

Das funktioniert komplett! wunderbar!

Lassen Sie uns nun den Stil ändern. Ich möchte nicht, dass es sich von rot zu blau ändert, ich möchte, dass es von grün zu blau wechselt. Es ist sehr einfach, ich habe das Rot auf Grün aktualisiert:

 html {
  -Color-1: Rot;
  -Color-2: Blau;

  -BG: Linear-Gradient (nach rechts, var (-color-1), var (-color-2));
}
div {
  Hintergrund: var (-BG);
}
.Variation {
  -Color-1: grün;
}

ungültig! (Die Sirenen sind laut, die Hörner sind laut und häusliche Tiere verstecken sich überall).

Freunde, das funktioniert nicht.

Soweit ich weiß, ist das Problem, dass --bg in keinem Div deklariert wurde. Es kann verwenden --bg , weil es auf einer höheren Ebene deklariert wird, aber wenn es verwendet wird, wurde sein Wert gesperrt. Nur weil Sie die anderen verwendeten Attribute geändert haben, wenn --bg -Deklaration nicht bedeutet, dass das Attribut nach allen Orten sucht, an denen es als Abhängigkeit verwendet wird, und alles zu aktualisieren, was es verwendet.

Leider fühlt sich diese Erklärung nicht richtig an. Aber das ist die beste Erklärung, an die ich denken kann.

Lösung? Nun, es gibt einige.

Lösung 1: Begrenzen Sie den variablen Umfang auf die Stelle, an der es verwendet wird.

Sie können das tun:

 html {
  -Color-1: Rot;
  -Color-2: Blau;
}

div {
  -BG: Linear-Gradient (nach rechts, var (-color-1), var (-color-2));
  Hintergrund: var (-BG);
}
.Variation {
  -Color-1: grün;
}

Jetzt --bg wird in beiden Divs deklariert, und Änderungen zu --color-1 Abhängigkeiten funktionieren.

Lösung 2: Setzen Sie die Selektoren für die meisten Variablen mit getrenntem Komma ein.

Angenommen, Sie haben die gemeinsamen Operationen durchgeführt, um eine Reihe von Variablen einzustellen :root . Dann triffst du auf dieses Problem. Sie können einfach zusätzliche Selektoren zur Hauptdeklaration hinzufügen, um sicherzustellen, dass Sie den richtigen Bereich treffen.

 HTML,
div {
  -Color-1: Rot;
  -Color-2: Blau;

  -BG: Linear-Gradient (nach rechts, var (-color-1), var (-color-2));
}
div {
  Hintergrund: var (-BG);
}
.Variation {
  -Color-1: grün;
}

In einigen anderen Beispielen, die möglicherweise nicht zu weit hergeholt sind, könnte es so aussehen:

 :Wurzel, 
.Taste,
.Wh was auch immer-it-is-a-bandaid {
  -Padding-Inline: 1REM;
  -Padding-Block: 1Rem;
  -Padding: var (-Padding-Block) var (-Padding-Inline);
}

.Taste {
  Polsterung: var (-Polsterung);
}
.button.less-wide {
  -Padding-Inline: 0,5REM;
}

Lösung 3: umfassender Modus

Gehen Sie zu seiner - Setzen Sie Variablen überall.

 * {{
  -Access: Ich;
  -wo immer: du;
  -want: zu;

  --hogwild: var (-access) var (-wohin auch immer);
}

Dies ist keine gute Lösung. Ich habe kürzlich einen Chat gehört, bei dem eine der mittelgroßen Websites aufgrund der Seitenwiedergabe um 500 ms verzögert wurde, da bei jeder Zeichnung der Seite alle Attribute berechnet werden müssen. Es "funktioniert", aber dies ist eines der wenigen Beispiele, bei denen Sie durch Selektoren legitime Leistungsprobleme verursachen können.

Lösung 4: Einführen Sie neue "Standard" -Seigenschaften und Fallback

All die Anerkennung hier wird Stephen Shaw zugeschrieben, den ich zuerst bei seiner Erforschung all dieser Inhalte gesehen habe.

Gehen wir zurück zu dem, wo wir diese Frage zum ersten Mal demonstriert haben:

 html {
  -Color-1: Rot;
  -Color-2: Blau;

  -BG: Linear-Gradient (nach rechts, var (-color-1), var (-color-2));
}

Was wir tun müssen, ist uns zwei Dinge zu geben:

1. Eine Möglichkeit, den gesamten Hintergrund zu decken
2. Eine Möglichkeit, einen Teil eines Gradientenhintergrunds abzudecken

Also müssen wir das tun:

 html {
  -Color-1: Rot;
  -Color-2: Blau;
}
div {
  -BG-Default: Linear-Gradient (nach rechts, var (-color-1), var (-color-2));
  Hintergrund: var (-bg, var (-BG-Default));
}

Beachten Sie, dass wir überhaupt nicht deklarieren --bg . Es sitzt nur dort und wartet auf einen Wert, und wenn es einen Wert erhält, ist es der Wert des "Gewinns". Aber wenn nicht, fällt es auf unser --bg-default zurück. Jetzt……

1. Wenn ich --color-1 oder --color-2 , setze, ersetzt es den Teil des Gradienten wie erwartet (solange ich dies auf einem Selektor tue, der einen der Divs berührt).
2. Alternativ kann ich --bg , den gesamten Hintergrund auf alles zurücksetzen, was ich will.

Es fühlt sich wie ein guter Weg, um damit umzugehen.

Manchmal gibt es in der Tat einen Fehler in den benutzerdefinierten CSS -Eigenschaften. Aber das ist keiner von ihnen. Auch wenn es für mich ein bisschen wie ein Fehler ist, ist es natürlich nicht. Nur eines dieser Dinge, die Sie wissen müssen.

Das obige ist der detaillierte Inhalt vonDer große Gotcha mit benutzerdefinierten Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!