Testar navegadores

Esta é o capítulo 39 de 52 do volume Aprenda a Web. O projeto-fio é a Oficina Costeira, um coletivo fictício de design em João Pessoa. O exemplo está em exemplos/39-testar-navegadores/. Em cada capítulo: leia, copie, mude uma coisa, preveja, recarregue e confira.

O que você vai aprender

• Servir o exemplo só em 127.0.0.1.
• Abrir a mesma página em mais de um navegador.
• Percorrer o teclado: skip-link, menu, conteúdo.
• Aceitar diferenças visuais sem quebrar o conteúdo.
• Consultar suporte de uma propriedade sem copiar prefixo antigo.
• Fechar a série “muitas telas” antes da melhoria progressiva.

O mesmo arquivo, vários motores

Chrome, Firefox, Edge e Safari não desenham pixel a pixel igual. Isso não é defeito da Oficina Costeira. O alvo é o conteúdo utilizável: ler, chegar nos links, ver o foco, ouvir o alt.

Navegadores evergreen se atualizam sozinhos. Teste a versão atual e, se puder, a anterior. Não instale Internet Explorer para este volume. Edge no Windows cobre o motor atual da Microsoft.

Laboratório pago na nuvem mostra foto de um Windows antigo. É opcional. Não é requisito de entrega. Dois navegadores locais e o teclado fecham o volume.

Safari no Windows não existe de forma honesta. Se você só tem Windows, anote: “WebKit não testado nesta máquina”. Honestidade vale mais que um prefixo copiado.

Motor não é a casca. Chrome e Edge atuais compartilham Blink. Firefox usa Gecko. Safari usa WebKit. Testar Chrome e Edge mostra pouco se o problema é WebKit. No Windows, priorize Firefox + Chrome/Edge. Se houver um aparelho Apple, abra Safari.

Sempre pelo servidor local

Abra o Explorador e dê dois cliques em index.html só para um olho rápido. Para testar de verdade:

python -m http.server 8769 --bind 127.0.0.1 --directory curso

Visite http://127.0.0.1:8769/exemplos/39-testar-navegadores/. Encerre com Ctrl+C. Não use 0.0.0.0. Não publique o exercício. Não peça conta paga de laboratório na nuvem como único caminho: os navegadores da sua máquina bastam.

Copie a URL. Cole no Firefox e no Chrome. Preveja a mesma estrutura. Recarregue os dois. Compare o menu e o skip-link.

Erro comum: achar que “funcionou no Chrome” fecha o volume. Abra pelo menos dois motores. O CSS Grid que você usou nos capítulos 28 e 38 é antigo o bastante; o que quebra costuma ser caminho, foco ou viewport.

Roteiro de teclado

Em cada navegador:

1. Recarregue a home.
2. Tab. O skip-link “Pular para o conteúdo” aparece com contorno de cerca de 3 px.
3. Enter. O foco vai ao main.
4. Tab pelos itens do menu. aria-current="page" no Início.
5. Enter em Projetos. Confira o atributo na nova página.
6. Percorra um formulário de contato se a página existir: todo campo tem rótulo.

Shift+Tab volta. Esc não precisa fechar nada neste site estático. Se um link não recebe foco, tabindex="-1" indevido ou display: none no pai são suspeitos.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Início — Oficina Costeira</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <a class="skip" href="#conteudo">Pular para o conteúdo</a>
    <header>
      <nav aria-label="Principal">
        <ul class="menu">
          <li><a href="index.html" aria-current="page">Início</a></li>
          <li><a href="projetos.html">Projetos</a></li>
        </ul>
      </nav>
    </header>
    <main id="conteudo">
      <h1>Oficina Costeira</h1>
      <p>Coletivo fictício em João Pessoa. Teste esta página em mais de um navegador.</p>
    </main>
  </body>
</html>

Mude o href do skip-link para #nao-existe. Preveja o salto falho. Recarregue. Corrija para #conteudo.

Olhos: layout, zoom, imagens

Não busque pixel perfect. Busque quebra: texto cortado, coluna que escapa, botão que não aperta, contraste que some.

Checklist curto:

• janela estreita e larga (capítulos 37 e 38);
• zoom 200%;
• imagens desligadas: alt e conteúdo ainda fazem sentido;
• CSS desligado: HTML ainda legível, na ordem certa;
• retrato e paisagem no emulador, se houver.

Serviços de captura em nuvem mostram foto, não teclado. São opcionais. O Tab na sua cadeira ensina mais.

Suporte e prefixo

Can I Use e a tabela no rodapé da MDN dizem se a propriedade existe. Grid, srcset, :focus-visible e prefers-reduced-motion passam nos navegadores atuais deste volume.

Não cole uma lista -webkit- de 2014 “por garantia”. Prefixos velhos poluem e às vezes ativam bugs. Se um dia uma propriedade nova exigir prefixo, o não prefixado vem por último.

