-moz-image-region

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

list-style-image プロパティの画像を使用している特定の XUL 要素や擬似要素では、このプロパティは画像全体の代わりに使用される画像の領域を指定します。これにより、要素は同じ画像の異なる部分を使用してパフォーマンスを向上させることができます。

css
/* キーワード値 */
-moz-image-region: auto;

/* <shape> 値 */
-moz-image-region: rect(0, 8px, 4px, 4px);

/* グローバル値 */
-moz-image-region: inherit;
-moz-image-region: initial;
-moz-image-region: unset;

構文は clip プロパティと似ています。4 つの値はすべて、画像の左上隅を基準にしています。

メモ: 背景画像で動作する仕組みについては、 -moz-image-rect() を参照してください。

構文

auto

使用する画像の領域を自動的に定義します。

<shape>

使用する部分画像を定義する図形です。関数 rect() は、形状として使用する長方形を定義します。その引数は、画像の上、右、下、左の辺のオフセットを、この順番で定義します。

公式定義

初期値auto
適用対象XUL の 要素と :-moz-tree-image, :-moz-tree-twisty, :-moz-tree-checkbox の各擬似要素。 注: -moz-image-region はアイコンが list-style-image を使用して指定された 要素でしか機能しません。 XUL の <image src="url" /> では機能しません。
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

Error: could not find syntax for this item

画像の切り抜き

css
#example-button {
  /* この画像の左上から 4x4 の領域のみを表示する */
  list-style-image: url("chrome://example/skin/example.png");
  -moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
  /* 最初のボタンの右にある 4x4 の領域を、ホバーされたボタンに使用します。 */
  -moz-image-region: rect(0px, 8px, 4px, 4px);
}

仕様書

どの標準にも含まれていません。

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
-moz-image-region
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.

関連情報