initial commit

1 files changed, 129 insertions, 0 deletions

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'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">O <a href="pt-BR/docs/Web/CSS/Pseudo-elementos">pseudo-elemento</a> CSS <strong><code>::selection</code></strong> 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.</span></p>
+
+<pre class="brush: css no-line-numbers notranslate">::selection {
+  background-color: cyan;
+}</pre>
+
+<h2 id="Propriedades_permitidas">Propriedades permitidas</h2>
+
+<p>Apenas certas propriedades podem ser usadas com o <code>::selection</code>:</p>
+
+<ul>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("background-color")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("caret-color")}}</li>
+ <li>{{CSSxRef("outline")}} and its longhands</li>
+ <li>{{CSSxRef("text-decoration")}} and its associated properties</li>
+ <li>{{CSSxRef("text-emphasis-color")}}</li>
+ <li>{{CSSxRef("text-shadow")}}</li>
+</ul>
+
+<div class="warning">
+<p>Em particular, {{CSSxRef("background-image")}} é ignorada.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox notranslate">/* Sintaxe legado do Firefox (até a versão 61) */
+::-moz-selection
+
+{{CSSSyntax}}
+</pre>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">Esse texto tem estilos especiais quando selecionado.
+&lt;p&gt;Tente selecionando também o texto nesse parágrafo.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">::-moz-selection {
+  color: gold;
+  background-color: red;
+}
+
+p::-moz-selection {
+  color: white;
+  background-color: blue;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">/* 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;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Exemplo')}}</p>
+
+<h2 id="Preocupações_com_acessibilidade">Preocupações com acessibilidade</h2>
+
+<p><strong>Não substitua os estilos de texto selecionados por razões puramente estéticas</strong> — 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.</p>
+
+<p>Se substituído, é importante garantir que a <strong>taxa de contraste</strong> 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.</p>
+
+<p>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 <a href="https://www.w3.org/WAI/intro/wcag">Diretrizes de acessibilidade de conteúdo da Web (WCAG)</a>, 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.)</p>
+
+<p>Facilite para os usuários ver e ouvir o conteúdo, incluindo a separação do primeiro plano do segundo plano</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Verificador de Constraste de Cor</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG,1.4: Facilite para os usuários vizualizarem o conteúdo, incluindo a separação do primeiro plano do segundo plano (em inglês).</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota:</strong> <code>::selection</code> 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 (<a href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">com base na lista de discussão de estilos W3C</a>). Ele retornou no <a href="http://dev.w3.org/csswg/css-pseudo-4/">Nível 4 dos Pseudo-Elementos</a>.</p>
+</div>
+
+<h2 id="Compatibilidade">Compatibilidade</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</div>
+
+<p>{{Compat("css.selectors.selection")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>
+  <p>{{cssxref("pointer-events")}} - permite autores controlarem sob qualquer circustancia(se houver) um elemento gráfico particular podendo ser o alvo do evento do mouse.</p>
+ </li>
+</ul>