CSS

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

8 de abril de 2020

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.

retirando a selecao com CSS capa

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x