mask

  • Revision slug: Web/CSS/mask
  • Revision title: mask
  • Revision id: 449909
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

  • {{ Xref_cssinitial() }} none
  • Applies to all elements
  • {{ Xref_cssinherited() }} no
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}
  • Animatable yes

Syntax

mask: <uri> | none | inherit

Values

If the value is a URI value, the element pointed to by the URI is used as an SVG mask.

Examples

.target { mask: url(#c1); }

.anothertarget { mask: url(resources.svg#c1); }

Specifications

Specification Status Comment
{{SpecName("CSS Masks", "#mask-property", 'mask')}} {{ Spec2("CSS Masks")}} Extends its usage to HTML elements.
Extends its syntax by making it a shorthand for the new mask-* properties defined in that specification.
{{ SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask') }} {{ Spec2('SVG1.1') }} Initial definition.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (for SVG) {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} [*] {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Applies to HTML Elements {{ CompatNo() }} {{ CompatGeckoDesktop("1.9.1") }} [*] {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Gecko notes

[*] Starting in Gecko 10.0 {{ geckoRelease("10.0") }}, the default color space when handling masks is sRGB; previously, the default (and only supported color space) was linearRGB. This changes the appearance of mask effects, but brings Gecko into compliance with the second edition of the SVG 1.1 specification.

See also

Revision Source

<div>
  {{ CSSRef() }}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> <code>none</code></li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn></li>
  <li><dfn>Animatable</dfn> yes</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
mask: &lt;uri&gt; | none | inherit</pre>
<h3 id="Values" name="Values">Values</h3>
<p>If the value is a URI value, the element pointed to by the URI is used as an SVG mask.</p>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush: css">
.target { mask: url(#c1); }

.anothertarget { mask: url(resources.svg#c1); }
</pre>
<h2 id="Specifications" name="Specifications">Specifications</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("CSS Masks", "#mask-property", 'mask')}}</td>
      <td>{{ Spec2("CSS Masks")}}</td>
      <td>Extends its usage to HTML elements.<br />
        Extends its syntax by making it a shorthand for the new <code>mask-*</code> properties defined in that specification.</td>
    </tr>
    <tr>
      <td>{{ SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask') }}</td>
      <td>{{ Spec2('SVG1.1') }}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support (for SVG)</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }} [*]</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td>Applies to HTML Elements</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("1.9.1") }} [*]</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko_notes" name="Gecko_notes">Gecko notes</h3>
<p>[*] Starting in Gecko 10.0 {{ geckoRelease("10.0") }}, the default color space when handling masks is sRGB; previously, the default (and only supported color space) was linearRGB. This changes the appearance of mask effects, but brings Gecko into compliance with the second edition of the SVG 1.1 specification.</p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>{{ Cssxref("clip-path") }}, {{ Cssxref("filter") }}</li>
  <li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content" title="Applying SVG effects to HTML content">Applying SVG effects to HTML content</a></li>
  <li><a href="/en-US/docs/SVG" title="SVG">SVG</a></li>
</ul>
Revert to this revision