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 of:

• Type Checking：It is necessary to specify the data type of the custom property, such as <number>, <color>, <length>. This can prevent errors and ensure the correct use of custom properties
• Setting default values：Default values can be set for custom properties. This ensures that if an invalid value is assigned later, the browser will use the defined alternative value.
• Setting inheritance behavior：It is necessary to specify whether the custom property can inherit the value from its parent element.

Browser support

The numbers in the table represent the first browser version to fully support the rule.

Simple @property instance

The following example defines two custom properties:--my-bg-color and --my-txt-color. Then, the div in background-color and color Using custom properties within:

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

another @property instance

In the following example, we use the default custom property on the <div> element. Then we use .fresh and .nature Custom properties in the class override (by setting other colors), and the effect is very good:

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

Type checking and alternative values prevent errors

In the following example, we will .nature The custom property in the class is set to an integer. This is invalid, and the browser will use the value in initial-value Alternative colors defined in the attribute (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

use the inherits value

In the following example, we will inherits The value is set to falseThis means that custom properties do not inherit values from their parent elements. See the result:

Example

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

Try It Yourself

The next example will inherits The value is set to trueThis means that custom properties inherit values from their parent elements. See the result:

Example

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

Try It Yourself

Create smooth animations using @property

Usage @property The new opportunities that can be realized by rules are to animate content that could not be animated before: 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