CSS Custom Properties with @property

CSS Custom Properties with @property

ยท

1 min read

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?