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

{{csssyntax}}

<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="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{Compat("css.properties.-moz-context-properties")}}</p>