::selection

  • Raccourci de la révision : CSS/::selection
  • Titre de la révision : ::selection
  • ID de la révision : 9031
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire New doc page for ::selection; page created, 388 words added

Contenu de la révision

{{ CSSRef() }}

{{ Non-standard_header() }}

Résumé

Le pseudo-élément CSS ::selection applique des règles de décoration à la portion du texte qui a été surligné (p. ex. sélectionné avec la souris ou un autre appareil de pointage) par l'utilisateur.

Seul un petit nombre de propriété CSS peuvent être utilisées dans une règle qui utilise ::selection dans son sélecteur : {{ cssxref("color") }}, {{ cssxref("background") }}, et {{ cssxref("background-color") }}. Veuillez noter, en particulier, que {{ cssxref("background-image") }} est ignoré, comme toutes les autres propriétés.

Bien que ce pseudo-élément ait été dans les brouillons de la spécification CSS Selectors Level 3, il a été enlevé durant la phase Candidate Recommendation, comme il est apparu que son comportement était sous-spécifié, en particulier concernant les éléments imbriqués, et l'interopérabilité n'était pas atteinte (fondé sur une discussion dans la W3C Style mailing list (en)).

Le pseudo-élément ::selection n'est actuellement dans aucun module CSS en voie de standardisation. Il ne doit pas être utilisé dans les environnements de production.

Exemples

Gecko est le seul moteur de rendu qui nécessite un préfixe. A cause du fait que les règles de décomposition analytique de CSS requièrent l'abandon de la règle complète lorsqu'un pseudo-élément invalide est rencontré, deux règles différentes doivent être écrites : ::-moz-selection, ::selection {...}. La règle serait ignorée sur les navigateurs n'utilisant pas Gecko puisque ::-moz-selection n'est pas valide pour eux.

/* afficher le texte sélectionné en jaune sur fond rouge */
::-moz-selection { color: gold;  background: red; }
::selection      { color: gold;  background: red; } 

/* afficher le texte sélectionné dans un paragraphe en blanc sur fond noir */
p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

Spécifications

Le pseudo-élément CSS ::selection a fait partie du brouillon de CSS Selectors Level 3 mais a été retiré avant de d'atteindre le statut de recommendation. Malgré cela, il est implémenté dans certains navigateurs, qui garderont probablement un support expérimental.

Désormais, le pseudo-élément CSS ::selection ne fait partie d'aucune spécification en voie de standardisation.

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1 1.0 {{ property_prefix("-moz") }} 9 9.5 1.1
Fonction Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

{{ languages( { "en": "en/CSS/::selection" }) }}

Source de la révision

<p>{{ CSSRef() }}</p>
<p>{{ Non-standard_header() }}</p>
<h2 id="Résumé">Résumé</h2>
<p>Le pseudo-élément CSS <code>::selection</code> applique des règles de décoration à la portion du texte qui a été surligné (p. ex. sélectionné avec la souris ou un autre appareil de pointage) par l'utilisateur.</p>
<p>Seul un petit nombre de propriété CSS peuvent être utilisées dans une règle qui utilise <code>::selection</code> dans son sélecteur : {{ cssxref("color") }}, {{ cssxref("background") }}, et {{ cssxref("background-color") }}. Veuillez noter, en particulier, que {{ cssxref("background-image") }} est ignoré, comme toutes les autres propriétés.</p>
<div class="note">Bien que ce pseudo-élément ait été dans les brouillons de la spécification CSS Selectors Level 3, il a été enlevé durant la phase Candidate Recommendation, comme il est apparu que son comportement était sous-spécifié, en particulier concernant les éléments imbriqués, et l'interopérabilité n'était pas atteinte <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html" title="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(fondé sur une discussion dans la W3C Style mailing list (en))</a>.<br> <br> Le pseudo-élément <code>::selection</code> n'est actuellement dans aucun module CSS en voie de standardisation. Il ne doit pas être utilisé dans les environnements de production.</div>
<h2 id="Exemples">Exemples</h2>
<p>Gecko est le seul moteur de rendu qui nécessite un préfixe. A cause du fait que les règles de décomposition analytique de CSS requièrent l'abandon de la règle complète lorsqu'un pseudo-élément invalide est rencontré, deux règles différentes doivent être écrites : <code>::-moz-selection, ::selection {...}</code>. La règle serait ignorée sur les navigateurs n'utilisant pas Gecko puisque <code>::-moz-selection</code> n'est pas valide pour eux.</p>
<pre>/* afficher le texte sélectionné en jaune sur fond rouge */
::-moz-selection { color: gold;  background: red; }
::selection      { color: gold;  background: red; } 

/* afficher le texte sélectionné dans un paragraphe en blanc sur fond noir */
p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }
</pre>
<h2 id="Spécifications">Spécifications</h2>
<p>Le pseudo-élément CSS <code>::selection</code> a fait partie du brouillon de <em>CSS Selectors Level 3</em> mais a été retiré avant de d'atteindre le statut de recommendation. Malgré cela, il est implémenté dans certains navigateurs, qui garderont probablement un support expérimental.</p>
<p>Désormais, le pseudo-élément CSS <code>::selection</code> ne fait partie d'aucune spécification en voie de standardisation.</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Fonction</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Support de base</td> <td>1</td> <td>1.0 {{ property_prefix("-moz") }}</td> <td>9</td> <td>9.5</td> <td>1.1</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Fonction</th> <th>Android</th> <th>Chrome for Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Support de base</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<p>{{ languages( { "en": "en/CSS/::selection" }) }}</p>
Revenir à cette révision