From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../web/css/_doublecolon_selection/index.html | 129 +++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 files/pt-br/web/css/_doublecolon_selection/index.html (limited to 'files/pt-br/web/css/_doublecolon_selection') diff --git a/files/pt-br/web/css/_doublecolon_selection/index.html b/files/pt-br/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..16ad827a2a --- /dev/null +++ b/files/pt-br/web/css/_doublecolon_selection/index.html @@ -0,0 +1,129 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +translation_of: 'Web/CSS/::selection' +--- +
{{CSSRef}}
+ +

O pseudo-elemento CSS ::selection aplica estilos para partes do documento que foram selecionadas pelo usuário (tal como clicar e arrastar o ponteiro do mouse através de um texto.

+ +
::selection {
+  background-color: cyan;
+}
+ +

Propriedades permitidas

+ +

Apenas certas propriedades podem ser usadas com o ::selection:

+ + + +
+

Em particular, {{CSSxRef("background-image")}} é ignorada.

+
+ +

Sintaxe

+ +
/* Sintaxe legado do Firefox (até a versão 61) */
+::-moz-selection
+
+{{CSSSyntax}}
+
+ +

Exemplo

+ +

HTML

+ +
Esse texto tem estilos especiais quando selecionado.
+<p>Tente selecionando também o texto nesse parágrafo.</p>
+ +

CSS

+ + + +
/* Texto selecionado dourado com o fundo vermelho */
+::selection {
+  color: gold;
+  background-color: red;
+}
+
+/* Texto selecionado branco com o fundo azul */
+p::selection {
+  color: white;
+  background-color: blue;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Exemplo')}}

+ +

Preocupações com acessibilidade

+ +

Não substitua os estilos de texto selecionados por razões puramente estéticas — os usuários podem personalizá-los para atender às suas necessidades. Para pessoas com problemas cognitivos ou com menos conhecimento tecnológico, alterações inesperadas nos estilos de seleção podem prejudicar sua compreensão da funcionalidade.

+ +

Se substituído, é importante garantir que a taxa de contraste entre o texto e as cores de plano de fundo da seleção seja alta o suficiente para que pessoas com condições de baixa visão possam lê-lo.

+ +

A taxa de contraste da cor é encontrada comparando a luminosidade do texto selecionado e as cores de fundo do texto selecionado. Para atender às atuais Diretrizes de acessibilidade de conteúdo da Web (WCAG), o conteúdo de texto deve ter uma taxa de contraste de 4.5:1 ou 3:1 para texto maior, como títulos. (WCAG define texto grande entre 18,66 px e 24 px e negrito, ou 24 px ou maior.)

+ +

Facilite para os usuários ver e ouvir o conteúdo, incluindo a separação do primeiro plano do segundo plano

+ + + +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}{{Spec2('CSS4 Pseudo-Elements')}}Definição inicial.
+ +
+

Nota: ::selection estava nos rascunhos do Nível 3 dos Seletores de CSS, mas foi removido na fase Recomendação do Candidato porque estava subespecificado (especialmente com elementos aninhados) e a interoperabilidade não foi alcançada (com base na lista de discussão de estilos W3C). Ele retornou no Nível 4 dos Pseudo-Elementos.

+
+ +

Compatibilidade

+ + + +

{{Compat("css.selectors.selection")}}

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf