<h1 id="h1">Does This Browser Support @layer?</h1>

<p>
  Layers are supported in all modern browsers!
</p>

<p>
  To get a more extensive overview of support in your current browser,
  see the
  <a href="http://wpt.live/css/css-cascade/index.html">Web Platform Tests</a>.
  Scroll down the list to find all the <code>layer-*</code> tests.
</p>

<p>
  Layers allow you to manage the cascade more explicitly,
  specifying exactly what stlyes override other styles,
  without worrying about specificity or source order.
  For example, we can ensure that a <code>error</code> state
  always takes priority over other styles:
</p>

<button class='error' id='call-to-action'>example</button>
/* It's a good practice to establish layer-order up-front */
/* Each layer overrides previous layers */
@layer default, component, state;

/* layers test */
@layer default {
  h1 {
    color: green;
  }

  h1::before {
    content: "✅ ";
  }
}

@layer state {
  button.error {
    border-color: maroon;
    background: red;
  }
}

@layer component {
  #call-to-action {
    background: navy;
    color: white;
    border: medium solid navy;
    padding: 0.5em 1em;
  }
}

/* for readability */
html {
  font-size: clamp(1em, 1em + 0.5vw, 2em);
}

body {
  margin: 0 auto;
  padding: 1em;
  max-width: 75ch;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.