CSS Playground

CSS Experimental Area

by mikeskinner

HTML

<span>
TEST
</span>

<div class="parent">
  <p>Parent element</p>
  <div class="fredchild">
    <p>Child element with inheritance disabled for --box-color.</p>
  </div>
</div>

CSS

:root {
  --coffee: grey;
  --bgc: #ccc;
  
}

body {
  background-color: var(--bgc);
}

span {
  color: var(--coffee);
  }
  
@property --box-color {
  syntax: "<color>";
  inherits: false;
  initial-value: cornflowerblue;
}

.parent {
  --box-color: green;
  background-color: var(--box-color);
}

.fredchild {
  width: 80%;
  height: 40%;
  background-color: var(--box-color);
}