<section>
  <h1>If your browser supports CSS variables, this text will be blue, otherwise it will be gray.</h1>
</section>
section {
  color: gray;
}

@supports(--css: variables) {
  section {
    --my-color: blue;
    color: var(--my-color, 'blue');
  }
}

h1 {
  text-align: center;
  max-width: 600px;
  margin: 50px auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.