CSS Revert

Example for using "revert" as a CSS value.

by Sebastian

HTML

<button type="button">
  A button styled by your browser
</button>
<button type="button" class="revert">
  A button with background: revert
</button>

<p class="support">
This browser supports the <a href="https://caniuse.com/#feat=css-revert-value">CSS keyword "revert"</a>
</p>
<p class="unsupport">Needs a browser with support for the <a href="https://caniuse.com/#feat=css-revert-value">CSS keyword "revert"</a>
</p>

<p>
At the moment Chromium doesn't seem to support "revert" as a fallback within the CSS function var().
</p>

CSS

.support {
  display: none;
}

@supports (background:revert) {
  .revert {
    background: var(--not-declared, revert);
  }
  
  .support {
    display: block;
  }
  .unsupport {
    display: none;
  }
}