DEV Community

loading...

CSS Custom Properties with @property

obetomuniz profile image Beto Muniz ・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);
}
Enter fullscreen mode Exit fullscreen mode

🪄 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%;
  }
}
Enter fullscreen mode Exit fullscreen mode

😋 Really cool, right?

💌 If you want to receive content like this about Web Development, please, subscribe to my Newsletter

Discussion (2)

pic
Editor guide
Collapse
afif profile image
Collapse
obetomuniz profile image
Beto Muniz Author

Cool!!! Amazing demos, Temani 👏