Get your own website Result Size: 625 x 565
×
Change Orientation Save Code Change Theme, Dark/Light Go to Spaces
​x
 
<!DOCTYPE html>
<html>
<head>
<style>
@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
​
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}
​
.container {
  display: flex;
  height: 200px;
  border: 1px solid black;
  /* set custom property values on parent */
  --item-size: 20%;
  --item-color: gold;
}
​
/* use custom properties to set item size and background color */
.item {
  width: var(--item-size);
  height: var(--item-size);
  background-color: var(--item-color);
}
​
/* set custom property values on item two */
.two {
  --item-size: initial;
  --item-color: inherit;
}
</style>
</head>
<body>
​
<h1>The @property Rule</h1>
​
<div class="container">
  <div class="item one">Item one</div>
  <div class="item two">Item two</div>
  <div class="item three">Item three</div>