initial commit

1 files changed, 79 insertions, 0 deletions

diff --git a/files/pt-br/web/css/-moz-context-properties/index.html b/files/pt-br/web/css/-moz-context-properties/index.html
new file mode 100644
index 0000000000..21f99210e6
--- /dev/null
+++ b/files/pt-br/web/css/-moz-context-properties/index.html
@@ -0,0 +1,79 @@
+---
+title: '-moz-context-properties'
+slug: Web/CSS/-moz-context-properties
+translation_of: Web/CSS/-moz-context-properties
+---
+<div>{{CSSRef}}{{Non-standard_header}}
+<div class="note">
+<p><strong>Nota</strong>: Essa característica está disponível desde o Fireforx 55, mas só é suportada atualmente com imagens SVG carregadas via URLs <code>chrome://</code> ou <code>resource://</code>. Para experimentar o recurso em SVG na web é necessário definir <code>svg.context-properties.content.enabled</code> para <code>true</code>.</p>
+</div>
+</div>
+
+<p>Se você referenciar uma imagem SVG em uma página web (como com o elemento {{htmlelement("img")}} ou como imagem de fundo), a imagem SVG pode coordenar com o elemento de incorporação (seu contexto) para que a imagem adote os valores da propriedade definidos no elemento de incorporação. Para fazer isso o elemento de incorporação pecisa listar as propriedades que precisarão ficar disponíveis para a imagem listando-os como valores da propriedade de <strong><code>-moz-context-properties</code></strong>, e a imagem precisa optar em usar essas propriedades usando valores como o <code>context-fill</code>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush:css">/* Valores-chave */
+-moz-context-properties: fill;
+-moz-context-properties: fill, stroke;
+
+/* Valores globais */
+-moz-context-properties: inherit;
+-moz-context-properties: initial;
+-moz-context-properties: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>fill</code></dt>
+ <dd>Expõe o valor <code>fill</code> definido na imagem para o SVG incorporado.</dd>
+ <dt><code>stroke</code></dt>
+ <dd>Expõe o valor <code>stroke</code> definido na imagem para o SVG incorporado.</dd>
+ <dt><code>fill-opacity</code></dt>
+ <dd>Expõe o valor <code>fill-opacity</code> definido na imagem para o SVG incorporado.</dd>
+ <dt><code>stroke-opacity</code></dt>
+ <dd>Expõe o valor <code>stoke-opacity</code> definido na imagem para o SVG incorporado.</dd>
+</dl>
+
+<h3 id="Sintaxe_formal">Sintaxe formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Nesse exemplo temos um simples SVG incorporado usando o elemento <code>&lt;img&gt;</code>.</p>
+
+<p>Você precisa primeiro especificar no elemento de incorporação as propriedades cujos valores deseja expor ao SVG incorporado, usando a propriedade <code>-moz-context-properties</code>. Por exemplo:</p>
+
+<pre class="brush: css">.img1 {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill, stroke;
+  fill: lime;
+  stroke: purple;
+}</pre>
+
+<p>Agora que você o fez, a imagem SVG pode usar os valores das propriedades {{cssxref("fill")}} e {{cssxref("stroke")}}, por exemplo:</p>
+
+<pre class="brush: html">&lt;img class="img1" src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;
+                       &lt;rect width='100%' height='100%' stroke-width='30px'
+                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/&gt;&lt;/svg&gt;"&gt;</pre>
+
+<p>Aqui nós definimos a imagem <code>src</code> para uma URI de dado contendo uma simples imagem SVG; o <code>&lt;rect&gt;</code> foi feito para receber os valores de <code>fill</code> e <code>stroke</code> de {{cssxref("fill")}} e {{cssxref("stroke")}} definidos no elemento <code>&lt;img&gt;</code> dando a eles a palavras-chave <code>context-fill</code>/<code>context-stroke</code> em seus valores, juntamente com a cor de fallback para o preenchimento (vermelho) que será usada caso o SVG seja carregado sozinho em uma janela top-level (onde não terá elemento de contexto para prover valores de contexto). Note que se uma cor é definida diretamente no SVG, e a cor de contexto é também especificada, a cor de contexto sobrescreve a cor direta.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Você pode encontrar um <a href="https://mdn.github.io/css-examples/moz-context-properties/">exemplo funcinal no Github</a>.</p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p>Essa propriedade não está definida em nenhum padrão CSS.</p>
+
+<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com dados, por favor acesse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</div>
+
+<p>{{Compat("css.properties.-moz-context-properties")}}</p>