Beto Muniz

CSS Custom Properties with @property

Have you heard about the CSS @property statement?

šŸ“£ @property is a CSS Houdini 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.

@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.

@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?

šŸ’Œ If you want to receive content like this about Web Development, please, subscribe to my Newsletter