CSS inset-block-start — синтаксис и примеры
CSS-свойство inset-block-start: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Практический смысл
В материале о «inset-block-start» основное внимание уделено области «раскладка и позиционирование». Свойство inset-block-start относится к области «раскладка и позиционирование» и может создавать новый контекст форматирования, содержащий блок или уровень наложения. Проверяйте поведение «inset-block-start» на панели управления с асинхронным обновлением данных, причём проверяйте и светлую, и тёмную цветовую схему.
Перед применением «inset-block-start» сформулируйте ожидаемое поведение, затем проверьте вычисленное значение inset-block-start, наследование и контекст родителя. Для «inset-block-start» такое сравнение показывает реальную причину изменения.
Синтаксис inset-block-start
Синтаксис «inset-block-start» показан на минимальном фрагменте без внешнего фреймворка. Сначала запустите исходный вариант, затем меняйте отмеченную часть.
.demo {
inset-block-start: 1rem;
}Как работает inset-block-start
Свойство inset-block-start относится к области «раскладка и позиционирование» и может создавать новый контекст форматирования, содержащий блок или уровень наложения. Для «inset-block-start» проверьте две контрольные точки — перестроение при смене writing-mode и победившую декларацию во вкладке Computed: так видно, на каком этапе появляется итоговое поведение этой темы.
Проверка в проекте
- Проверьте вычисленное значение inset-block-start, наследование и контекст родителя; результат относится непосредственно к «inset-block-start».
- Проверить Chrome, Firefox и Safari для новой или экспериментальной возможности при разборе «inset-block-start».
- Проверьте «inset-block-start» на панели управления с асинхронным обновлением данных через перестроение при смене writing-mode и запишите наблюдаемое изменение.
Выбор «inset-block-start» оправдан, если задача относится к области «раскладка и позиционирование», а риск «изолированная декларация inset-block-start без связанных ограничений может дать другой результат в реальном компоненте» исключён проверкой. Для «inset-block-start» сравнивайте не внешний вид, а результат для пользователя.
Практика с inset-block-start
Создайте два варианта «inset-block-start» в рабочем фрагменте интерфейса: корректный и с одной типичной ошибкой. Сравните варианты «inset-block-start» через перестроение при смене writing-mode и объясните различие.
Сценарий: на панели управления с асинхронным обновлением данных.
Ошибки при работе с inset-block-start
Контекст
Изолированная декларация inset-block-start без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «inset-block-start».
Устойчивость
Фиксированные размеры, которые перестают вмещать реальное содержимое при использовании «inset-block-start».
Доступность
Проверка только мышью и только на широком экране; для «inset-block-start» проверьте это отдельно.
Поддержка inset-block-start
Для «inset-block-start» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «inset-block-start»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1, источник 2.
Вопросы о inset-block-start
Как понять, что «inset-block-start» выбрано правильно?
«inset-block-start» выбрано правильно, когда оно решает задачу «управлять местом элемента в потоке, его контекстом или взаимным расположением блоков», сохраняет результат на панели управления с асинхронным обновлением данных и проходит предметную проверку: проверьте вычисленное значение inset-block-start, наследование и контекст родителя.
Нужен ли запасной вариант для «inset-block-start»?
Запасной вариант для «inset-block-start» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «inset-block-start» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.