CSS box-direction — синтаксис и примеры
CSS-свойство box-direction: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
«box-direction» отмечено как устаревшее. Материал о «box-direction» сохранён для разбора старых проектов, миграции и выбора современной замены.
Когда применять
В материале о «box-direction» основное внимание уделено области «типографика». Свойство box-direction относится к области «типографика» и применяется к текстовым фрагментам и часто наследуется дочерними элементами. Проверяйте поведение «box-direction» в интерфейсе, которым управляют только клавиатурой, причём не добавляйте новую обёртку до объяснения её роли.
Перед применением «box-direction» сформулируйте ожидаемое поведение, затем проверьте вычисленное значение box-direction, наследование и контекст родителя. Для «box-direction» такое сравнение показывает реальную причину изменения.
Синтаксис box-direction
Минимальная запись «box-direction» нужна для отделения самой возможности от стилей и разметки проекта. Проверьте фрагмент отдельно перед переносом.
.demo {
box-direction: 1.5;
}Как работает box-direction
Браузер обрабатывает «box-direction» в контексте области «типографика»: свойство box-direction относится к области «типографика» и применяется к текстовым фрагментам и часто наследуется дочерними элементами. Для «box-direction» наблюдения через победившую декларацию во вкладке Computed и результат при отключённом JavaScript отделяют исходное условие от результата.
Проверка в проекте
- Проверьте вычисленное значение box-direction, наследование и контекст родителя; результат относится непосредственно к «box-direction».
- Сопоставить DOM-порядок с визуальным порядком после раскладки при разборе «box-direction».
- Проверьте «box-direction» в интерфейсе, которым управляют только клавиатурой через победившую декларацию во вкладке Computed и запишите наблюдаемое изменение.
Выбор «box-direction» оправдан, если задача относится к области «типографика», а риск «изолированная декларация box-direction без связанных ограничений может дать другой результат в реальном компоненте» исключён проверкой. Для «box-direction» сравнивайте не внешний вид, а результат для пользователя.
Практика с box-direction
Проверьте «box-direction» на контрольной странице с длинным текстом, клавиатурным управлением и узким экраном. Отдельная проверка для «box-direction»: проверьте вычисленное значение box-direction, наследование и контекст родителя.
Сценарий: в интерфейсе, которым управляют только клавиатурой.
Ошибки при работе с box-direction
Доступность
Изолированная декларация box-direction без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «box-direction».
Каскад
Оптимизация кода до проверки корректности и доступности при использовании «box-direction».
Поддержка
Использование !important вместо разбора каскада; для «box-direction» проверьте это отдельно.
Поддержка box-direction
Для «box-direction» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «box-direction»; окончательное решение принимайте по аудитории конкретного проекта.
Вопросы о box-direction
Как понять, что «box-direction» выбрано правильно?
«box-direction» выбрано правильно, когда оно решает задачу «управлять чтением, переносом и визуальными характеристиками текста», сохраняет результат в интерфейсе, которым управляют только клавиатурой и проходит предметную проверку: проверьте вычисленное значение box-direction, наследование и контекст родителя.
Нужен ли запасной вариант для «box-direction»?
Запасной вариант для «box-direction» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «box-direction» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.