CSS @property regler

CSS @property regler

@property Rules are used to define custom CSS properties directly in the style sheet without running any JavaScript.

@property Rules have data type checking and constraints, set default values, and define whether the property can inherit values.

Define an instance of custom properties:

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

The above definition indicates --myColor It is a color property that can inherit the value of the parent element, with a default value of lightgray.

To use custom properties in CSS, we use var() Function:

body {
  background-color: var(--myColor);
}

Brug @property Benefits:

• Type checking：Det er nødvendigt at specificere datatypen for brugerdefinerede egenskaber, såsom <number>、<color>、<length>. Dette forhindrer fejl og sikrer korrekt brug af brugerdefinerede egenskaber
• Indstil standardværdi：Man kan indstille standardværdier for brugerdefinerede egenskaber. Dette sikrer, at browseren bruger definerede reserveværdier, hvis无效 værdier tildeles senere.
• Indstil arveadfærd：Det er nødvendigt at specificere, om brugerdefinerede egenskaber kan arve værdier fra deres forældre element.

Browserunderstøttelse

Talene i tabellen repræsenterer den første browserversion, der fuldt ud understøtter reglen.

en simpel @property instans

Dette eksempel definerer to brugerdefinerede egenskaber:--my-bg-color og --my-txt-color. Derefter, div i background-color og color bruger brugerdefinerede egenskaber:

Eksempel

@property --my-bg-color {
  syntaks: "<color>";
  inherits: true;
  initial-value: lightgray;
}
@property --my-txt-color {
  syntaks: "<color>";
  inherits: true;
  initial-value: darkblue;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
  color: var(--my-txt-color);
}

Prøv det selv

en anden @property instans

I dette eksempel bruger vi standard brugerdefinerede egenskaber på <div>-elementet. Derefter bruger vi .fresh og .nature Overskriv brugerdefinerede egenskaber i klassen (ved at sætte en anden farve), hvilket fungerer godt:

Eksempel

@property --my-bg-color {
  syntaks: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: rgb(120, 180, 30);
}

Prøv det selv

undgå fejl ved hjælp af typekontrol og reserveværdier

I dette eksempel vil vi .nature Brugerdefinerede egenskaber i klassen er sat til et heltal. Dette er ugyldigt, og browseren vil bruge værdien i initial-value Reservefarve defineret i egenskaben (lightgray):

Eksempel

@property --my-bg-color {
  syntaks: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

Prøv det selv

bruge værdien for inherits

I dette eksempel vil vi inherits Værdien sættes til falseDette betyder, at brugerdefinerede egenskaber ikke arver værdier fra deres forældre element. Se resultaterne:

Eksempel

@property --my-bg-color {
  syntaks: "<color>";
  inherits: false;
  initial-value: lightgray;
}

Prøv det selv

Næste eksempel vil inherits Værdien sættes til trueDette betyder, at brugerdefinerede egenskaber arver værdier fra deres forældre element. Se resultaterne:

Eksempel

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

Prøv det selv

Brug @property til at skabe glatte animationer

Brug @property En ny mulighed, som reglerne kan realisere, er at animere indhold, der tidligere ikke kunne animeres: grader. Se nedenstående eksempel:

Eksempel

Angiv to brugerdefinerede egenskaber til graden:

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

Prøv det selv

CSS @property regler