Pode haver alguns casos em que impedir a seleção de determinadas partes de sua página da Web pode ser benéfico. Nesses casos, você pode tentar usar a user-selectpropriedade CSS.
Exemplo
Aqui está uma regra de estilo para uma classe chamada disable-selectionque, quando aplicada a um elemento HTML, impedirá que as pessoas possam selecionar o elemento:
.disable-selection { -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer */ -khtml-user-select: none; /* KHTML browsers (e.g.
Konqueror) */ -webkit-user-select: none; /* Chrome, Safari, and Opera */ -webkit-touch-callout: none; /* Disable Android and iOS callouts*/ }
Alguns detalhes sobre a regra de estilo:
- -webkit-user-selecté para Chrome, Safari e Opera (não há necessidade de -o-user-select)
- Uma versão sem prefixo da user-selectpropriedade foi propositalmente deixada de fora.
- A -webkit-touch-calloutpropriedade desabilita os textos explicativos que aparecem durante eventos de toque (no iOS e Android). Veja a imagem a seguir para referência.
Coisas importantes para manter em mente
Há um problema: nãouser-select é uma propriedade CSS padrão incluída em nenhuma especificação W3C. Embora tenha um bom nível de suporte ao navegador , a utilização da propriedade requer prefixos de fornecedores.user-select
No exemplo anterior, não usei uma user-selectdeclaração de propriedade sem prefixo. Isso porque não existe tal propriedade aos olhos dos padrões da web. Eu chegaria ao ponto de fazer uma analogia do uso de user-selectcomo sendo equivalente ao uso de uma propriedade CSS proprietária, como a do Internet Explorer -ms-filterou -ms-text-kashida-space.
Outras coisas a observar:
- user-selecté buggy e inconsistente. Às vezes, você ainda pode selecionar o texto, especialmente quando começa selecionando partes da interface do usuário que não estão desabilitadas.
- O uso do comando “Selecionar tudo” ocasionalmente incluirá textos desabilitados. (Win: Ctrl + A/Mac: Cmd + A) Essa situação pode ser vista claramente no Internet Explorer 11.
- Essa técnica não é uma maneira à prova de balas de impedir a seleção do usuário. CSS pode ser facilmente desabilitado. Essa técnica se baseia em propriedades CSS não padrão, o que significa que há muita incerteza em relação ao seu suporte contínuo em futuros navegadores da web.
- A seleção de usuários desabilitada é irritante. Eu usaria essa técnica dentro da estrutura de aprimoramento progressivo: Use-a apenas em situações em que melhorará a UX de pessoas que usam navegadores e dispositivos que suportam a user-selectpropriedade. No entanto, eu não atribuiria isso a um seletor CSS amplo, como o seletor universal ( *) ou body.
- A user-selectpropriedade pode invalidar sua folha de estilo. Se a conformidade com os padrões for importante para você, o uso dessa propriedade pode causar problemas ao usar testes do validador, como o Serviço de validação de CSS, quando definido para suas opções mais restritas.
