Verwenden Sie @Property für CSS -benutzerdefinierte Eigenschaften

Chrome unterstützt nun die Erklärung der benutzerdefinierten CSS -Eigenschaften mit @property und bietet detailliertere Informationen als Zeichenfolgen. Dieser Artikel untersucht diese Funktion ausführlich.

In der Vergangenheit war die Erklärung der CSS -benutzerdefinierten Eigenschaften wie folgt:

 html {
  -Stop: 50%;
}

Jetzt können wir @property verwenden, um weitere Details anzugeben:

 @property --stop {
  Syntax: "<percentage> ";
  Anfangswert: 50%;
  Erben: Falsch;
}</percentage>

Der Browser weiß jetzt, dass diese benutzerdefinierte Eigenschaft ein Prozentsatz und keine Zeichenfolge ist. Andere nützliche Typen sind<integer></integer> Und<color></color> . Indem wir den Browser auf diese Weise Informationen vermitteln, erhalten wir neue Funktionen, z. B. den Übergang zwischen zwei Werten.

In praktischen Anwendungen ist jedoch wichtig zu beachten, dass die Eigenschaften, die übergeführt werden müssen , klar angegeben werden müssen (einfacher transition kann nicht implementiert werden). Die folgende Demonstration reproduziert die Beispiele aus dem Artikel von UNA Kravetz:

Beachten Sie, dass ich die Position des Farbstopppunkts (Prozentsatz) animiere, aber ich habe auch versucht , die Farbe selbst zu animieren, aber das funktioniert immer noch nicht. Ich dachte ursprünglich, dass diese neue Funktion dies erreichen könnte. Die Menschen sind seit langem verwirrt über die Unfähigkeit, Gradienten zu animieren. (Siehe Artikel von Ana Tudor.)

Bei Browsern, die keine benutzerdefinierten Eigenschaften unterstützen, können wir Eigenschaften auf einer höheren Ebene neu einstellen, um Unterstützung zu bieten. Das klingt ein bisschen lustig. Safari zeigt Interesse an dieser in Houdini ansässigen Technologie, wurde jedoch noch nicht unterstützt. Firefox? Die Situation ist unklar, und sie haben es als "würdige Prototyping" vor Entlassungen gekennzeichnet.

@property kann auch das seltsame Fallback -Problem der CSS -benutzerdefinierten Eigenschaften lösen:

Wie bei allen anderen benutzerdefinierten Eigenschaften können Sie (mit var ) oder Set (Write/Rewrite) Werte abrufen. Für Houdini -benutzerdefinierte Eigenschaften sendet die CSS -Rendering -Engine, wenn Sie beim Überschreiben einen falschen Wert festlegen, den Anfangswert (ihren Fallback -Wert), anstatt die Zeile zu ignorieren.

Das obige ist der detaillierte Inhalt vonVerwenden Sie @Property für CSS -benutzerdefinierte Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!