<div class="notice">⚠️ Your browser does not support the features used in this demo. Use a Chromium browser to view it.</div>

<details open>
  <summary>Toggle content</summary>
  Open and close the element to toggle this content.
</details>
::details-content {
  background: oklch(95% 0.1812 38.35);
}

@supports selector(::details-content) {
  .notice {
    display: none;
  }
}

@layer base {
  
  body {
    font-family: system-ui;
    overflow-x: hidden;
  }
  
  .notice {
    background: wheat;
    color: saddlebrown;
    margin-block-end: 1rem;
    padding: 1rem;
    text-align: center;
    text-shadow: 0 1px 1px hsl(0 0 100%);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.