🛁 👨‍👨‍👦 👍🏼 Seleção e CSS 🐰 🎯 👗

A habilidade de destacar texto e outros objetos foi formada entre os usuários de computador há muitos anos. Destacamos o conteúdo das páginas da web por vários motivos. Talvez você precise copiar o texto e citá-lo em algum lugar, talvez - é simplesmente mais fácil para alguém ler o texto, destacando seus fragmentos. Em dispositivos móveis, no entanto, destacando algo mais difícil. Por exemplo, isso me irrita. Não gosto de destacar o conteúdo das páginas da web no telefone. Esta operação parece estar de alguma forma "errada". Neste artigo, falarei sobre tudo o que você precisa saber sobre seleções de estilo com CSS. Em particular, falaremos sobre o pseudo-elemento e a propriedade

::selectionuser-select. Este artigo tem como objetivo mostrar a todos que desejam que o CSS trabalhe com seleções e como usar métodos diferentes para trabalhar com seleções.

O básico

No MDN, você pode aprender que um pseudoelemento ::selectionpermite aplicar estilos a partes de um documento que foi selecionado pelo usuário (por exemplo, usando o mouse).

Para usá-lo, ::selectionbasta usar a seguinte construção:

p::selection {
   color: #fff;
   background-color: #000; 
}

Texto selecionado

Aqui está um exemplo com o qual você pode experimentar.

Propriedades suportadas :: seleção

Vale ressaltar que o pseudoelemento ::selectionsuporta apenas propriedades color, backgrounde text-shadow.

Personalize seus próprios efeitos de seleção

E se precisarmos fazer a seleção parecer especial? Por exemplo, para que a seleção tenha uma certa altura ou algum histórico interessante? Veja a figura a seguir.

Um exemplo de uma seleção especial de seleção

Isso é possível, embora exija algum esforço. Veja como é feita a seleção mostrada acima:

Um pseudoelemento é adicionado, com o mesmo texto que selecionamos. Em seguida, o pseudoelemento é definido como uma propriedade height: 50%e uma cor de fundo branco.
O pseudoelemento está localizado acima do texto de origem.

Se você agora selecionar o texto, o pseudoelemento irá sobrepor 50% do texto na vertical. Isso nos permite simular o efeito que precisamos.

p {
  position: relative;
  color: #fff;
}

p:after {
  content: attr(data-content);
  position: absolute;
  color: #000;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #fff;
}

p::selection {
  background: rgba(76, 125, 225, 0.18);
}

Eu aprendi sobre essa técnica aqui .

Outra opção para esta seleção é apresentada abaixo. Aqui, em vez de uma seleção sólida, implementei a seleção como um gradiente de CSS. O ponto aqui é usar um gradiente de branco com uma altura de 50% e preencher o elemento uma vez com a imagem de plano de fundo usando o valor no-repeatao definir a propriedade background.

h1:after {
  content: attr(data-content);
  position: absolute;
  color: #000;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(#fff, #fff) top/100% 50% no-repeat;
}

A figura a seguir ilustra essa técnica.

Implementando o destaque do gradiente

Espero que eu tenha conseguido explicar claramente essa idéia. Aqui está um exemplo de trabalho.

Animação de seleção

Trabalhando no exemplo anterior, fiz a seguinte pergunta: "É realista animar a seleção?". Por exemplo, no processo de seleção de texto, a altura da seleção é de 50%. E quando o ponteiro do mouse é movido para o lado, a altura da seleção aumenta para 80%. Como fazer isso? Mas assim:

p {
    transition: background 0.3s ease-out;
}

p:hover:after {
  background-size: 100% 80%;
}

Texto no processo de seleção

Texto após a seleção ser concluída

Aqui está um vídeo que demonstra a seleção animada.

Texto de várias linhas

Infelizmente, a técnica de ajuste de seleção acima não é adequada para texto de várias linhas. No entanto, para implementar algo semelhante a esse texto, você precisa recorrer aos recursos do JavaScript e colocar cada palavra em um elemento inline (minúsculo), por exemplo, em <span>. Depois que cada palavra aparece em seu próprio elemento <span>, um pseudoelemento deve ser adicionado a cada um desses elementos. E depois disso, o efeito descrito acima pode ser aplicado ao texto de múltiplas linhas.

Aqui está um script para colocar cada palavra em um <span>contêiner:

let paragraph = document.querySelector(".text");
const words = paragraph.textContent.split(" ");

paragraph.innerHTML = "";

words.forEach(function (word) {
  let wordItem = document.createElement("span");
  wordItem.setAttribute("data-word", word);
  wordItem.innerHTML = word + " ";
  paragraph.appendChild(wordItem);
});

