CSS @property - initial-value

The CSS descriptor initial-value is required in the at-rule @property, unless the syntax allows any valid token stream. It defines the initial value for the property.

The selected initial value must adhere correctly to the syntax definition. For example, if the syntax is <length>, the initial value must be a valid length value.

Possible value

<declaration-value> - A string containing a value that corresponds to the selected syntax.

Syntax

initial-value = <declaration-value>

CSS initial-value - string Value

The following code is an example of intial-value descriptor

  • In this example, the descriptor initial-value in the @property sets the initial value of the custom property --box-size to 150px.

  • This means that if the custom property is not explicitly defined, it will be set to 150px by default to ensure consistency in cases where the property is used without a specific value.

<html>
<head>
<style>
   @property --box-size {
      syntax: '<length>';
      inherits: false;
      initial-value: 150px;
   }
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
   }
   .box {
      width: var(--box-size);
      height: var(--box-size);
      background-color: lightgreen;
      border: 2px solid black;
   }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Advertisements