-moz-image-region
Не стандартизовано: Це — нестандартний функціонал, і стандартизувати його ніхто не планує. Його не слід використовувати на вебсайтах у відкритому вебі, оскільки він не буде працювати для всіх користувачів. Також можливі суттєві (і часто — несумісні) відмінності між реалізаціями, а поведінка може змінитися у майбутньому.
Для певних XUL елементів та псевдоелементів, що використовують зображення із властивості list-style-image, ця властивість задає ділянку зображення, що використовується замість усього зображення. Це дає змогу елементам використовувати різні шматки одного й того ж зображення – для покращення швидкодії.
Синтаксис подібний до синтаксису властивості clip. Усі чотири значення відносні щодо верхнього лівого кута зображення.
Синтаксис
/* Ключове слово як значення */
-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;
Значення
autoАвтоматично визначає ділянку зображення до використання.
<shape>Форма, котра визначає частину зображення до використання. Функція
rect()визначає прямокутник, що буде формою. Її параметри описують верхній, правий, нижній та лівий відступи від країв зображення, в такій послідовності.
Формальне визначення
| Початкове значення | auto |
|---|---|
| Успадковується | так |
| Обчислене значення | as specified |
Формальний синтаксис
-moz-image-region =
<shape> | auto
Приклади
Обрізання зображення
#example-button {
/* показати лише зону 4-по-4 пікселі від верхнього лівого кута зображення */
list-style-image: url("chrome://example/skin/example.png");
-moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
/* використати 4-по-4 зону праворуч від попередньої, для кнопки, на яку наведено курсор миші */
-moz-image-region: rect(0px, 8px, 4px, 4px);
}
Специфікації
Не є частиною жодного стандарту.
Сумісність із браузерами
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
-moz-image-region
|
Chrome No support No | Edge No support No | Firefox Full support 1 | Internet Explorer No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox for Android Full support 4 | Opera Android No support No | Safari on iOS No support No | Samsung Internet No support No |