CSS @property regeln

Definition och användning

CSS @property Reglerna används för att direkt definiera anpassade CSS-egenskaper i stiltabellen utan att köra något JavaScript.

@property Reglerna har funktioner för data typkontroll och restriktioner, kan ställa in standardvärden och definiera om egenskapen kan ärva värden.

Använd @property Fördelarna:

• Typkontroll och restriktioner: Du måste specificera den anpassade egenskapens datatyp, till exempel <number>、<color>、<length> etc. Detta förhindrar fel och säkerställer korrekt användning av den anpassade egenskapen.
• Ställ in standardvärde: Du kan sätta ett standardvärde för den anpassade egenskapen. Detta säkerställer att om ett ogiltigt värde tilldelas senare, kommer webbläsaren att använda det definierade säkerhetsvärdet.
• Ställ in arv: Du måste specificera om den anpassade egenskapen kan ärva värden från sitt föräldrelement.

Exempel: Definiera anpassade egenskaper

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

Ovanstående definition betyder att --my-color är en färgegenskap som kan ärva värden från föräldrelementet och har som standardvärde lightgray.

Använd anpassade egenskaper i CSS:

body {}}
  backgound-color: var(--my-color);
}

Exempel

Exempel 1

Specificera två anpassade egenskaper för gradienten - och använd dem för att animera gradienten:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

Prova själv

Exempel 2

Specificera två anpassade egenskaper: en för objektstorlek och en för objektfärg:

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

Prova själv

CSS-syntax

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

Egenskapsvärde

Webbläsarstöd

Talen i tabellen representerar den första webbläsarversion som helt stöder denna @-regel.

Relaterade sidor

Lektioner:CSS @property regeln