<h1>In the box below there is something that is visually hidden</h1>

<div class="overflow">
    <span class="visually-hidden">This is some text that is visually hidden. Will it break when we have lots of content in it?</span>
    <div>AB</div>
    <button class="visually-hidden">This is a button</button>
</div>

<p>This is an attempt to create a modern <code>.visually-hidden</code> class that works on all browsers without the burden of Internet Explorer. This is a <strong>really</strong> useful utility yet remains non-standard, and feels like it has been kept ultra backwards compatible for no good reason.</p>
<p>I hope in the future we will get <code>display: visually-hidden;</code>!</p>

<h2>What has changed?</h2>

<p>Design goals: target modern browsers, use least rules possible, use shortest rules possible, try to protect against silly mistakes.</p>

<p>Notable changes to usual implementations:</p>

<ul>
    <li>Use high specificity on selector with the help of <code>:is()</code>. Each of the rules needs to be active.</li>
    <li>Remove IE proprietary <code>clip</code>.</li>
    <li>Remove <code>overflow: hidden;</code> as it was required by <code>clip</code>.</li>
    <li>Use <code>all: initial</code> to remove all set properties, especially including border, margin and padding.</li>
    <li>Use <code>clip-path: path('')</code> instead of <code>clip-path: inset(50%)</code>.</li>
    <li>Include also <code>-webkit-clip-path</code> because Samsung Internet still requires the prefix.</li>
</ul>

:where([aria-hidden='false' i][hidden]) {
    display: initial;
}

:is(
    [aria-hidden='false' i][hidden]:not(:focus):not(:active),
    .visually-hidden
) {
    all: initial;
    -webkit-clip-path: path('');
    clip-path: path('');
    height: 1px;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* these rules do not win over `:root .visually-hidden` */
html button.visually-hidden {
    border: 25em solid transparent;
    margin: 25em;
    padding: 25em;
}

.overflow {
    background: red;
    color: white;
    height: 1.25rem;
    overflow: auto;
    width: 2rem;
}