Finalmente aprendemos a centralizar uma div, então os navegadores adicionaram barras laterais

Centralizar o conteúdo da página em relação à janela inteira do navegador — em vez de apenas à viewport visível — gerou resistência de desenvolvedores e usuários que dependem de barras laterais, abas verticais e layouts de janelas em mosaico. Os críticos argumentam que tentar manter uma coluna de largura fixa “centralizada” fisicamente no meio da tela leva o conteúdo a ser obscurecido pela interface do navegador, quebra o comportamento de layout esperado, complica acessibilidade e responsividade e vaza informações extras sobre o ambiente do usuário. Muitos comentaristas veem esses artifícios, no máximo, como uma preocupação do navegador, ou diretamente como hostis ao usuário, e preferem que os sites centralizem apenas dentro da viewport e ignorem a moldura ao redor.

O que “centralizar uma div” significa

  • Alguns leitores interpretam “centralizar uma div” como apenas horizontalmente (margin: 0 auto), outros como centralização tanto horizontal quanto vertical.
  • O uso da frase memeada no artigo é visto por alguns como desalinhado com seu tema principalmente horizontal, focado em barras laterais.

Centralização na viewport vs na janela/tela

  • A discordância central: o conteúdo “centralizado” deve ser centralizado na viewport (a área visível da página) ou em relação à janela do navegador / tela quando barras laterais estão abertas?
  • Muitos argumentam com veemência que a centralização deve ser dentro da viewport: a barra lateral reduz a largura útil, então o conteúdo deve se mover de acordo.
  • Uma minoria gosta da ideia de o conteúdo permanecer fixo no centro físico da tela mesmo quando as barras laterais do navegador são abertas, mas em geral veem isso como uma preferência pessoal adequada para uma extensão, e não como comportamento padrão da web.
  • Vários observam que a posição da janela, múltiplos monitores, gerenciadores de janelas em mosaico e janelas não maximizada tornam a semântica de “centralizado na tela” sem sentido ou ativamente errada.

Opiniões de usabilidade e design

  • Um grande grupo vê cobrir conteúdo com barras laterais do navegador como claramente uma má UX e “não é problema da página”.
  • Outros dizem que o trabalho de um navegador é gerenciar overlays/barras laterais; se uma barra lateral deve se comportar como um overlay, isso deveria ser uma configuração do navegador, não lógica da página.
  • Alguns se opõem ao design da própria página do artigo: “papel” falso com contêineres internos de rolagem, comportamento de rolagem diferente da rolagem nativa e larguras de conteúdo muito estreitas.
  • Contra-argumentos invocam pesquisas tipográficas que favorecem comprimentos de linha menores; essas regras de “largura ideal” são vistas por alguns como úteis, por outros como dogmáticas e em desacordo com a preferência do usuário.

Problemas técnicos e de implementação

  • Vários relatos dizem que a demonstração não se comporta como descrito no Firefox ou no Chromium, ou apenas às vezes, e exibe flicker e condições de corrida ao alternar barras laterais.
  • O uso de JS extra para lutar contra o layout do navegador é criticado como frágil, visualmente brusco e provavelmente quebradiço em casos extremos.

Preocupações de privacidade e de API da web

  • Usar screenX/screenY, tamanho da janela e APIs relacionadas para inferir a posição da janela é visto como mais um vetor de fingerprinting e vazamento de informações.
  • Alguns expressam ceticismo mais amplo em relação a novas APIs da web que permitem que sites raciocinem sobre a UI do host fora da viewport.