Como impedir a seleção de conteúdo com CSS

Neste artigo veremos como impedir a seleção de conteúdo com CSS, apenas utilizando uma regra nativa da própria linguagem, simples e fácil.

Fala programador(a), beleza? Bora aprender coisa nova!

As vezes por motivo de privacidade, queremos optar por o usuário não poder selecionar o conteúdo

Isso possibilita ao usuário não poder copiar nosso conteúdo, que é bem útil

E a boa notícia é que isso pode ser feito via CSS, com a propriedade user-select

Então devemos utilizar ela da seguinte maneira:

.elemento {
  user-select: none;
}

Lembrando que deve ser aplicado no elemento que desejamos evitar a seleção

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Bom, aprendemos como impedir a seleção de conteúdo com CSS

Porém devemos ficar atentos ao Can I Use desta propriedade, que não é aceita em 100% dos browsers, então use com cuidado

Veja aqui em quais navegadores a propriedade user-select é aceita

E por último e não menos importante, só faça isso se for extremamente necessário

Executar ações que limitam comportamentos comumente utilizados por usuários, como selecionar conteúdos, pode afastá-los do seu site

Então a menos que não seja muito necessário, pense em outra maneira de resolver o seu problema, não tome como primeira ação tirar uma funcionalidade

Conclusão

Neste artigo aprendemos como desabilitar a seleção de texto no browser

Para isso utilizamos a propriedade user-select com o valor none

Porém como avisado no post, tente sempre resolver o problema de uma maneira que não afete os usuários, isso pode ser mal visto por eles

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube