block-size

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

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

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

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

/* Keyword values */
block-size: 25em border-box;
block-size: 75% content-box;
block-size: max-content;
block-size: min-content;
block-size: available;
block-size: fit-content;
block-size: auto;

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

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

Начальное значениеauto
Применяется кс такими же width и height
Наследуетсянет
Процентыразмер блока, содержащего элемент
Отображениевизуальный
Обработка значенияс такими же width и height
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

Значения

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

Формальный синтаксис


<'width'>

Пример

HTML


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

CSS


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

Спецификация

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

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
block-sizeChrome Полная поддержка 57Edge Нет поддержки НетFirefox Полная поддержка 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 Нет поддержки НетFirefox Полная поддержка 41
С префиксом
Полная поддержка 41
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 12.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57Firefox Android Полная поддержка 41
С префиксом
Полная поддержка 41
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 43Safari iOS Полная поддержка 12.2Samsung Internet Android Полная поддержка 5.0
Альтернативное имя
Полная поддержка 5.0
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
max-contentChrome Полная поддержка 57Edge Нет поддержки НетFirefox Полная поддержка 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 Нет поддержки НетFirefox Полная поддержка 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

Легенда

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

Смотри также