Container Query test

by bostiq

HTML

<div>
  <h1>I should be black (div with no classes)</h1>
</div>
<div class="red">
  <h1>I should be Red (inherited behaviour)</h1>
</div>
<div class="blue">
  <h1>I should be green (@Container should take over)</h1>
</div>

CSS

@property --im-a-color {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

.red {
  /* --im-a-color: red; */
  color: var(--im-a-color)
}

.blue {
  --im-a-color: blue;
  color: var(--im-a-color)
}

@container style(--im-a-color) {
  .blue {
    color: green;
  }
}