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