Links tabelas e perguntas expansíveis

Neste capítulo você vai acrescentar recursos de consulta que continuam utilizáveis numa tela estreita e pelo teclado.

Seu ponto de partida

Continue depois do capítulo 04. Abra pacote de exemplos/05-tabelas-perguntas. Copie inicio para uma pasta de prática. Abra index.html da cópia no navegador e no editor.

A raiz do exemplo é a referência pronta. Inicio fornece o HTML desta etapa e o CSS no estado anterior. Você modifica sua cópia e compara com a referência. Até o capítulo 11, dois cliques bastam; abrir no disco não publica a página.

Como praticar

Leia e confira as linhas indicadas. Mude uma coisa. Anote sua previsão, salve e recarregue. Compare com a explicação. Se não funcionar, investigue o erro antes de seguir. Pare e retome quando precisar; não é necessário decorar as propriedades.

Um link pode parecer um botão

Um link leva a um destino. Um botão executa uma ação, como limpar um formulário. A aparência não determina qual elemento escolher.

A classe button do Simple.css dá aparência de botão a um link. Ele continua tendo href, pode ser aberto em outra aba e mantém a função de navegação. Neste exemplo, o link abre pratica.html.

A classe notice fornece uma caixa de aviso. Vamos usá-la para identificar que o conteúdo é fictício. Um aviso precisa ter texto compreensível, não apenas uma cor.

Não use um botão sem comportamento para fingir que ele abre outra página. Quando há destino, um link é suficiente e funciona sem JavaScript.

Faça no seu exemplo

Em index.html, localize o link Abrir a prática dentro da seção Recursos. Ele já está pronto para comparação.

<a class="button" href="pratica.html">Abrir a prática</a>
<p class="notice">Exercício fictício para estudo local.</p>

Mude uma coisa e preveja

Retire somente class=“button” do link.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Ative com Enter e volte. Restaure a classe e repita. O destino deve ser igual nos dois casos.

Resultado esperado neste teste: Ele deve voltar à aparência de link comum, mas continuar navegando.

Se não acontecer

Não retire href para mudar a aparência. Sem destino, o elemento deixa de oferecer a mesma navegação.

Leia dados por linhas e colunas

A agenda relaciona dias e assuntos. Table é adequada porque a tarefa é comparar dados. Não use tabela para posicionar cabeçalho, menu e rodapé.

Caption nomeia a tabela. Tr representa uma linha. Th identifica um cabeçalho e td contém um dado. Scope=“col” indica um cabeçalho de coluna; scope=“row”, um cabeçalho de linha. Esses vínculos ajudam a compreender as células além da aparência.

O exemplo tem uma região rolável em torno da tabela. Overflow-x: auto permite rolagem horizontal apenas nessa região se o conteúdo precisar. Tabindex=“0” permite chegar a ela com Tab; role=“region” e aria-label fornecem contexto.

Uma tabela larga não deve obrigar o restante da página a ultrapassar a tela. Também não deve ser reduzida a uma fonte ilegível para caber.

Faça no seu exemplo

Acrescente em custom.css. Em pratica.html, a tabela completa já está dentro de div class=“tabela-rolavel”, com nome e foco por teclado.

.tabela-rolavel {
  overflow-x: auto;
}

Mude uma coisa e preveja

Na célula de assunto da quarta-feira, escreva uma expressão longa sem espaços.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Estreite a janela. Use Tab até a região e as setas para rolar quando houver transbordamento. Depois restaure o texto curto.

Resultado esperado neste teste: Se a tabela ultrapassar sua região, a rolagem deve ficar na tabela, preservando o restante da página.

Se não acontecer

Não aplique overflow-x: hidden ao body para esconder dados. Isso pode cortar informação sem oferecer acesso.

Abra uma pergunta com o teclado

Details contém informação expansível. Summary é o título que a pessoa ativa para abrir ou fechar. O navegador oferece esse comportamento sem um script criado por você.

Use uma pergunta específica, como Onde faço minhas alterações. Um conjunto de controles chamados Leia mais exige abrir cada um para descobrir o assunto.

O atributo open faz o bloco começar aberto. Sem ele, começa fechado. Não é obrigatório que apenas uma pergunta possa ficar aberta. Neste volume, deixaremos os blocos independentes para facilitar a comparação.

Coloque em detalhes informações complementares. Uma instrução obrigatória para executar a próxima etapa precisa estar visível no percurso.

Faça no seu exemplo

Localize o bloco existente em pratica.html. Reescreva-o se quiser praticar, mantendo a pergunta e a resposta dentro de details.

<details>
  <summary>Onde faço minhas alterações?</summary>
  <p>No arquivo custom.css. Preserve simple.css.</p>
</details>

Mude uma coisa e preveja

Acrescente open à tag de abertura:

/* Personalizações do Caderno CSS. Preserve simple.css. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.pular {
  position: absolute;
  left: -10000px;
}
.pular:focus {
  position: static;
}

/* Capítulo 01 */
h1 { font-style: italic; }

/* Capítulo 02 */
.nota { border-left: 4px solid var(--accent); padding-left: 1rem; }
.apresentacao { font-weight: normal; }
.apresentacao { font-weight: bold; }

/* Capítulo 03 */
.apresentacao { line-height: 1.7; font-size: 1.1rem; }
.nota { padding: 1rem; margin-block: 2rem; width: 30rem; max-width: 100%; }

/* Capítulo 04 */

/* Capítulo 05 */
.tabela-rolavel { overflow-x: auto; }