Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Diferença entre navegadores (:hover, ::placeholder)

Boa noite. Uso por padrão o navegador firefox e, mesmo seguindo o código correto do curso e documentação obtive os seguintes problemas:

  1. Ao implementar um :hover em um item de lista li onde a cor de fundo deveria mudar, não obtive sucesso. Ao marcar no DevKit a opção 'hov' funcionava corretamente, mas quando dependia do meu mouse selecionar nada acontecia. E usando o inspecionar interativo conseguia garantir que o mouse realmente estava no item correto.
  2. Tentando colocar uma imagem em um campo input como background-image do placeholder, a imagem não aparecia corretamente de jeito algum. No inspecionar parecia que ela estava sendo coberta pelo próprio padding do campo.

Ambos os problemas foram solucionados quando eu testei no Chrome, sem problemas. Irei anexar um print ilustrando a diferença do caso 2.

Fiquei com dúvida sobre o motivo disso acontecer se estou usando o reset.css para não ter diferença entre navegadores. O ChatGPT disse que o reset não se aplica a pseudo classes ou pseudo elementos (hover e placeholder), e que eles ficam a critério do navegador em relação a sua implementação.
Isso é verdade? Não consegui achar mais informações procurando na internet e gostaria de entender melhor como isso acontece e como devo proceder para criar um site que não tenha tanta diferença entre navegadores. Obrigado por ler até aqui!

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
3 respostas

Oi, Nick! Como vai?

O que você percebeu está correto: reset.css não afeta pseudo-classes (:hover) nem pseudo-elementos (::placeholder). Cada navegador implementa esses comportamentos de forma diferente, e por isso você viu diferenças entre Firefox e Chrome.

Para o :hover, o problema geralmente está em como o evento é aplicado. É mais seguro aplicar no link ou botão dentro da lista:

<ul class="menu">
  <li><a href="#">Item</a></li>
</ul>

<style>
.menu li a {
  display: block;
  padding: 10px;
}
.menu li a:hover {
  background: #ffb703;
}
</style>

Já no caso do ::placeholder, não é indicado colocar imagem nele. A forma correta é aplicar a imagem no próprio input e usar o ::placeholder apenas para estilizar texto:

<input type="text" placeholder="Buscar" class="campo">

<style>
.campo {
  background: url("lupa.svg") no-repeat 12px center;
  background-size: 18px;
  padding-left: 40px;
}
.campo::placeholder {
  color: #777;
}
</style>

Resumindo:

  • Use o :hover em elementos interativos (ex.: a, button).
  • Coloque imagens diretamente no input, não no ::placeholder.
  • Teste sempre em diferentes navegadores, pois pseudo-elementos não são totalmente padronizados.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado
```

Boa tarde, obrigado pela resposta.

As dicas me ajudam sim! Mas gostaria de saber se consigo alguma documentação mais específica dizendo quais pseudo-classes e pseudo-elementos variam de acordo com os navegadores, para ter atenção redobrada com eles..

A propósito, no curso https://cursos.alura.com.br/course/html-css-responsividade-mobile-first, que é o que estou fazendo, foi ensinado a colocar o background image dentro do placeholder, não do input. Talvez vocês queiram revisitar isso e colocar uma 'retificação' de alguma forma..

solução!

Oi, Nick!

Seguem as referências oficiais que você pode usar para checar compatibilidade de pseudo-classes e pseudo-elementos entre navegadores:

Sobre a atividade do curso que você mencionou (colocar background-image no ::placeholder), já registrei o ponto: ela será avaliada pela equipe responsável para garantir que esteja alinhada com as boas práticas atuais de CSS.

Fico à disposição. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado