@Eigentum

Der @property AT-Rule, ein Neuzugang, der zu Chrome (und möglicherweise Safari und Firefox) kommt, ermöglicht die Erklärung der benutzerdefinierten CSS-Eigenschaften mit verbesserter Kontrolle und Funktionen. Derzeit fehlt CSS die Fähigkeit, bestimmte Eigenschaften innerhalb von Gradienten direkt zu wechseln, eine Begrenzung @property soll angehen.

Ein Entwurfsspezifikation und eine "Absicht, das Dokument zu versenden" skizzieren seine Funktionalität. Die @property -Regel, die externe Selektorblöcke deklariert (ähnlich wie bei @media -Abfragen), registriert die Eigenschaften einer benutzerdefinierten Eigenschaft vor ihrer Verwendung. Diese Registrierung gibt die syntax der Eigenschaft an (z. B., z.<color></color> ), initial-value und inherits .

Das JavaScript -Äquivalent CSS.registerProperty() erreicht die gleiche Registrierung gemäß der Houdini -Initiative. Der Hauptvorteil besteht darin, Übergänge zu Immobilien zu ermöglichen, die bisher unmöglich direkt zu animieren können. Zum Beispiel wird die sanft den Startfarbe eines linearen Gradienten, die zuvor Problemumgehungen wie Pseudoelemente erfordern, unkompliziert:

 @property-Gradient-Start {
  Syntax: "<color> ";
  Anfangswerte: weiß;
  Erben: Falsch;
}

.el {
  -Gradient-Start: Weiß;
  Hintergrund: Linear-Gradient (var (-Gradientenstart), schwarz);
  Übergang:-Gradient-Start 1s;
}

.el: schwebe {
  -Gradient-Start: Rot;
}</color>

Dies funktioniert, weil @property - --gradient-start als<color></color> , so dass CSS seine Animation korrekt behandeln kann. Dies steht im Gegensatz zur aktuellen Einschränkung der attr() -Funktion, die Stringwerte anstelle von direkt verwendbaren CSS -Typen wie zurückgibt wie<length></length> . Während das genaue Veröffentlichungsdatum unbekannt bleibt, deuten die geplante Implementierung von Chrome und die positiven Signale anderer Browser darauf hin, dass eine weit verbreitete Adoption wahrscheinlich ist.

Das obige ist der detaillierte Inhalt von@Eigentum. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!