A primeira escola especializada em tecnologia do Alto Solimões, com corpo técnico formado na área.

A trilha
Projetos
Quem somos
Impacto
Para instituições
Blog

WhatsApp Avise quando abrir a turma

Início
Cursos livres
CSS do zero
Módulo 4: Estado e movimento

Fecho de módulo

Módulo 4: Estado e movimento

12 perguntas das 2 aulas deste módulo.

Revise o módulo

Errar aqui não custa nada - a explicação vem junto da correção, e dá para responder quantas vezes quiser.

Pergunta 1 de 12

O que `:focus-visible` faz que `:focus` não faz?

Permanece aplicado depois que o elemento perde o focoAAparece no foco por teclado e não a cada clique de mouseBAplica o contorno também nos elementos filhos do focadoCFunciona em campos de formulário, onde `:focus` não ageD

Você encontra `*:focus { outline: none }` na folha. Qual é a correção?

Substituir por um `:focus-visible` bem visívelAManter, e compensar com uma borda no `:hover`BTrocar por `outline: 0`, que é a forma modernaCRestringir a regra aos elementos que não recebem TabD

Por que `:hover` não pode ser o único jeito de revelar o link de um cartão?

Porque `:hover` não funciona em elementos com `position`APorque em tela de toque não há cursor pairando, e ninguém vêBPorque o `:hover` atrasa a renderização em listas longasCPorque leitores de tela ignoram regras de `:hover`D

Por que `input:invalid` sem `:not(:placeholder-shown)` incomoda?

Ele só passa a valer depois do primeiro envio do formulárioAEle pinta o campo obrigatório vazio desde o primeiro instanteBEle exige que o campo tenha um `pattern` declaradoCEle desativa a bolha de mensagem nativa do navegadorD

O que `filter: brightness(1.1)` resolve no `:hover` de um botão?

Antecipa o cálculo da cor, evitando repaintAAumenta o contraste do texto sobre o fundo do botãoBClareia sem exigir uma segunda cor declarada na folhaCAplica uma sombra suave em volta do elementoD

Envolver o cartão inteiro num `<a>` para torná-lo clicável quebra o quê?

A grade, que passa a tratar o cartão como item inlineAO `:hover`, que deixa de alcançar os filhos do linkBA seleção do texto e o nome anunciado do linkCAs imagens, que perdem o `alt` dentro do linkD

Onde se declara a `transition` para o movimento valer na ida e na volta?

Nos dois, para cobrir entrada e saídaANo estado normal do elementoBNo `:root`, valendo para a página inteiraCNo `:hover`, junto da propriedade que mudaD

Por que evitar `transition: all`?

Ele só funciona junto de `:hover`, e não de `:focus`AEle impede o navegador de aplicar aceleração por hardwareBEle foi removido das versões recentes da especificaçãoCEle anima o que você mudou por outro motivo, e o que é caroD

Qual par de propriedades o navegador anima sem recalcular o layout?

`margin` e `padding`A`transform` e `opacity`B`width` e `height`C`top` e `left`D

Quanto deve durar a resposta visual a um toque?

Cerca de um segundo, para ficar perceptívelAEntre 400 e 600 milissegundosBO tempo que a animação precisar para completarCEntre 100 e 150 milissegundosD

Por que respeitar `prefers-reduced-motion`?

Porque animações pesam no consumo de bateria do aparelhoAPorque o navegador bloqueia animações sem essa media queryBPorque movimento causa enjoo e tontura em muita genteCPorque a WCAG proíbe qualquer animação acima de 300msD

Quantos elementos de um portfólio devem ter animação contínua?

Um por seção, para dar ritmo à rolagemANenhum: movimento infinito é sempre defeitoBUm, no máximo, e discreto o bastanteCTodos os cartões, para a página parecer vivaD

Maiyu Academy

A primeira escola especializada em tecnologia do Alto Solimões, com corpo técnico formado na área.

Aulas presenciais aos sábados em Benjamin Constant, no CETI Aristélio Sabino de Oliveira.

Benjamin Constant, AM, Brasil

Cursos

Robótica Desenvolvimento web A trilha inteira Cursos livres e gratuitos

A escola

Quem somos Impacto Projetos Para instituições Blog

Contato

(97) 98431-7149 maiyu.academy

Privacidade Termos de uso