Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!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> </div> </body> </html>
