blob: 2d28355837ea1c7d006d229105e15d3e30573e0b (
plain)
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
---
title: Propriedades personalizadas (--*)
slug: Web/CSS/--*
translation_of: Web/CSS/--*
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<p class="summary"><span class="seoSummary">Nomes de propriedades com o prefixo <code>--</code>, como <code>--example-name</code>, representam <em>Propriedade personalizadas</em> que contém um valor que pode ser reutilizado por todo o documento usando a função ({{cssxref("var")}}).</span></p>
<p>Propriedades personalizadas participam na cascata: cada uma delas pode aparecer várias vezes e o valor da variável corresponderá ao valor definido na propriedade personalizada, decidido pelo algoritmo de cascata.</p>
<p>{{cssinfo}}</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="brush: css">--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
</pre>
<dl>
<dt><code><declaration-value></code></dt>
<dd>Este valor corresponde a qualquer sequência de um ou mais tokens, desde que a sequência não contenha tokens não permitidos. Representa a totalidade do que uma declaração válida pode ter como valor.</dd>
</dl>
<h3 id="Sintaxe_formal">Sintaxe formal</h3>
{{csssyntax}}
<h2 id="Exemplo">Exemplo</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p id="firstParagraph">Este parágrafo deve ter um fundo azul e um texto amarelo.</p>
<p id="secondParagraph">Este parágrafo deve ter um fundo amarelo e um texto azul.</p>
<div id="container">
<p id="thirdParagraph">Este parágrafo deve ter um fundo verde e um texto amarelo.</p>
</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css; highlight[2,3]">:root {
--first-color: #488cff;
--second-color: #ffff8c;
}
#firstParagraph {
background-color: var(--first-color);
color: var(--second-color);
}
#secondParagraph {
background-color: var(--second-color);
color: var(--first-color);
}
#container {
--first-color: #48ff32;
}
#thirdParagraph {
background-color: var(--first-color);
color: var(--second-color);
}
</pre>
<h3 id="Resultado">Resultado</h3>
<p>{{EmbedLiveSample('Example', 500, 130)}}</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Variables", "#defining-variables", "--*")}}</td>
<td>{{Spec2("CSS3 Variables")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Recurso</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>suporte básico</td>
<td>49.0</td>
<td>15</td>
<td>{{CompatGeckoDesktop("42.0")}}</td>
<td>{{CompatNo}}</td>
<td>36.0</td>
<td>9.3<sup>[3]</sup></td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Recurso</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>suporte básico</td>
<td>50.0</td>
<td>{{CompatGeckoDesktop("29.0")}}</td>
<td>{{CompatNo}}</td>
<td>37.0</td>
<td>9.3<sup>[3]</sup></td>
</tr>
</tbody>
</table>
</div>
<p>[3] See {{WebKitBug(19660)}}.</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/pt-BR/docs/Web/CSS/Using_CSS_variables">Utilizando variáveis CSS</a></li>
</ul>
|
