CSS column-height — синтаксис и примеры
CSS-свойство column-height: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
«column-height» отмечено как экспериментальное в MDN Browser Compatibility Data. Предусмотрите базовый вариант и протестируйте целевые браузеры.
Назначение и границы
Практический смысл «column-height» связан с тем, чтобы задавать внешние или внутренние размеры и управлять местом для содержимого. Свойство column-height относится к области «размеры и блочная модель» и участвует в расчёте блочной модели с учётом режима письма, ограничений min/max и box-sizing. Контрольная проверка «column-height» проходит в компоненте с русским и английским содержимым, а наблюдаемой точкой служит перестроение при смене writing-mode.
Перед применением «column-height» сформулируйте ожидаемое поведение, затем проверьте вычисленное значение column-height, наследование и контекст родителя. Для «column-height» такое сравнение показывает реальную причину изменения.
Синтаксис column-height
Пример «column-height» оставляет только контекст, необходимый для области «размеры и блочная модель». Измените одно значение и проследите результат в браузере.
.demo {
column-height: min(100%, 60rem);
}Как работает column-height
Браузер обрабатывает «column-height» в контексте области «размеры и блочная модель»: свойство column-height относится к области «размеры и блочная модель» и участвует в расчёте блочной модели с учётом режима письма, ограничений min/max и box-sizing. Для «column-height» наблюдения через перестроение при смене writing-mode и результат при отключённом JavaScript отделяют исходное условие от результата.
Проверка в проекте
- Проверьте вычисленное значение column-height, наследование и контекст родителя; результат относится непосредственно к «column-height».
- Включить направление rtl и проверить логические стороны раскладки при разборе «column-height».
- Проверьте «column-height» в компоненте с русским и английским содержимым через перестроение при смене writing-mode и запишите наблюдаемое изменение.
Критерий выбора «column-height» — предсказуемая работа в заявленном контексте. Для «column-height» подтвердите её через перестроение при смене writing-mode и соблюдите ограничение: проверяйте отсутствие данных как отдельный сценарий.
Практика с column-height
Проверьте «column-height» в минимальном компоненте с длинным текстом, клавиатурным управлением и узким экраном. Отдельная проверка для «column-height»: проверьте вычисленное значение column-height, наследование и контекст родителя.
Сценарий: в компоненте с русским и английским содержимым.
Ошибки при работе с column-height
Устойчивость
Изолированная декларация column-height без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «column-height».
Доступность
Визуальное изменение порядка, не совпадающее с DOM и фокусом при использовании «column-height».
Каскад
Подмена семантики визуально похожим div или span; для «column-height» проверьте это отдельно.
Поддержка column-height
Для «column-height» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «column-height»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о column-height
Как понять, что «column-height» выбрано правильно?
«column-height» выбрано правильно, когда оно решает задачу «задавать внешние или внутренние размеры и управлять местом для содержимого», сохраняет результат в компоненте с русским и английским содержимым и проходит предметную проверку: проверьте вычисленное значение column-height, наследование и контекст родителя.
Нужен ли запасной вариант для «column-height»?
Для «column-height» запасной вариант обязателен: возможность отмечена как экспериментальная. Сначала реализуйте базовое поведение «column-height», затем подключайте улучшение после проверки поддержки.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.