Usando CSS, é possível impedir que os usuários selecionem texto dentro de um elemento usando user-select: none. Agora, é compreensível por que isso pode ser considerado “controverso”. Quero dizer, rede de apoio social estaremos desabilitando os comportamentos padrão do usuário? De um modo geral, não, não deveríamos estar fazendo isso. Mas a desativação da seleção de texto tem alguns casos de uso legítimos (embora raros)? Eu penso que sim.
Neste artigo, exploraremos esses casos de uso e veremos como podemos usar user-select: none para melhorar (não atrapalhar) as experiências do usuário. Também não vale nada que o user-select propriedade tem outros valores além none que pode ser usado para alterar o comportamento da seleção de texto em vez de desativá-lo completamente, e outro valor que até impõe seleção de texto, então também vamos dar uma olhada neles.
Possiveis user-select valores
Vamos dar o pontapé inicial percorrendo os diferentes user-select valores e o que fazem.
Aplicando user-select: none; para um elemento significa que seu conteúdo de texto e conteúdo de texto aninhado não serão funcionalmente selecionáveis ou visualmente selecionáveis (ou seja, ::selection não funcionará). Se você fizesse uma seleção que contivesse algum conteúdo não selecionável, o conteúdo não selecionável seria omitido da seleção, portanto, é bastante bem implementado. E o suporte é ótimo.
Esses dados de suporte do navegador são de Eu posso usar, que tem mais detalhes. Um número indica que o navegador suporta o recurso nessa versão e superior.
Computador de mesa
| Chrome | Firefox | IE | borda | Safári |
|---|---|---|---|---|
| 4* | 2* | 10 * | 12 * | 3.1 * |
Celular / Tablet
| Android Chrome | Firefox Android | Android | iOS Safari |
|---|---|---|---|
| 105 | 104 | 2.1 * | 3.2 * |
Adversamente, user-select: text torna o conteúdo selecionável. Você usaria esse valor para substituir user-select: none.
user-select: contain é um interessante. Aplicá-lo significa que, se uma seleção começa dentro do elemento, ela também deve terminar dentro dele, contendo-o. Isso estranhamente não se aplica quando a seleção começa antes o elemento, no entanto, provavelmente é por isso que nenhum navegador atualmente o suporta. (O Internet Explorer e versões anteriores do Microsoft Edge o suportavam anteriormente sob o pretexto de user-select: element.)
Com o user-select: all, a seleção de parte do conteúdo do elemento resulta na seleção automática de todo ele. É tudo ou nada, o que é muito intransigente, mas útil em circunstâncias em que os usuários são mais propensos a copiar conteúdo para sua área de transferência (por exemplo, compartilhamento e incorporação de links, trechos de código, etc.). Em vez de clicar duas vezes, os usuários precisarão clicar apenas uma vez para que o conteúdo seja selecionado automaticamente.
Tenha cuidado, porém, pois esse nem sempre é o recurso que você pensa que é. E se os usuários quiserem apenas selecionar parte do conteúdo (por exemplo, apenas a parte do nome da fonte de um snippet do Google Fonts ou uma parte de um snippet de código)? Ainda é melhor lidar ”copiar para área de transferência” usando JavaScript em muitos cenários.
Uma melhor aplicação de user-select: all é garantir que as cotações sejam copiadas inteiramente e com precisão.
O comportamento de user-select: auto (o valor inicial de user-select) depende do elemento e de como ele é usado. Você pode saber mais sobre isso em nosso almanaque.
Agora vamos explorar os casos de uso para user-select: none...
Removendo não texto da seleção
Quando você copia conteúdo de uma página da web, provavelmente é de um artigo ou algum outro tipo de conteúdo longo, certo? Você provavelmente não deseja que sua seleção inclua imagens, emojis (que às vezes podem ser copiados como texto, por exemplo, “:thinkingface:”) e outras coisas que você pode esperar encontrar em um <aside> elemento (por exemplo, frases de chamariz no artigo, anúncios ou qualquer outra coisa que não faça parte do conteúdo principal).
Para evitar que algo seja incluído nas seleções, certifique-se de que esteja envolvido em um elemento HTML e, em seguida, aplique user-select: none para isso:
<p>lorem <span style="user-select: none">🤔</span> ipsum</p>
<aside style="user-select: none">
<h1>Heading</h1>
<p>Paragraph</p>
<a>Call to action</a>
</aside>Em cenários como este, não estamos desabilitando a seleção, mas sim otimizando isto. Também vale a pena mencionar que selecionar não significa necessariamente copiar – muitos leitores (inclusive eu) gostam de selecionar o conteúdo à medida que o lêem para que possam lembrar onde estão (como um marcador), outro motivo para otimizar em vez de desativá-lo completamente.
Evitando a seleção acidental
Aplicar user-select: none para links que parecem botões (por exemplo, <a href="/pt/whatever" class="button">Click Me!</a>).
Não é possível selecionar o conteúdo de texto de um <button> or <input type="submit"> porque, bem, por que você faria? No entanto, esse comportamento não se aplica a links porque tradicionalmente eles fazem parte de um parágrafo que deve ser selecionável.
Justo.
Poderíamos argumentar que fazer links parecerem botões é um antipadrão, mas de qualquer forma. Não está quebrando a internet, está? Esse navio navegou de qualquer maneira, portanto, se você estiver usando links projetados para se parecerem com botões, eles devem imitar o comportamento dos botões, não apenas para consistência, mas para evitar que os usuários selecionem acidentalmente o conteúdo em vez de acionar a interação.
Certamente sou propenso a selecionar coisas acidentalmente, já que uso meu laptop na cama mais do que gostaria de admitir. Além disso, existem várias condições médicas que podem afetar o controle e a coordenação, transformando um clique pretendido em um arrastar/seleção não intencional, portanto, há problemas de acessibilidade que podem ser resolvidos com user-select demasiado.
Interações que exigem arrastar (intencionalmente) também existem (por exemplo, em jogos de navegador), mas são incomuns. Ainda assim, apenas mostra que user-select de fato tem alguns casos de uso.
Evitando o roubo de conteúdo com paywall
O conteúdo com paywall recebe muito ódio, mas se você acha que precisa proteger seu conteúdo, é o seu conteúdo - ninguém tem o direito de roubá-lo apenas porque não acredita que deve pagar por isso.
Se você quiser seguir esse caminho, há muitas maneiras de tornar mais difícil para os usuários contornarem os paywalls (ou, da mesma forma, copiar conteúdo protegido por direitos autorais, como o trabalho publicado de outros).
Desfocando o conteúdo com CSS:
article { filter: blur(<radius>); }Desativando os atalhos de teclado para DevTools:
document.addEventListener("keydown", function (e) {
if (e.keyCode == 123) e.preventDefault();
else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 73) e.preventDefault();
else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 74) e.preventDefault();
else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 85) e.preventDefault();
});Desativando o acesso ao DevTools através do menu de contexto desativando o próprio menu de contexto:
document.addEventListener("contextmenu", e => e.preventDefault())E, claro, para evitar que os usuários copiem o conteúdo quando não têm permissão para lê-lo na fonte, aplicando user-select: none:
<article style="user-select: none">Algum outro caso de uso?
Esses são os três casos de uso que eu poderia pensar para impedir a seleção de texto. Vários outros passaram pela minha cabeça, mas todos pareciam um exagero. Mas e voce? Você teve que desativar a seleção de texto em alguma coisa? Eu gostaria de saber!
