CSS @property - syntax

Quiz

The @property at rule prescribes the use of the CSS descriptor syntax, which specifies the permitted syntax for the defined property.

Possible values

Descriptor syntax accepts a string that matches the syntax specified in the guidelines. The supported syntaxes represent a subset of the CSS types that can be used individually or in various combinations.

<length> - Any <length> value that is valid.
<number> - Any <number> value that is valid.
<percentage> - Any <percentage> value that is valid.
<length-percentage> - Any <length-percentage> value that is valid.
<color> - Any <color> value that is valid.
<url> - Any <url> value that is valid.
<integer> - Any <integer> value that is valid.
<angle> - Any <angle> value that is valid.
<time> - Any <time> value that is valid.
<resolution> - Any <resolution> value that is valid.
<transform-function> - Any <transform-function> value that is valid.
<custom-ident> - Any <custom-ident> value that is valid.
<transform-list> - Any <transform-list> value that is valid.

Syntax

syntax = <string>

CSS syntax - length Value

The following code demonstrates the use of syntax descriptor:

This example uses the CSS @property at-rule to define a custom property called --box-size that accepts values that match the <length> syntax.
The <length> syntax stands for various length values in CSS, such as pixels, em units, percentages, etc.
The .box class uses this custom property to set both the width and height, which allows dynamic resizing based on the specified value.

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

Print Page