Registriertes Custom Property und content-Eigenschaft - initial-value wird nicht beachtet?

[Rolf B]

Hallo alle,

merkwürdiges Phänomen:

Wenn ich ein custom property für eine Farbe registriere und dann ohne Wertzuordnung verwende, wird der initial value verwendet. Zum Beispiel:

@property --farbe {
  syntax: "<color>";
  inherits: true;
  initial-value: red;
}
p {
  color: var(--farbe);
}

Erwartetes Ergebnis: p Elemente bekommen roten Text (sofern keine anderen Regeln entgegenstehen, natürlich).
Erhaltenes Ergebnis: p Elemente bekommen roten Text.
Schön.

Anders ist es bei einem Pseudoelement und content. Der Property-Typ muss hier natürlich <string> sein.

@property --info {
  syntax: "<string>";
  inherits: true;
  initial-value: "keine";
}
p::after {
  content: "Info: " var(--info);
}

Wenn für --info kein Wert festgelegt wird (und --info: initial genügt auch nicht), erscheint kein after-Element. Gar keins. Nicht mal der Text "Info". Offensichlich ist var(--info) für ihn undefiniert und damit der Wert für content ebenfalls undefiniert.

Ganz merkwürdig: Wenn ich als Syntax "*" angebe (was "nimm alles was kommt") bedeutet, DANN wird der initial-value im content angezeigt.

Soll das so sein? Mit scheint das wie ein Reihenfolgeproblem bei der Auflösung der content-Eigenschaft zu sein, darum habe ich einfach mal einen Chrome-Bug dazu aufgemacht. Mit Firefox gegentesten kann ich nicht, der kennt noch keine registrierten custom propertys. Kann das ein Safarianer mal ausprobieren?

Ob das in irgendeiner Spec klargestellt wird, weiß ich nicht.

Workaround ist natürlich, var(--info, "keine") in die content-Eigenschaft zu schreiben. Aber genau darum geht es ja: Muss der Workaround sein, weil der initial-value korrekterweise nicht beachtet wird?! Oder ist's ein Bug?

Rolf

[Gunnar Bittersmann]

@@Rolf B

Anders ist es bei einem Pseudoelement und content.

An Pseudoelement und content liegt’s wohl nicht.

Der Property-Typ muss hier natürlich <string> sein.

Es liegt an <string>. Auch bei diesem Beispiel geht’s damit nicht. Mit syntax: '*' geht’s.

Safari verhält sich genauso wie Chrome.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar Bittersmann,

gut, dass Du mich erinnerst. Ich muss noch ein besseres Beispiel für meine Bugmeldung machen - die erste Reaktion war, dass auch <color> nicht beachtet würde. D.h. irgendwas machten die falsch.

Aber wie siehst Du das? Sollte es mit <string> funktionieren?

Rolf

[Rolf B]

Hallo Ingrid,

nach Rückmeldung der Chromisten in meinem Issue: Nein, sollte es nicht.

Grund: <string> ist zwar ein definierter CSS Datentyp, aber die Houdinis haben ihn in ihrer Liste erlaubter Syntax-Angaben für registrierte Properties nicht drin. Und Chrome hat ihn deshalb wohl nicht implementiert. Womit die Propertydefinition einfach gestrichen wird.

Folgeaktion: besagter Chromist hat ein Issue gegen die Houdini-Spec eingestellt, mit der Frage: Habt ihr das vergessen? 😂

Rolf