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