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