Não detecte “é Chrome” no CSS. Detecte a necessidade: largura, movimento reduzido, hover. O capítulo 40 fala de melhoria progressiva com mais calma.

Erro comum: outline: none em a:focus para “ficar bonito no Chrome”. O teclado no Firefox também some. Use :focus-visible com substituto visível.

Fechar o teste

Anote o que falhou: navegador, largura, teclado ou imagem. Corrija o HTML ou o CSS uma coisa por vez. Recarregue os dois navegadores. Só então avance.

A série 8 continua no capítulo 40 com melhoria progressiva: o HTML sólido que você testou hoje é a base. JavaScript, se entrar no fim do volume, não substitui esse chão.

Sirva, teste, encerre o servidor. A Oficina Costeira continua fictícia. Nenhum dado pessoal entra no formulário.

Checklist para copiar no caderno:

• Firefox e Chrome (ou Edge) na mesma URL 127.0.0.1;
• Tab até o rodapé, ida e volta;
• janela a 320 px e a 1200 px;
• zoom 200%;
• uma imagem com o src errado de propósito, depois o 404 no Rede, depois o conserto.

Se o skip-link falhar só num navegador, o CSS do :focus pode estar incompleto. Confira skip:focus e :focus-visible. Os dois caminhos cobrem Tab.

Mude a porta 8769 se ela já estiver ocupada. Preveja a recusa do Python. Recarregue na porta nova. O bind continua 127.0.0.1.

Sem JavaScript neste teste

A home da Oficina neste ponto não precisa de script para o menu, o skip-link ou o layout. Se o exemplo trouxer infografico.js por herança, o teste de teclado ainda vale com o arquivo desligado: o HTML deve funcionar.

Desligue CSS no inspetor. A ordem deve permanecer: skip-link, cabeçalho, conteúdo, rodapé. Isso é melhoria progressiva antecipada (capítulo 40).

Impressão: Arquivo > Imprimir > Visualizar. O fundo escuro do cabeçalho pode sumir tinta. Não é falha do teste de navegador; é outra media. Anote e siga.

Copie a URL http://127.0.0.1:8769/exemplos/39-testar-navegadores/. Abra numa janela anônima do segundo navegador. Preveja os mesmos links. Recarregue. Extensões da janela normal às vezes mordem o CSS; anônima isola.

Leitor de tela não é obrigatório neste volume, mas o skip-link e o aria-current que você testou no teclado já servem a ele. Se NVDA ou Narrador estiverem à mão, ouça a home uma vez. Anote o que o menu diz.

Contraste: o cabeçalho #0b4f6c com texto branco passa. Um cinza claro em cinza branco falha nos dois navegadores iguais. O teste visual não substitui o número; uma extensão de contraste é extra, não requisito.

lang="pt-BR" no html entra na conferência. Sem idioma, o leitor escolhe voz errada. Abra o código-fonte nos dois navegadores e confira a primeira linha do html.

Formulário da página Contato: Tab, rótulo visível, envio local. Nada sai da máquina. Se o action apontar para um servidor público, isso é erro deste volume. Corrija antes de zipar.

Zoom 200% nos dois motores. O menu quebra, o texto não some. Se um position: fixed cobrir o h1, volte à capítulo 27 e tire o menu grudado.

Can I Use confirma Grid e srcset. Não copie prefixo -ms- de um blog de 2013. Se a propriedade do exercício já está verde nos dois navegadores da sua máquina, o teste acabou para aquele item.

Feche o servidor com Ctrl+C quando terminar. Porta ocupada no dia seguinte costuma ser o Python que ficou aberto. Encerre e suba de novo em 127.0.0.1. Isso ainda não é publicação.

Atividades

1. Qual endereço o servidor de estudo deve usar?
2. Cite dois motores de navegador que vale a pena abrir neste volume.
3. Qual é o primeiro controle que o Tab deve focar na home?
4. Pixel perfect em todos os navegadores é o objetivo? Por quê?
5. Por que outline: none em todo :focus falha no teste de teclado?
6. O servidor pode escutar em 0.0.0.0 “só na rede de casa”?
7. Qual é o papel de uma janela anônima neste volume?

Respostas comentadas

1. 127.0.0.1, com --bind 127.0.0.1. Só esta máquina. Nunca 0.0.0.0 neste volume.
2. Por exemplo Gecko (Firefox) e Blink (Chrome ou Edge). São motores diferentes.
3. O skip-link “Pular para o conteúdo”.
4. Não. É impossível e inútil. O conteúdo precisa ser utilizável, não idêntico ao milímetro.
5. Remove o único sinal de foco. Quem não usa mouse perde o lugar na página.
6. Não. Este volume só usa 127.0.0.1. Expor a interface na rede local não é o exercício.
7. Isolar extensões. O CSS da Oficina deve valer sem bloqueadores da janela normal.

Referências

• Ferramentas de desenvolvimento
• :focus-visible
• Testando
• Can I Use
• aria-current

O arquivo completo

Referência do exemplo 39-testar-navegadores, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}