user-select: Selecione em um clique ou bloqueie a seleção de texto

Bem vindo a mais um vídeo da Em Busca do Código, nosso canal de programação e tecnologia, e neste vídeo voltamos um pouco as origens do canal, sim, este é um vídeo de HTML e CSS, mais exclusivamente de CSS, pois como já está no título falaremos um pouco da propriedade user-select.

Com a propriedade user-select você pode bloquear a seleção do texto contido em algum elemento HTML, e dependendo do valor atribuído para essa propriedade você pode configurar para que, com um clique, todo o texto seja selecionado.

Mas vamos começar com a parte pratica, segundo as especificações da W3C existem quatro valores possíveis para essa propriedade, sendo eles auto, none, text e all.

Assista ao vídeo:

O valor auto é o valor padrão para esta propriedade, isso significa que, quando não especificado o valor será sempre auto, se o texto for editável ele também poderá ser selecionado (utilizando esse valor).

O valor none da propriedade user-select bloqueia a seleção do texto, o valor text é bem parecido com o valor auto, e permite a seleção do texto conforme o que o usuário selecionar.

E o valor all selecionará com apenas um clique todo o texto do elemento que está sendo configurado com a propriedade user-select.

Exemplos

A sintaxe da propriedade user-select segue o padrão do CSS. Propriedade: Valor;.

Pelo que eu entendi a propriedade user-select é uma recomendação da W3C, que está sendo implementada nos navegadores, o certo deveria ser informar o nome da propriedade dois pontos o valor desejado, mas nesse caso você também tem que informar a primeira versão do navegador. Para ficar mais fácil esse exemplo deixei um HTML padrão, caso queira utilizar ele neste exemplo fique a vontade.

HTML inicial

Como já informado neste HTML crie também um arquivo CSS, de preferência com o nome user-select01.css e salve na mesma pasta que você salvou o arquivo HTML.

Voltando a falar da sintaxe da propriedade user-select, além de uma linha especificando apenas a propriedade e o valor, você precisa também inserir uma linha para cada navegador, sendo -moz- para o Firefox, -webkit- para Chrome, Safari, Edge e Opera e -ms- para o Internet Explorer.

Como podemos ver em nosso HTML, a tag h2 receberá receberá o valor auto, e o arquivo CSS deverá ser configurado assim:

Nada mudará na <h2> uma vez que o valor auto é default para a propriedade user-select, então vamos configurar nosso <h3>, que deverá estar assim.

Agora chegou a hora de testar, abra o arquivo HTML em qualquer navegador e tente selecionar o texto em nossa tag h3. Se você seguiu certinho nossas dicas não conseguirá selecionar o texto da tag h3 em nenhum navegador.

Vamos configurar rapidinho nossa tag h4 mesmo porque o resultado do valor text é bem parecido com o valor auto.

E chegou a hora do valor all, lembrando que, com o valor all todo o conteúdo em texto do elemento HTML que está sendo configurado pela user-select será selecionado com apenas um clique.

Como disse antes segundo as recomendações da W3C existem 4 valores possíveis para a propriedade user-select, mas em navegadores da Microsoft, outro valor também é aceito, e só é aceito (por enquanto) nos navegadores Edge e Internet Explorer.

Esse valor é o element, pelo que eu entendi esse valor deixa selecionar apenas o texto que está no elemento configurado, eu não uso Windows então eu não consigo testa-lo, mas na teoria ele deixará configurar apenas a tag (elemento HTML) que está sendo configurado, não deixando a seleção do texto passar para outros elementos.

No HTML adicione um <h6> com o seguinte texto: user-select: element;.

Já no CSS adicionamos a configuração padrão que fizemos até aqui.

Como disse um pouco antes, por não utilizar Windows eu não consigo testar esse valor da propriedade user-select, mas se você usa Windows, por favor teste e comente no YouTube o atual resultado dela.

Alias, um aviso exclusivo sobre o canal, teremos um curso de dicas que não terá como tema de programação e tecnologia, então, se estiver recebendo notificações do canal e não for seu foco o curso que será apresentado, já desabilita as notificações do canal, caso você já esteja inscrito.

Agora o código fonte final, apenas o CSS.

Código fonte CSS (completo)

Essa dica fica por aqui, eu espero que você tenha gostado, se possível já deixa um like no vídeo desta dica lá no YouTube, compartilha este link, e até mais.