O estilo padrão da tag h1 vai mudar

 (developer.mozilla.org)
3 pontos por GN⁺ 2025-04-11 | 1 comentários | Compartilhar no WhatsApp
  • Os principais navegadores estão implementando uma atualização que altera o estilo padrão (estilo UA) da tag <h1>
  • Isso afeta especialmente o <h1> usado dentro de section, article, nav, aside e outros elementos aninhados
  • Com essa mudança, desenvolvedores precisam ter atenção, pois podem ocorrer alterações visuais inesperadas nos sites ou alertas no Lighthouse

O que vai mudar

  • A especificação HTML já teve uma regra chamada “algoritmo de outline”, em que o <h1> era tratado visualmente como <h2>, <h3> e assim por diante, conforme a quantidade de elementos de seccionamento aninhados
  • Por exemplo, section > h1 era renderizado como <h2>, e section > section > h1 como <h3>
  • Isso não era refletido na árvore de acessibilidade e ainda era interpretado de forma diferente por cada ferramenta, gerando confusão
  • No fim, esse algoritmo foi removido da especificação HTML em 2022, e agora os navegadores também estão removendo o estilo UA correspondente

Exemplo de estilo UA antigo do navegador

  • x h1 { font-size: 1.50em }
  • x x h1 { font-size: 1.17em }
  • x x x h1 { font-size: 1.00em }
  • x x x x h1 { font-size: 0.83em }
  • x x x x x h1 { font-size: 0.67em }

Exemplo de estrutura HTML

<body>  
  <h1>Level 1</h1>  
  <section>  
    <h1>Level 2</h1>  
    <section>  
      <h1>Level 3</h1>  
      <section>  
        <h1>Level 4</h1>  
      </section>  
    </section>  
  </section>  
</body>

Mudanças esperadas e cronograma

  • O <h1> não terá mais o estilo alterado automaticamente só por estar dentro de elementos section aninhados
  • O estilo UA vai aplicar o mesmo estilo a todos os <h1>
  • O Lighthouse exibirá um alerta se <h1> não tiver font-size definido
  • Alerta exibido: H1UserAgentFontSizeInSection

Firefox

  • A partir de 31 de março de 2025, o Firefox Beta 138 começa a distribuir a mudança de estilo para 50% dos usuários de desktop
  • No Firefox Stable 138, o rollout começa para 5% dos usuários e deve chegar a todos até a versão 140
  • No Firefox 136 ou superior, um alerta aparece no console se font-size ou margin não estiver definido
  • Como mudar a configuração: em about:config, defina layout.css.h1-in-section-ua-styles.enabled como false

Chrome

  • A partir do Chrome 136, será exibido um alerta se <h1> usar o estilo padrão reduzido
  • Isso pode afetar a pontuação de “Best Practices” no Lighthouse

Safari

  • Ainda não há atualização concreta nem acompanhamento de bug, mas uma mudança semelhante também é esperada no WebKit

Como corrigir o alerta do Lighthouse

  • O Lighthouse mostra o alerta com base nos avisos do Chromium DevTools quando <h1> não tem font-size definido
  • Para evitar isso, é preciso definir explicitamente o estilo de <h1>

Exemplo de estilo

h1 {  
  margin-block: 0.67em;  
  font-size: 2em;  
}
  • Para evitar specificity (prioridade), use :where()
:where(h1) {  
  margin-block: 0.67em;  
  font-size: 2em;  
}

Checklist resumido

  • Não dependa do estilo padrão do navegador
  • Use <h2>, <h3> etc. de forma adequada para representar explicitamente a hierarquia
  • Defina font-size e margin explicitamente em todos os <h1>
  • Atualize o CSS reset para refletir essa mudança
  • Verifique os alertas no Lighthouse e no DevTools
  • Consulte a documentação relacionada no MDN para refletir o conteúdo mais recente

Materiais relacionados

Leituras relacionadas

1 comentários

 
GN⁺ 2025-04-11
Comentários do Hacker News

  • Na versão estável do Firefox 138, isso será distribuído para 5% dos usuários, com plano de expansão para 50%

    • Há quem diga que isso pode dificultar os testes, já que desenvolvedores web podem acabar lidando com um comportamento de navegador diferente do que os usuários veem
    • Há quem ache que isso parece inspirado no método de rollout do Facebook, mas que essa abordagem não é apropriada para o Firefox, já que ele não é um software do lado do servidor

  • O contexto histórico do algoritmo de outline adotado pelo W3C é interessante

    • Navegadores e leitores de tela se recusaram a adotá-lo por causa de ambiguidades com o conteúdo web existente e problemas de manutenção
    • O WHATWG acabou desistindo disso 8 anos depois

  • Há comentários perguntando desde quando o comportamento do H1 fazia parte da especificação

    • Há quem diga que escreve HTML desde 1995 e nunca tinha ouvido falar disso
    • Há quem ache melhor remover isso, já que pode causar confusão

  • Há quem diga que nunca tinha pensado a fundo sobre o comportamento dos elementos de seção (<section>, <aside>, <nav>, <article>) e da tag <h1>

  • É uma pena que o algoritmo de outline não tenha dado certo

    • Há quem diga que deveria ser possível compor livremente conteúdos de várias origens
    • Deveria ser possível escrever um fragmento com <h1> e fazer com que ele signifique "o título de nível mais alto no meu contexto", em vez de depender do contexto global do documento

  • Há quem diga que a tag <h1> deveria continuar sendo <h1> independentemente da posição

    • Isso não deveria mudar por padrão, e também poderia resolver problemas de acessibilidade em leitores de tela

  • Há quem diga que é por causa dessa complexidade que muitos designers usam <div> para tudo

    • Usando o atributo role, também dá para garantir acessibilidade

  • Há quem ache que os cabeçalhos do HTML são meio tolos

    • Separar as seções de um livro com a tag <section> seria uma forma melhor de expressão
    • Há quem diga que h1 e h2 criam tags explícitas e uma hierarquia diferente dos outros formatos do HTML
    • Há uma piada sobre querer voltar no tempo e pedir ao Tim Berners-Lee para corrigir esse problema