CSS @property regel

Definition og brug

CSS @property Regler bruges til direkte at definere brugerdefinerede CSS-egenskaber i stilark uden at køre nogen JavaScript.

@property Regler har funktioner til data类型jek og begrænsninger, kan indstille standardværdier og definere, om egenskaber kan arve værdier.

Brug @property Fordelene:

• Typetjek og begrænsninger: Det er nødvendigt at specificere datatypen for brugerdefinerede egenskaber, f.eks. <number>, <color>, <length> osv. Dette kan forhindre fejl og sikre korrekt brug af brugerdefinerede egenskaber.
• Indstil standardværdi: Du kan sætte en standardværdi for brugerdefinerede egenskaber. Dette sikrer, at hvis en ugyldig værdi tildeles senere, vil browseren bruge den definerede tilbagefaldsværdi.
• Indstil arveadferd: Det er nødvendigt at specificere, om brugerdefinerede egenskaber kan arve værdier fra deres forældrelement.

Eksempel: Definer brugerdefinerede egenskaber

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

Denne definition betyder, at --my-color er en farveegenskab, som kan arve værdier fra forældrelementet og har som standardværdi lightgray.

I CSS bruger brugerdefinerede egenskaber:

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

Eksempel

Eksempel 1

Spesifiser to tilpassede egenskaper for gradienten - og bruk dem til å animere gradienten:

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

Prøv det selv

Eksempel 2

Spesifiser to tilpassede egenskaper: en for størrelsen på elementet og en for fargen på elementet:

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

Prøv det selv

CSS syntaks

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

Egenskapsverdi

Nettleserstøtte

Tallene i tabellen viser den første nettleserversjonen som fullt ut støtter @regelen.

Relaterede sider

Læringsvideo:CSS @property regel