1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
---
title: '::selection'
slug: 'Web/CSS/::selection'
translation_of: 'Web/CSS/::selection'
---
<div>{{CSSRef}}</div>
<h2 id="Sommario">Sommario</h2>
<p>Lo pseudo-elemento CSS <code>::selection applica regole alla porzione di un documento che è stato evidenziato (es. con il mouse o con altri dispositivi di puntamento) dall'utente.</code></p>
<p>Solo un piccolo sottoinsieme di proprietà CSS possono essere usati in una regola che usa <code>::selection nel suo selettore:</code> {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("cursor")}}, {{cssxref("outline")}}, {{cssxref("text-decoration")}}, {{cssxref("text-emphasis-color")}} and {{cssxref("text-shadow")}}. Si noti, in particolare, che {{cssxref("background-image")}} viene ignorato, come qualsiasi altra proprietà.</p>
<div class="note">
<p><code>text-shadow</code> in <code>::selection</code> è supportato da Chrome, Safari e Firefox 17+.</p>
</div>
<div class="note">Benché presente nelle bozze dei selettori CSS di livello 3, questo pseudo-elemento fu rimosso durante la fase del Candidate Recommendation, in quanto il suo comportamento apparve come insufficiente, specialmente negli elementi nidificati, e la sua interoperabilità non venne raggiunta. <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(based on discussion in the W3C Style mailing list)</a>.<br>
<br>
Lo pseudo-elemento <code>::selection</code> venne in seguito riaggiunto in <a href="http://dev.w3.org/csswg/css-pseudo-4/">Pseudo-Elements Level 4</a>.</div>
<h2 id="Esempio">Esempio</h2>
<p>Gecko è l'unico motore che richiede il prefisso. A causa del fatto che le regole di analisi CSS richiedono l'abbandono dell'intera regola quando si incontra uno pseudo-elemento non valido, devono essere scritte due regole distinte: <code>::-moz-selection, ::selection {...}</code>. La regola verrà eliminata sui browser non-Gecko in quanto <code>::-moz-selection</code> non è valido per questi ultimi.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div>Ecco un po' di testo per testare la pseudo-classe di ::selection.</div>
<p>Prova anche questo testo per <em><p></em></p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">/* rende giallo qualsiasi testo selezionato, su sfondo rosso */
::-moz-selection {
color: gold; background: red;
}
::selection {
color: gold; background: red;
}
/* rende bianco il testo selezionato, su sfondo nero */
p::-moz-selection {
color: white;
background: black;
}
p::selection {
color: white;
background: black;
}</pre>
<h4 id="Output">Output</h4>
<p>{{ EmbedLiveSample('Esempio', '', '', '', 'Web/CSS/::selection') }}</p>
<h2 id="Specificazioni">Specificazioni</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specificazione</th>
<th scope="col">Status</th>
<th scope="col">Commento</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td>
<td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<p>Lo pseudo-elemento <code>::selection </code>ma questo venne rimosso prima di poter raggiungere lo status di <em>Recommendation</em>. Venne in seguito riaggiunto come parte delle bozze degli pseudo-elementi di livello 4.</p>
<h2 id="Compatibilità_nei_Browser">Compatibilità nei Browser</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Caratteristica</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Supporto di base</td>
<td>1</td>
<td>{{CompatVersionUnknown}}</td>
<td>1.0 {{property_prefix("-moz")}}<sup>[1]</sup></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>Caratteristica</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Supporto di base</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Attualmente Gecko supporta solamente la versione <em>prefissata</em> ::-moz-selection. Sarà resa senza prefisso in {{bug(509958)}}.</p>
|
