CSS @property Rule

CSS @property Rule

@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 {
  syntax: "<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);
}

Usage @property The benefits:

• Type checking：Het is vereist om het datatype van de aangepaste eigenschap te specificeren, zoals <number>、<color>、<length>. Dit voorkomt fouten en zorgt ervoor dat aangepaste eigenschappen correct worden gebruikt.
• Instellen van standaardwaarden：U kunt een standaardwaarde instellen voor aangepaste eigenschappen. Dit zorgt ervoor dat de browser de gedefinieerde alternatieve waarde gebruikt als een ongeldig waarde wordt toegewezen.
• Instellen van het overnemen van gedrag：Het is vereist om aan te geven of een aangepaste eigenschap de waarde van zijn ouder-element kan overnemen.

Browserondersteuning

De cijfers in de tabel geven de eerste browserversie aan die de regel volledig ondersteunt.

Een eenvoudige @property-instantie

In het volgende voorbeeld worden twee aangepaste eigenschappen gedefinieerd:--my-bg-color en --my-txt-color. Vervolgens zal de div in background-color en color in het gebruik van aangepaste eigenschappen:

Example

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

Try It Yourself

een andere @property-instantie

In het volgende voorbeeld gebruiken we de standaard aangepaste eigenschappen op het <div>-element. Vervolgens gebruiken we .fresh en .nature Klasse-eigenschappen overschrijven (door een andere kleur in te stellen), het effect is erg goed:

Example

@property --my-bg-color {
  syntax: "<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);
}

Try It Yourself

door typecontrole en alternatieve waarden fouten te voorkomen

In het volgende voorbeeld zullen we .nature De aangepaste eigenschappen in de klasse zijn ingesteld op een integer. Dit is ongeldig, de browser zal de waarde gebruiken in initial-value Alternatieve kleuren die in de eigenschap worden gedefinieerd (lightgray):

Example

@property --my-bg-color {
  syntax: "<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;
}

Try It Yourself

de waarde van inherits gebruiken

In het volgende voorbeeld zullen we inherits De waarde wordt ingesteld op falseDit betekent dat aangepaste eigenschappen de waarde van hun ouder-element niet overnemen. Bekijk het resultaat:

Example

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

Try It Yourself

De volgende voorbeeld zal inherits De waarde wordt ingesteld op trueDit betekent dat aangepaste eigenschappen de waarde van hun ouder-element overnemen. Bekijk het resultaat:

Example

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

Try It Yourself

Use @property to create smooth animations

Usage @property The new opportunities that can be realized by rules are to animate content that was previously un animatable: gradients. See the following example:

Example

Specify two custom properties for gradients:

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

Try It Yourself

CSS @property Rule