Ordem visual e ordem de teclado

Neste capítulo você vai entender que order muda a tela sem mudar a tabulação. O projeto de estudo é a Vitrine da Aurora, um espaço cultural fictício no Recife.

Seu ponto de partida

Você já sabe abrir HTML e ligar uma folha CSS. Se ainda faltar essa base, use um curso introdutório de HTML e CSS antes. O exemplo deste capítulo é 06-ordem-acesso, no pacote que acompanha o volume. Trabalhe sobre uma cópia da pasta inicio/ e preserve o original; a versão de referência fica na raiz do exemplo.

Abra index.html da cópia no navegador e o mesmo arquivo num editor de texto. Abrir ou testar não publica a página.

Como praticar

Leia, confira o código, mude uma coisa, preveja, salve, recarregue e confira. Investigue o erro antes de avançar. Ao terminar cada experiência, restaure a mudança pedida quando o capítulo indicar.

order muda a tela

A propriedade order altera a ordem visual dos itens flex. Números menores vêm antes. O HTML permanece na ordem original.

Faça na sua cópia

Veja order em .marca, .nav e .acoes. A implementação completa está no pacote de exemplos que acompanha este volume.

.marca { order: 1; }
.nav { order: 2; }
.acoes { order: 3; }

Mude uma coisa e preveja

Troque order da marca para 3 e das ações para 1.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

As ações aparecem antes visualmente. O HTML não mudou.

Se não acontecer

Se nada muda, confira se o pai ainda é display: flex.

Teclado segue o HTML

Tab e leitores de tela seguem a ordem do documento, não a de order. Por isso order é arriscado para navegação. Prefira reordenar o HTML quando a ordem importa para todos.

Faça na sua cópia

Com order alterado, use Tab no cabeçalho. A implementação completa está no pacote de exemplos que acompanha este volume.

Tab → foco segue a ordem do HTML

Mude uma coisa e preveja

Anote a ordem do foco e compare com a ordem visual.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Foco e tela podem discordar. Isso é o ponto da lição.

Se não acontecer

Não “corrija” com tabindex positivo. Ajuste o HTML se precisar.

Quando evitar order

Use order só para ajustes cosméticos sem impacto de leitura. Menu, formulário e títulos devem permanecer coerentes no HTML.

Faça na sua cópia

Restaure a ordem visual igual à do HTML. A implementação completa está no pacote de exemplos que acompanha este volume.

.marca { order: 1; }
.nav { order: 2; }
.acoes { order: 3; }

Mude uma coisa e preveja

Remova as três declarações order.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A ordem visual volta a seguir o HTML.

Se não acontecer

Sem order, a sequência é a do arquivo. Confira no inspetor.

Atividades

Faça na cópia. Não olhe as respostas antes de tentar.

1. Explique com suas palavras o objetivo: entender que order muda a tela sem mudar a tabulação.
2. Faça uma mudança diferente da lição e diga o que esperava versus o que viu.
3. Em tela estreita (cerca de 320px) ou zoom 200%, anote o que ainda funciona e o que aperta.

Critério de avanço

Você avança quando entender que order muda a tela sem mudar a tabulação.

Respostas comentadas

Atividade 1

O objetivo amarra a etapa ao resultado visível na Vitrine; sem isso a propriedade fica solta.

Atividade 2

Prever antes de recarregar mostra se você entendeu a regra ou só imitou o código.

Atividade 3

Layout de estudo precisa sobreviver a zoom e tela estreita; anotar falhas evita avançar no escuro.