Depois disso, os elementos <span>devem ser estilizados. Em seguida, para cada um deles, você precisa adicionar um pseudoelemento:

span {
    position: relative;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  span::after {
    content: attr(data-word);
    position: absolute;
    left: 0;
    right: 0;
    top: -0.28em;
    height: 75%;
    padding-top: 0.14em;
    background: #fff;
    pointer-events: none;
  }

  span::selection {
    background: rgba(#4C7DE1, 0.18);
  }

Se você observar esse design na prática, verifica-se que ele funciona, mas não exatamente como você poderia esperar. Um exemplo de destaque de texto com várias linhas é mostrado abaixo. Você pode perceber que a seleção parece irregular.

Seleção

não homogênea Eu diria que essa seleção de múltiplas linhas não é muito boa e que não deve ser usada em escala global. Talvez deva ser usado apenas, digamos, para organizar a seleção de um parágrafo específico.

Aqui, com essa seleção, você pode experimentar.

Uso criativo :: seleção e sombra de texto

Como uma das propriedades que o pseudoelemento suporta ::selectioné text-shadowque podemos tentar obter alguns efeitos interessantes usando algumas sombras do texto. Estamos explorando as possibilidades que essa idéia nos abre.

▍ Destaque com longas sombras

O texto selecionado lança longas sombras.

Veja como implementar esse efeito:

p::selection {
    color: #444444;
    background: #ffffff;
    text-shadow: 1px 0px 1px #cccccc, 0px 1px 1px #eeeeee, 2px 1px 1px #cccccc, 1px 2px 1px #eeeeee, 3px 2px 1px #cccccc, 2px 3px 1px #eeeeee, 4px 3px 1px #cccccc, 3px 4px 1px #eeeeee, 5px 4px 1px #cccccc, 4px 5px 1px #eeeeee, 6px 5px 1px #cccccc, 5px 6px 1px #eeeeee, 7px 6px 1px #cccccc;
}

Effect Efeito de texto de estrutura de tópicos

O texto selecionado torna-se contorno

Esta ideia foi encontrada neste artigo. Estamos falando do fato de que, usando a propriedade,text-shadowvocê pode simular o efeito do texto de estrutura de tópicos.

p::selection {
    color: #fff;
    text-shadow: 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

Effect Efeito de desfoque

O texto selecionado parece desfocado.Outro

efeito interessante que pode ser aplicado ao texto selecionado é desfocá-lo. A linha inferior é usar a propriedade ao definir a cor do textocolor: transparent. As sombras definidas com a ajudatext-shadownão desaparecerão em lugar algum, o que dará o efeito desejado.

p::selection {
  color: transparent;
  text-shadow: 0 0 3px #fff;
}

Tenho certeza de que você poderá criar muitos outros exemplos de text-shadowseleções de estilo. Esta propriedade nos oferece possibilidades ilimitadas.

Textos de sombra e desempenho

Não é recomendável usar estilos muito complexos ao personalizar text-shadow. O fato é que o entusiasmo excessivo por essa propriedade leva a problemas de desempenho. Aqui está um vídeo mostrando um exemplo de tais problemas.

Usando estilos muito sofisticados para personalizar a seleção de texto

O efeito neon apresentado aqui é muito complexo. Observe que, quando esse texto é selecionado, há um atraso perceptível entre o momento em que o texto é selecionado e o momento em que a estilização é aplicada. Além disso, preste atenção ao fato de que o que não deve aparecer na parte superior e esquerda. Portanto, peço que você o use comtext-shadowcuidado.

Os elementos do formulário se destacam?

Uma resposta curta para a pergunta no título desta seção será "sim". Parece-me que isso está errado: você seleciona a página, mas acontece que o conteúdo dentro dos campos de entrada também é destacado. Aqui está como fica.

O conteúdo dentro dos campos de entrada é destacado e

aqui também é possível selecionar o texto dentro do botão. Na seção dedicada auser-select, discutiremos se os usuários devem ou não destacar as formas dos elementos.

Aqui está um exemplo.

Investigando a Propriedade Selecionada pelo Usuário

A propriedade user-selectnos permite definir a capacidade de selecionar texto específico pelo usuário. Essa propriedade pode ser útil para desativar a capacidade de selecionar texto, o que pode ser útil para limitar a capacidade do usuário de selecionar materiais localizados próximos um do outro. Aqui está um padrão que descreve user-select.

Esta propriedade pode ter os seguintes valores: none, auto, text, contain, all.

Casos de uso selecionados pelo usuário

ExtTexto e ícone

Se o elemento tiver texto e um ícone - na forma de um símbolo ou ícone retirado de alguma fonte, esse ícone será destacado quando o texto for selecionado. Considere o exemplo mostrado na figura a seguir.

Botão com texto e ícone

Aqui está o código para este botão:

<button>Our Services<span aria-hidden="true">▼</span></button>

Quando você seleciona este item, ele se parece com o mostrado abaixo.

Botão dedicado

Isso é completamente desnecessário. Observe que a marcação usa um atributoaria-hiddenque oculta o ícone dos leitores de tela. Para resolver o problema de destacar o que você não precisa destacar, podemos usar o seguinte estilo:

button span[aria-hidden="true"] {
    user-select: none;
}

Isso permite proibir a seleção do ícone. E, ao mesmo tempo, que se ligam a proibição de seleção para o atributo aria-hidden. Como resultado, tudo o que não deve se destacar, provavelmente, não deve estar visível para os leitores de tela.

▍ Bandeiras

Esse comportamento das bandeiras me incomoda quando, ao definir ou desmarcar uma bandeira, eu acidentalmente seleciono o texto de sua descrição. Aqui está como fica.

O texto da descrição do sinalizador é selecionado aleatoriamente.Você pode

resolver esse problema denominando o elemento da<label>seguinte maneira:

label {
    user-select: none;
}

All Destaque todo o texto

O valor allque uma propriedade pode receber user-selectpermite obter um efeito interessante. Se o elemento pai tiver essa propriedade com esse valor, todo o texto contido nesse elemento poderá ser selecionado com um clique. Isso pode ser útil para trabalhar com conteúdo de texto, que deve ser destacado por inteiro. Por exemplo, para destacar fragmentos de código disponíveis em uma página:

.embed-code {
    user-select: all;
}

Um fragmento de texto criado com esse estilo pode ser selecionado com um clique.

Aplicativos da web

O aplicativo da web deve ser percebido pelo usuário como um aplicativo real. É possível selecionar o texto do botão em aplicativos regulares? Não, você não pode. É importante que os aplicativos da Web reflitam os recursos familiares dos aplicativos regulares, mesmo que sejam projetados usando HTML e CSS.

Considere alguns exemplos da vida.

▍Slack

No Slack, você pode realçar rótulos e campos de entrada. No entanto, os textos dos botões não são destacados.

As legendas dos botões não são destacadas.

Veja outro exemplo.

A assinatura na barra de título da janela modal é destacada.A

data do bate-papo não pode ser selecionada.

A data não pode ser alocada

Em geral - me parece estranho que no aplicativo você possa selecionar alguns textos que, ao que parece, não devem apoiar a seleção. Existem lugares na interface do Slack em que é usadouser-select: none, mas há menos lugares do que você poderia esperar. Por exemplo, para mim, como usuário, não há benefício em destacar o título de uma janela modal.

▍Noção

A abordagem para a seleção de elementos implementados no Noção, eu gosto mais. Esse aplicativo da Web é mais como um aplicativo real, e não como um site, qualquer parte do qual pode ser destacada.

O que não deve se destacar não se destaca:

nem um único fragmento de texto é destacado nesta figura. É exatamente isso que você pode esperar de um aplicativo.

Não use a seleção global desativada

Não é recomendável desativar a seleção globalmente. Ao usar a seleção de desativação, tente desativá-la apenas para elementos para os quais não faz sentido. Para fazer isso, você pode criar uma classe auxiliar. Por exemplo - isto:

.disable-selection {
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

Padrão ruim

Há um padrão UX que eu realmente não gosto. Consiste em mostrar um aviso ao tentar realçar o texto. Isso irrita e faz o usuário sentir como se estivesse tentando controlar sua interação com o site. Um exemplo desse padrão é mostrado abaixo.

Desativar realce com exibição de notificação

Não faça isso.

Destaque em dispositivos móveis

Há uma propriedade -webkit-touch-calloutpara o iOS Safari que deve desativar a exibição da dica de ferramenta padrão exibida quando o texto é selecionado. Tentei usar essa propriedade, mas ela não funciona.

p {
    -webkit-touch-callout: none;
}

Os estilos ::selectiontambém não funcionam.

E a propriedade user-select: nonefunciona como esperado.

Tentei encontrar um exemplo real ilustrando esse problema. Copiei um pedaço de texto da Wikipedia. Ao mesmo tempo, o texto que era completamente desnecessário para mim foi copiado (listen). Isso é chato.

Juntamente com o texto útil, ele é copiado e (escuta)

Em vez de permitir que o usuário copie essa “escuta”, seria melhor adicionar um estilo a esse elementouser-select: none. Como resultado, ao copiar texto contendo esse elemento, ele não será copiado.

Sumário

Aqui, examinamos os métodos para personalizar o realce dos elementos da página da web usando CSS. Você pode estar interessado em olhar para este material.

Queridos leitores! Como você configura a seleção de texto em seus projetos?

Seleção e CSS