DEV Community

loading...

CSS Custom Properties with @property

Beto Muniz
Indie Creator @ listtta.com ~ seujob.tech ~ protocoloalterado.com.br • OSS Crafter • Writing about Web Development
・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)

Collapse
afif profile image
Temani Afif
Collapse
obetomuniz profile image
Beto Muniz Author

Cool!!! Amazing demos, Temani 👏