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