1 files changed, 134 insertions, 0 deletions
diff --git a/files/fr/web/css/_doublecolon_selection/index.html b/files/fr/web/css/_doublecolon_selection/index.html
new file mode 100644
index 0000000000..409520ae24
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_selection/index.html
@@ -0,0 +1,134 @@
+---
+title: '::selection'
+slug: 'Web/CSS/::selection'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::selection'
+---
+<div>{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::selection</code></strong> permet d'appliquer des règles CSS à une portion du document qui a été sélectionnée par l'utilisateur (via la souris ou un autre dispositif de pointage).</p>
+
+<pre class="brush: css no-line-numbers">::selection {
+  background-color: cyan;
+}</pre>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seul un sous-ensemble des propriétés CSS peut être utilisé pour une règle dont le sélecteur contient <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")}} ainsi que les propriétés détaillées associées,</li>
+ <li>{{cssxref("text-decoration")}} ainsi que les propriétés détaillées associées,</li>
+ <li>{{cssxref("text-emphasis-color")}},</li>
+ <li>{{cssxref("text-shadow")}}.</li>
+</ul>
+
+<p>On notera que {{cssxref("background-image")}} est ignorée, comme les autres propriétés.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">/*Syntaxe propre à Firefox (61 et antérieur) */
+::-moz-selection
+{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* du texte sélectionné sera jaune sur fond rouge */
+::-moz-selection {
+  color: gold;
+  background-color: red;
+}
+
+::selection {
+  color: gold;
+  background-color: red;
+}
+
+/* le texte sélectionné dans un paragraphe */
+/* sera blanc sur noir                     */
+p::-moz-selection {
+  color: white;
+  background-color: black;
+}
+
+p::selection {
+  color: white;
+  background-color: black;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Un peu de texte pour tester ::selection.&lt;/div&gt;
+&lt;p&gt;Essayez également de sélectionner du texte dans ce &amp;lt;p&amp;gt;&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il est recommandé de <strong>ne pas surcharger la police par défaut fournie par le système d'exploitation à des fins esthétiques</strong> et notamment si l'utilisateur a personnalisé ces polices pour ses besoins. Pour les personnes qui connaissent moins les technologies, cette modification peut modifier leur compréhension des fonctionnalités du site.</p>
+
+<p>Si la police est surchargée, il faut s'assurer que le contraste entre la couleur du texte sélectionné et celle de l'arrière-plan est suffisamment élevé afin que les personnes disposant de faibles conditions de vision puissent lire le texte lorsqu'il est sélectionné.</p>
+
+<p>La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :</p>
+
+<ul>
+ <li>Si le texte est en gras : 18.66px ou plus grand</li>
+ <li>Sinon 24px ou plus grand</li>
+</ul>
+
+<p>Quelques ressources :</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM : vérificateur de contraste</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note : </strong>Bien que ce pseudo-élément était inscrit dans les brouillons pour la spécification des sélecteurs CSS de niveau 3, il a été retiré dans la phase de recommandation car le comportement n'était pas suffisamment défini, notamment avec les éléments imbriqués, de plus, l'interopérabilité n'était pas encore aboutie <a class="external" href="https://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(selon une discussion de la liste de diffusion W3C Style)</a>.<br>
+ <br>
+ Le pseudo-élément <code>::selection</code> a de nouveau été ajouté dans la spécification pour <a href="https://dev.w3.org/csswg/css-pseudo-4/">les pseudo-éléments de niveau 4</a>.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.selection")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("pointer-events")}} qui contrôle les évènements actifs sur l'élément</li>
+</ul>