Have you heard about the CSS <code>@property</code> statement?
📣 <a href="https://hashnode.com/@property" class="user-mention" target="_blank" rel="noopener">@property</a> is a CSS Houdini <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule">at-rule</a> that allows us to configure CSS custom properties by data type using the <code>syntax</code> field, default values using the <code>initial-value</code> field, and set if it allows inheritance.
<pre><code class="lang-css">@property --colorPrimary {
 syntax: "&lt;color&gt;";
 initial-value: magenta;
 inherits: false;
}

body {
 /* Fallback for browsers without @property support. */
 --colorPrimary: magenta;
}

.text {
 color: var(--colorPrimary);
}
</code></pre>
🪄 The nicest aspect about <code>@property</code> is the capability to enhance CSS dynamics through high-level declarations with simplicity and certain performance enhancements.
🔬 Some use cases for <code>@property</code> statement are data type validation on CSS and animations.
<pre><code class="lang-css">@property --status {
 inherits: false;
 initial-value: 0%;
 syntax: '&lt;percentage&gt;';
}

.progress-bar {
 width: var(--status);

 height: 5px;
 background: gold;
 animation: progress 2s forwards;
}

@keyframes progress {
 to {
 --status: 100%;
 }
}
</code></pre>
😋 Really cool, right?

Have you heard about the CSS `@property` statement?

📣 @property is a **CSS Houdini** [at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) that allows us to configure CSS custom properties by data type using the `syntax` field, default values using the `initial-value` field, and set if it allows inheritance.

```css
@property --colorPrimary {
 syntax: "<color>";
 initial-value: magenta;
 inherits: false;
}

body {
 /* Fallback for browsers without @property support. */
 --colorPrimary: magenta;
}

.text {
 color: var(--colorPrimary);
}
```

🪄 The nicest aspect about `@property` is the capability to enhance CSS dynamics through high-level declarations with simplicity and certain performance enhancements.

🔬 Some use cases for `@property` statement are data type validation on CSS and animations.

```css
@property --status {
 inherits: false;
 initial-value: 0%;
 syntax: '<percentage>';
}

.progress-bar {
 width: var(--status);

 height: 5px;
 background: gold;
 animation: progress 2s forwards;
}

@keyframes progress {
 to {
 --status: 100%;
 }
}
```

😋 Really cool, right?

CSS Custom Properties with @property