- Os principais navegadores estão implementando uma atualização que altera o estilo padrão (estilo UA) da tag ``
- Isso afeta especialmente o `` 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
era tratado visualmente como, `` e assim por diante, conforme a quantidade de elementos de seccionamento aninhados
- Por exemplo,
section > h1 era renderizado como , e `section > section > h1` como
- 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
Level 1
Level 2
Level 3
Level 4
Mudanças esperadas e cronograma
- O `` 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 ``
- O Lighthouse exibirá um alerta se `` 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 `` 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 `` não tem
font-size definido
- Para evitar isso, é preciso definir explicitamente o estilo de ``
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
, etc. de forma adequada para representar explicitamente a hierarquia
- Defina
font-size e margin explicitamente em todos os ``
- 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
1 comentários
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%
O contexto histórico do algoritmo de outline adotado pelo W3C é interessante
Há comentários perguntando desde quando o comportamento do H1 fazia parte da especificação
Há quem diga que nunca tinha pensado a fundo sobre o comportamento dos elementos de seção (
,,,) e da tag ``É uma pena que o algoritmo de outline não tenha dado certo
Há quem diga que a tag
deveria continuar sendoindependentemente da posiçãoHá quem diga que é por causa dessa complexidade que muitos designers usam `` para tudo
role, também dá para garantir acessibilidadeHá quem ache que os cabeçalhos do HTML são meio tolos