From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/--_star_/index.html | 149 ++++++++++++++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 files/pt-br/web/css/--_star_/index.html (limited to 'files/pt-br/web/css/--_star_') diff --git a/files/pt-br/web/css/--_star_/index.html b/files/pt-br/web/css/--_star_/index.html new file mode 100644 index 0000000000..19d4078aaf --- /dev/null +++ b/files/pt-br/web/css/--_star_/index.html @@ -0,0 +1,149 @@ +--- +title: Propriedades personalizadas (--*) +slug: Web/CSS/--* +translation_of: Web/CSS/--* +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Nomes de propriedades com o prefixo --, como --example-name, representam Propriedade personalizadas que contém um valor que pode ser reutilizado por todo o documento usando a função ({{cssxref("var")}}).

+ +

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.

+ +

{{cssinfo}}

+ +

Sintaxe

+ +
--somekeyword: left;
+--somecolor: #0000ff;
+--somecomplexvalue: 3px 6px rgb(20, 32, 54);
+
+ +
+
<declaration-value>
+
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.
+
+ +

Sintaxe formal

+ +
{{csssyntax}}
+ +

Exemplo

+ +

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>
+ +

CSS

+ +
: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);
+}
+
+
+ +

Resultado

+ +

{{EmbedLiveSample('Example', 500, 130)}}

+ +

Especificações

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Variables", "#defining-variables", "--*")}}{{Spec2("CSS3 Variables")}}Initial definition
+ +

Compatibilidade entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
RecursoChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
suporte básico49.015{{CompatGeckoDesktop("42.0")}}{{CompatNo}}36.09.3[3]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
suporte básico50.0{{CompatGeckoDesktop("29.0")}}{{CompatNo}}37.09.3[3]
+
+ +

[3] See {{WebKitBug(19660)}}.

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf