-moz-context-properties

非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

メモ: この機能は Firefox 55 から利用可能ですが、現在は chrome:// または resource:// の URL から読み込んだ SVG 画像にのみ対応しています。ウェブ上の SVG でこの機能を実験するには、 svg.context-properties.content.enabled の設定を true に設定する必要があります。

ウェブページで (例えば <img> 要素または背景画像として) SVG 画像を参照する場合、 SVG 画像は埋め込み要素 (そのコンテキスト) と協調して、画像が埋め込み要素に設定されたプロパティ値を採用することがあります。これを行うにためは、埋め込み要素は -moz-context-properties プロパティの値として画像に使用可能にするプロパティの一覧を示す必要があります。 context-fill 値などを使用して、これらのプロパティを使用するように画像に意思表示する必要があります。

初期値none
適用対象background-image, border-image, list-style-image などで適用される画像を持つすべての要素。
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* キーワード値 */
-moz-context-properties: fill;
-moz-context-properties: fill, stroke;

/* グローバル値 */
-moz-context-properties: inherit;
-moz-context-properties: initial;
-moz-context-properties: unset;

fill
画像に設定された fill の値を埋め込まれた SVG に伝えます。
stroke
画像に設定された stroke の値を埋め込まれた SVG に伝えます。
fill-opacity
画像に設定された fill-opacity の値を埋め込まれた SVG に伝えます。
stroke-opacity
画像に設定された stoke-opacity の値を埋め込まれた SVG に伝えます。

形式文法

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

この例では、 <img> 要素を使用して埋め込まれた簡単な SVG を使用します。

以下のように、最初に埋め込み SVG に伝えたい値のプロパティを -moz-context-properties プロパティで埋め込む要素に指定する必要があります。

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

これを行うと、次のように SVG 画像は fill および stroke の値を使用することができるようになります。

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

ここで、画像の src に単純な SVG 画像を含む data URI を設定しました。内部の <rect> は、 <img> 要素の fill および stroke から fill および stroke の値を取り、これらの値の context-fill/context-stroke キーワードに設定して、 fill には SVG が最上位ウィンドウに単独で読み込まれた場合 (コンテンツの値を提供するコンテキストの要素がない場合) に使われる代替色 (red) を設定します。なお、色が SVG に直接設定され、コンテキストの色も設定された場合、コンテキストの色は直接設定された色を上書きします。

メモ: Github に動作するサンプルがあります。

仕様書

このプロパティはどの CSS 標準でも定義されていません。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的非標準
Chrome ? Edge ? Firefox 完全対応 55
補足 無効
完全対応 55
補足 無効
補足 With the preference set to false, the property still works with SVGs via chrome:// or resource:// URLs
無効 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 未対応 なしOpera ? Safari ? WebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 完全対応 55
補足 無効
完全対応 55
補足 無効
補足 With the preference set to false, the property still works with SVGs via chrome:// or resource:// URLs
無効 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 ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, teoli
最終更新者: mfuji09,