24.11.2024

Solução CSS: Como Tornar uma Imagem Não Arrastável no Firefox

Resposta Rápida

Para rapidamente impedir o arraste e a seleção de imagens usando CSS, você pode usar a propriedade user-select: none; para desativar a seleção e -webkit-user-drag: none; para bloquear o arraste em navegadores baseados em WebKit. Para um funcionamento estável em outros navegadores, adicione o atributo draggable="false":

<style>
  img {
    -webkit-user-drag: none;
    user-select: none;
  }
</style>

<img src="image.jpg" draggable="false">

Esse código evitará que sua imagem seja movida.

Compatibilidade Detalhada entre Navegadores

Você pode aprimorar o código anterior para cobrir todos os navegadores:

img {
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
  unselectable="on";
}

Usar os prefixos de fornecedor -webkit-, -moz- e -ms- garante compatibilidade entre vários navegadores. A propriedade pointer-events: none; desativa todos os eventos do mouse, e o atributo unselectable="on" oferece suporte para versões desatualizadas do Internet Explorer e do Opera.

Formas Alternativas de Apresentar Imagens Não Interativas

Se você não precisa de interação com a imagem, considere usar um div com background-image em vez de img:

<style>
  .imagem-nao-interativa {
    background-image: url('image.jpg');
    height: 200px;
    width: 200px;
  }
</style>

<div class="imagem-nao-interativa"></div>

Esse método elimina a necessidade de várias propriedades e atributos, uma vez que imagens de fundo são inerentemente não interativas.

Visualização

Imagine a imagem como um gnomo de jardim estático. Veja como isso fica no código CSS:

img {
  pointer-events: none;
  user-select: none;
}

Dessa forma, a imagem permanece no lugar e não responde a tentativas de interação.

Sem CSS: 🕊️🛫🕊️🛫🕊️ - A imagem é livre como uma borboleta em voo. Com CSS: 🕊️❌ - A imagem está imóvel como uma robusta árvore de carvalho.

E tudo isso é alcançado sem usar JavaScript.

## Compreensão Profunda das Propriedades CSS
É importante dominar as principais propriedades CSS:

- `user-select: none;`: Essa propriedade impede a seleção do elemento.
- `-webkit-user-drag: none;`, `-moz-user-select: none;`: Prefixos de fornecedor para compatibilidade com versões mais antigas dos navegadores.
- `pointer-events: none;`: Essa propriedade faz com que o elemento não responda a eventos do mouse.

Aplique essas propriedades com sabedoria para evitar prejudicar a experiência do usuário e a acessibilidade do seu site.

## Casos Delicados: Erros a Evitar
O CSS pode se comportar de maneira diferente entre navegadores, portanto, testar é essencial. Eventos de toque em dispositivos móveis podem ignorar `pointer-events: none;`, o que deve ser levado em consideração durante o desenvolvimento. O uso incorreto de `pointer-events` pode desativar totalmente a interação com elementos interativos.

## Recursos Úteis
1. [user-select - CSS: Folhas de Estilo em Cascata | MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/user-select) — Para um estudo aprofundado sobre `user-select` em CSS.
2. [user-select | CSS-Tricks](https://css-tricks.com/almanac/properties/u/user-select/) — Um guia passo a passo sobre como usar `user-select`.

## Conclusão
Tempo e prática são elementos chave. Se essas informações o ajudaram a tornar as imagens imóveis, considere dar uma classificação. Boa sorte com seu código!👩‍💻

Video

Navigation