@property

Das @property ist für mich komplett neu, aber ich sehe, dass es in Chrome eingeführt wird, also ist es wohl gut, davon zu wissen!

Es gibt einen Entwurf für eine Spezifikation und ein „Intent to Ship“-Dokument. Der Code aus diesem Dokument zeigt

@property --my-property {
  syntax: "<color>";
  initial-value: green;
  inherits: false;
}

Wir haben weitere Informationen zu all dem nun in unserem Complete Guide to Custom Properties.

Das ist das genaue CSS-Äquivalent zu einer   CSS.registerProperty(), der JavaScript-Syntax zum Deklarieren von benutzerdefinierten CSS-Eigenschaften, was ebenfalls eine Neuerung ist (scheinbar unter dem Schirm von Houdini).

Es sieht so aus, als ob man diese nicht innerhalb eines Selektorblocks, sondern außerhalb deklariert (ähnlich wie eine @media-Abfrage), und sobald man dies getan hat, hat man noch keine neue benutzerdefinierte Eigenschaft erstellt, sondern nur die Tatsache registriert, dass man dies wahrscheinlich später tun wird. Wenn man die benutzerdefinierte Eigenschaft tatsächlich erstellt/verwendet, erstellt man sie innerhalb eines Selektorblocks, so wie man es bereits jetzt tut.

Der „häufig zitierte Anwendungsfall“ ist verdammt cool. Derzeit ist dies in CSS *nicht* möglich

.el {
  background: linear-gradient(white, black);
  /* this transition won't work */
  transition: 1s;
}
.el:hover {
  background: linear-gradient(red, black);
}

Man könnte denken, dass der Weißanteil dieses Farbverlaufs mit dieser transition zu Rot verblasst, aber nein, das ist auf diese Weise nicht übergangsfähig. Wenn wir das früher gebraucht hätten, hätten wir zu Tricks greifen müssen, wie dem Einblenden eines Pseudo-Elements mit den neuen Farbverlauf-Farben oder dem Übergang der background-position eines breiteren Farbverlaufs als das Element, um es zu faken.

Es klingt, als ob wir das jetzt können...

@property --gradient-start {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

.el {
  --gradient-start: white;
  background: linear-gradient(var(--gradient-start), black);
  transition: --gradient-start 1s;
}

.el:hover {
  --gradient-start: red;
}

Vermutlich funktioniert das jetzt, weil wir CSS mitgeteilt haben, dass diese benutzerdefinierte Eigenschaft ein <color> ist, sodass sie wie eine Farbe behandelt/animiert werden kann, was vorher nicht möglich war.

Erinnert mich daran, wie wir bei der Verwendung der attr()-Funktion, um z.B. data-size="22px" von einem Element abzurufen, die <length> 22px nicht tatsächlich *verwenden* können, es ist nur ein String. Aber vielleicht erhalten wir eines Tages attr(data-size px);

Ich habe keine Ahnung, wann @property tatsächlich verfügbar sein wird, aber es sieht so aus, als ob Chrome zuerst damit kommt und es positive Signale von Safari und Firefox gibt. 👍