inline-size

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

Свойство CSS inline-size определяет горизонтальные или вертикальные размеры блока в зависимости от режима написания (writing mode). Оно соответствует свойствам width и height и зависит от свойства writing-mode.

Syntax

/* <length> values */
inline-size: 300px;
inline-size: 25em;

/* <percentage> values */
inline-size: 75%;

/* Keyword values */
inline-size: max-content;
inline-size: min-content;
inline-size: fit-content(20em);
inline-size: auto;

/* Global values */
inline-size: inherit;
inline-size: initial;
inline-size: unset;

Если режим написания (writing mode) — вертикальный, значение inline-size относится к высоте элемента; в противном случае, оно относиться к ширине элемента. Связанное свойство — block-size, которое определяет другие размеры элемента.

Значения

Свойство inline-size принимает те же значения, что и свойства width и height.

Formal definition

Начальное значениеauto
Применяется кс такими же width и height
Наследуетсянет
Процентывстроенный размер содержащего блока
Обработка значенияс такими же width и height
Animation typeдлина, проценты или calc();

Formal syntax

<'width'>

Examples

Setting inline size in pixels

HTML

<p class="exampleText">Example text</p>

CSS

.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  inline-size: 110px;
}

Result

Specifications

Specification Status Comment
CSS Logical Properties and Values Level 1
Определение 'inline-size' в этой спецификации.
Редакторский черновик Initial definition

Browser compatibility 

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
inline-sizeChrome Полная поддержка 57Edge Полная поддержка 79Firefox Полная поддержка 41
Полная поддержка 41
Нет поддержки 38 — 51
Отключено
Отключено From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 12.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57Firefox Android Полная поддержка 41
Полная поддержка 41
Нет поддержки 38 — 51
Отключено
Отключено From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 43Safari iOS Полная поддержка 12.2Samsung Internet Android Полная поддержка 5.0
fit-contentChrome Полная поддержка 57Edge Полная поддержка 79Firefox Полная поддержка 38
С префиксом
Полная поддержка 38
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 12.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57Firefox Android Полная поддержка 38
С префиксом
Полная поддержка 38
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 43Safari iOS Полная поддержка 12.2Samsung Internet Android Полная поддержка 5.0
Альтернативное имя
Полная поддержка 5.0
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
max-contentChrome Полная поддержка 57Edge Полная поддержка 79Firefox Полная поддержка 66
Полная поддержка 66
Полная поддержка 41
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 12.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57Firefox Android Полная поддержка 66
Полная поддержка 66
Полная поддержка 41
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 43Safari iOS Полная поддержка 12.2Samsung Internet Android Полная поддержка 5.0
min-contentChrome Полная поддержка 57Edge Полная поддержка 79Firefox Полная поддержка 66
Полная поддержка 66
Полная поддержка 41
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 12.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57Firefox Android Полная поддержка 66
Полная поддержка 66
Полная поддержка 41
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 43Safari iOS Полная поддержка 12.2Samsung Internet Android Полная поддержка 5.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Использует нестандартное имя.
Использует нестандартное имя.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

See also