🧱 Atributo inert no HTML — Bloqueio instantâneo de interface

🔍 O que é

O atributo inert é um recurso nativo do HTML usado para tornar elementos da interface inativos — impedindo que recebam foco, cliques e sejam lidos por leitores de tela. É ideal para quando se deseja “congelar” parte do conteúdo, como o fundo de um modal, drawer, sidebar ou menu suspenso.

⚙️ Como funciona

É como um modo desativado global, que pausa interações na seção especificada sem precisar esconder ou desativar cada elemento individualmente.

💡 Exemplo prático


<div id="app">
  <main inert>
    <h1>ConteĂşdo principal</h1>
    <button>Não clicável</button>
  </main>

  <dialog open>
    <p>Modal ativo!</p>
    <button id="fechar">Fechar</button>
  </dialog>
</div>
    

Enquanto o modal estiver aberto, toda a área <main> está “travada”:

🧠 Comparativo com outras soluções

Técnica Impede cliques Remove do foco Oculta da acessibilidade Observações
pointer-events: none ✅ ❌ ❌ Bloqueia apenas o mouse
aria-hidden="true" ❌ ❌ ✅ Acessível, mas não bloqueia foco
inert ✅ ✅ ✅ Solução completa e nativa

🧩 Uso dinâmico com JavaScript


const modal = document.querySelector("#modal");
const app = document.querySelector("#app");

function abrirModal() {
  app.setAttribute("inert", "");
  modal.showModal();
}

function fecharModal() {
  app.removeAttribute("inert");
  modal.close();
}
    

Quando o modal é aberto, o restante da página (#app) é bloqueado. Ao fechar, tudo volta ao normal.

🌍 Suporte dos navegadores

O atributo inert Ă© amplamente suportado pelos navegadores modernos (Chrome, Edge, Firefox, Safari e Opera). Consulte a compatibilidade atualizada em: Can I use inert .

đź§­ Quando usar

âś… ConclusĂŁo

O atributo inert traz uma solução nativa, acessível e limpa para gerenciar estados de interface. Ele elimina a necessidade de adicionar manualmente aria-hidden, tabindex="-1" e pointer-events: none, tornando o código mais simples e consistente, sem sacrificar a acessibilidade.