Web/CSS/-moz-context-properties

Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The -moz-context-properties property can be used within privileged contexts in Firefox to share the values of specified properties of the element with a child SVG image.

If you reference an SVG image in a webpage (such as with the <img> element or as a background image), the SVG image can coordinate with the embedding element (its context) to have the image adopt property values set on the embedding element. To do this the embedding element needs to list the properties that are to be made available to the image by listing them as values of the -moz-context-properties property, and the image needs to opt in to using those properties by using values such as the context-fill value.

Syntax

/* Keyword values */
-moz-context-properties: fill;
-moz-context-properties: fill, stroke;

/* Global values */
-moz-context-properties: inherit;
-moz-context-properties: initial;
-moz-context-properties: unset;

Values

fill: Expose the fill value set on the image to the embedded SVG.
stroke: Expose the stroke value set on the image to the embedded SVG.
fill-opacity: Expose the fill-opacity value set on the image to the embedded SVG.
stroke-opacity: Expose the stoke-opacity value set on the image to the embedded SVG.

Formal definition

Initial value	`none`
Applies to	Any element that can have an image applied to it, for example as a `background-image`, `border-image`, or `list-style-image`.
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

none | [ fill | fill-opacity | stroke | stroke-opacity ]#

Examples

Exposing fill and stroke to an SVG image

In this example we have a simple SVG embedded using an <img> element.

You first need to specify on the embedding element the properties whose values you wish to expose to the embedded SVG, using the -moz-context-properties property. For example:

.img1 {
  width: 100px;
  height: 100px;
  -moz-context-properties: fill, stroke;
  fill: lime;
  stroke: purple;
}

Now that you've done this, the SVG image can use the values of the fill and stroke properties, for example:

<img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
                       <rect width='100%' height='100%' stroke-width='30px'
                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">

Here we've set the image src to a data URI containing a simple SVG image; the <rect> inside has been made to take its fill and stroke values from the fill and stroke set on the <img> element by giving them the context-fill/context-stroke keywords in their values, along with a fallback color for the fill (red) which will be used in the case that the SVG is loaded standalone in a top-level window (where it will have no context element to provide context values). Note that if a color is set directly on the SVG, but then the context color is also specified, the context color overrides the direct color.

Note: You can find a [[../../../../../../mdn.github.io/css-examples/moz-context-properties/index|working example on Github]].

Specifications

Not part of any standard.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`-moz-context-properties` Experimental'Non-standard'	Chrome No support No	Edge No support No	Firefox Full support 55 Notes' Disabled' Full support 55 Notes' Disabled' Notes' With the preference set to `false`, the property still works with SVGs via `chrome://` or `resource://` URLs Disabled' From version 55: this feature is behind the `svg.context-properties.content.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 55 Notes' Disabled' Full support 55 Notes' Disabled' Notes' With the preference set to `false`, the property still works with SVGs via `chrome://` or `resource://` URLs Disabled' From version 55: this feature is behind the `svg.context-properties.content.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.': Non-standard. Expect poor cross-browser support.
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.