Custom Property Brain Twisters

Ich bin Teil der 82 %, die [bei Leas Quiz] falsch geantwortet haben in Leas Quiz (Tweet-Version).

Hier ist der Code

:root {
  --accent-color: skyblue;
}

div {
  --accent-color: revert; 
  background: var(--accent-color, orange);
}

Welchen Hintergrund erwarte ich also, dass <div> hat?

Mein Gehirn denkt so

Nun, --accent-color ist deklariert, also ist es definitiv nicht orange (der Fallback).
Der Wert für den Hintergrund ist revert, also ist es im Wesentlichen background: revert;
Die background-Eigenschaft erbt jedoch nicht, und selbst wenn Sie sie dazu zwingen würden, würde sie vom <body> erben, nicht von der Root.
Also... transparent.

Nein.

Lea

[Da der Wert revert ist,] hebt er alle Autorenstile auf und setzt ihn auf den Wert zurück, den die Eigenschaft aus der Benutzerschulddatei und der UA-Schulddatei hätte. Unter der Annahme, dass es keine --accent-color Deklaration in der Benutzerschulddatei gibt und UA-Schulddateien natürlich keine benutzerdefinierten Eigenschaften festlegen, bedeutet dies, dass die Eigenschaft keinen Wert hat.
Da benutzerdefinierte Eigenschaften vererbbare Eigenschaften sind (es sei denn, sie sind registriert mit inherits: false, aber diese hier nicht), bedeutet dies, dass der vererbte Wert hereinkommt, der - Sie haben es erraten - skyblue ist.

Stephen hat neulich ein ähnliches Quiz gepostet

CSS-Variablen-Rätsel: Welche Farbe wird das <p>-Element haben? pic.twitter.com/NpIi1IY3dw
— Shaw ( front-end.social/@shshaw ) (@shshaw) 4. Juni 2021

Wieder macht mein Gehirn es total falsch. Es denkt

Okay, nun, --color ist deklariert, also ist es nicht blau (der Fallback).
Es ist nicht red, weil die zweite Deklaration diese überschreiben wird.
Also, es ist im Wesentlichen wie p { color: inherit; }.
Das <p> wird yellow vom <body> erben, was es sowieso natürlich getan hätte, aber egal, es ist immer noch yellow.

Nein.

Anscheinend erbt inherit dort tatsächlich vom nächsten Ort im Baum, der es setzt, was html tut, also green. Das ist tatsächlich, wie normale Vererbung funktioniert. Es ist nur ein Gehirnverdreher, weil es leicht ist, color, die Eigenschaft, mit --color, der benutzerdefinierten Eigenschaft, zu verwechseln.

Es könnte auch nützlich sein zu wissen, dass Sie bei der tatsächlichen Deklaration einer benutzerdefinierten Eigenschaft mit @property angeben können, ob sie vererbt werden soll oder nicht. Das würde das Spiel mit diesen Gehirnverdrehern verändern!

@property --property-name {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

Antwort hinterlassen Antwort abbrechen