CSS @property - syntax

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>
Advertisements