Эволюция CSS-единиц: Почему пора отправить vh в отставку
Долгое время верстка мобильных интерфейсов была настоящей головной болью для фронтенд-разработчиков. Проблема заключалась в нестабильном поведении единицы измерения vh (viewport height). Когда браузеры на мобильных устройствах скрывают или показывают панели инструментов (адресную строку или навигацию), высота области просмотра меняется, что приводит к «прыжкам» контента и обрезке блоков. К счастью, спецификация CSS привнесла решение — новые динамические единицы измерения: dvh, lvh и svh.
В чем была проблема с vh?
Единица 1vh изначально задумывалась как 1% от высоты области просмотра. Однако на мобильных устройствах «высота области просмотра» — понятие растяжимое. Существует три состояния браузера:
- Минимальное состояние: когда адресная строка расширена.
- Максимальное состояние: когда адресная строка скрыта.
- Промежуточное состояние: во время скролла.
В большинстве браузеров vh привязывалась либо к максимальному, либо к минимальному значению, не реагируя на изменения интерфейса. В результате блоки с height: 100vh либо перекрывались панелями управления, либо выглядели нелепо, оставляя огромные пустые пространства при скролле.
Знакомьтесь: новые герои CSS
Чтобы решить эту проблему, W3C предложили три новых значения, которые позволяют точно контролировать поведение элементов в зависимости от контекста.
1. svh (Small Viewport Height)
svh — это высота области просмотра в самом «сжатом» состоянии интерфейса (когда все панели браузера развернуты). Используйте эту единицу, если вам критически важно, чтобы контент гарантированно не заезжал под интерфейс браузера.
2. lvh (Large Viewport Height)
lvh — это высота области просмотра в самом «расширенном» состоянии (когда панели браузера скрыты). Она идеально подходит для ситуаций, где вы хотите использовать максимум свободного пространства, даже если интерфейс браузера частично перекроет ваш контент при скролле.
3. dvh (Dynamic Viewport Height)
dvh — это самый умный вариант. Он динамически подстраивается под текущее состояние области просмотра. Если пользователь скроллит страницу и интерфейс браузера меняется, блоки с dvh плавно меняют свой размер вместе с ним. Это решение для 90% задач, где нужен «честный» полноэкранный контент.
Как правильно внедрять новые единицы
Переход на новые единицы максимально прост. Вместо привычного 100vh теперь рекомендуется использовать 100dvh для блоков, которые должны занимать всю высоту экрана.
Пример кода:
.hero-section {
height: 100dvh;
background: linear-gradient(to bottom, #6a11cb, #2575fc);
}
Стратегия безопасного фоллбека
Несмотря на то, что современные браузеры (Chrome 108+, Safari 15.4+, Firefox 101+) уже поддерживают эти единицы, для старых проектов стоит использовать механизм каскада:
.container {
height: 100vh; /* Фоллбек для старых браузеров */
height: 100dvh; /* Современный стандарт */
}
Итог: стоит ли переходить прямо сейчас?
Ответ — однозначно да. dvh решает одну из самых надоедливых проблем в верстке мобильных лендингов и веб-приложений. Это делает интерфейсы более предсказуемыми и профессиональными. Забудьте про хаки с JavaScript-отслеживанием события resize и вычислениями через window.innerHeight — CSS теперь умеет делать это нативно и максимально эффективно.
Пора обновлять свои стили и делать пользовательский опыт чуть более плавным и качественным!