CSS @property regel

Definitie en gebruik

CSS @property Regels worden gebruikt om aangepaste CSS-eigenschappen direct in een stijltable te definiëren, zonder enige JavaScript uit te voeren.

@property Regels hebben functies voor typecontrole en beperkingen, kunnen standaardwaarden instellen en definiëren of een eigenschap waarde kan erven.

Gebruik @property Voordelen:

• Typecontrole en beperkingen: Je moet het gegevenstype van een aangepaste eigenschap specificeren, bijvoorbeeld <number>、<color>、<length> enz. Dit voorkomt fouten en zorgt ervoor dat aangepaste eigenschappen correct worden gebruikt.
• Instellen van standaardwaarde: Je kunt een standaardwaarde instellen voor een aangepaste eigenschap. Dit zorgt ervoor dat de browser de gedefinieerde back-upwaarde gebruikt als een ongeldig waarde wordt toegewezen.
• Instellen van erfgedrag: Je moet aangeven of een aangepaste eigenschap waarde kan erven van de ouderweergave.

Voorbeeld: Definieer aangepaste eigenschappen

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

Deze definitie betekent dat --my-color een kleureigenschap is, die waarde kan erven van de ouderweergave en een standaardwaarde van lightgray heeft.

Gebruik aangepaste eigenschappen in CSS:

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

Voorbeeld

Voorbeeld 1

Specificeer twee aangepaste eigenschappen voor de verloop - en gebruik ze om de verloop te animeren:

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

Probeer het zelf uit

Voorbeeld 2

Specificeer twee aangepaste eigenschappen: een voor de itemgrootte en een voor de itemkleur:

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

Probeer het zelf uit

CSS syntaxis

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

Eigenschapswaarde

Browserondersteuning

De cijfers in de tabel vertegenwoordigen de browserversie die de @ regel volledig ondersteunt.

Gerelateerde pagina's

Handleiding:CSS @property regel