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
|
---
title: '::cue (:cue)'
slug: 'Web/CSS/::cue'
tags:
- '::cue'
- CSS
- Media
- Pseudo-element
- Reference
- Web Video Text Tracks
- WebVTT
- cue
translation_of: 'Web/CSS/::cue'
---
<div>{{CSSRef}}</div>
<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>::cue</code></strong> coincideix amb senyals de <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a> dins d'un element seleccionat. Això es pot usar per donar <a href="https://developer.mozilla.org/docs/Web/API/WebVTT_API#Styling_WebTT_cues">estil als títols i altres senyals</a> en els medis amb pistes VTT.</p>
<p>Només un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element <code>::cue</code>:</p>
<ul>
<li>{{cssxref("color")}}</li>
<li>{{cssxref("opacity")}}</li>
<li>{{cssxref("visibility")}}</li>
<li>{{cssxref("text-decoration")}} <span class="short_text" id="result_box" lang="ca"><span>i les seves propietats no abreujades</span></span>: {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} i {{cssxref("text-decoration-style")}}</li>
<li>{{cssxref("text-shadow")}}</li>
<li>{{cssxref("background")}} <span class="short_text" id="result_box" lang="ca"><span>i les seves propietats no abreujades</span></span>: {{Cssxref("background-color")}}, {{cssxref("background-clip")}}, {{Cssxref("background-image")}}, {{cssxref("background-origin")}}, {{Cssxref("background-position")}}, {{Cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{Cssxref("background-attachment")}} i {{cssxref("background-blend-mode")}}</li>
<li>{{cssxref("outline")}} <span class="short_text" id="result_box" lang="ca"><span>i les seves propietats no abreujades</span></span>: {{cssxref("outline-color")}}, {{cssxref("outline-style")}}, {{cssxref("outline-width")}}</li>
<li>{{Cssxref("font")}} <span class="short_text" id="result_box" lang="ca"><span>i les seves propietats no abreujades</span></span>: {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} i {{Cssxref("font-family")}}</li>
<li>{{cssxref("line-height")}}</li>
<li>{{cssxref("white-space")}}</li>
<li>{{cssxref("text-combine-upright")}}</li>
<li>{{cssxref("ruby-position")}}</li>
</ul>
<p>Les propietats s'apliquen a tot el conjunt de senyals com si fossin una sola unitat. L'única excepció és que el <code>background</code> i les propietats abreujades s'apliquen a cada senyal individualment, per evitar la creació de caixes i que ocultin inesperadament grans àrees dels medis</p>
<h2 id="Sintaxi">Sintaxi</h2>
{{csssyntax}}
<h2 id="Exemple">Exemple</h2>
<p>El següent CSS estableix l'estil de <code>cue</code> perquè el text sigui blanc i el fons sigui una caixa negra translúcida.</p>
<pre class="brush: css">::cue {
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
}</pre>
<h2 id="Especificacions">Especificacions</h2>
<table class="standard-table">
<tbody>
<tr>
<th>Especificació</th>
<th>Estat</th>
<th>Comentari</th>
</tr>
<tr>
<td>{{SpecName("WebVTT")}}</td>
<td>{{Spec2("WebVTT")}}</td>
<td>Definició incial.</td>
</tr>
</tbody>
</table>
<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>
<p class="hidden">La taula de compatibilitat d'aquesta pàgina es genera a partir de dades estructurades. Si voleu contribuir a les dades, consulteu <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i envieu-nos una sol·licitud d'extracció.</p>
<p>{{Compat("css.selectors.cue")}}</p>
<h2 id="Vegeu_també">Vegeu també</h2>
<ul>
<li><a href="/en-US/docs/Web/API/WebVTT_API">Format de Pistes de Web Video (WebVTT)</a></li>
</ul>
|
