Содержание · 10
Возможности, появившиеся в браузерах за последние годы, заметно изменили то, что дизайнер может закладывать в макет без оговорок.
Компонент вместо страницы
Контейнерные запросы позволили компоненту реагировать на ширину своего контейнера, а не окна. Это устранило многолетнюю проблему: один и тот же блок в узкой и широкой колонке требовал разной вёрстки.
Для дизайнера это означает, что компонент можно проектировать как самодостаточный, не привязываясь к тому, где он окажется.
Что стало доступно
Краткий перечень возможностей, влияющих на дизайнерские решения.
Меньше кода — быстрее сайт
Многие эффекты, ради которых раньше подключали библиотеки, теперь доступны средствами браузера: плавные переходы, липкие элементы, привязка позиции, прокрутка с привязкой.
Прямое следствие — меньше кода, быстрее загрузка и лучшие показатели производительности при том же результате.
Цвет
Поддержка широких цветовых пространств означает, что на современных экранах доступны более насыщенные цвета, чем позволял стандартный охват.
Практическая оговорка: такие цвета нужно задавать с запасным вариантом, иначе на старых экранах результат непредсказуем.
Что это меняет в работе
Дизайнер может закладывать в макет больше без оговорки «это дорого в разработке». Одновременно вырос порог: разработчики ожидают, что дизайнер понимает, что именно он закладывает.
Половина приёмов, ради которых раньше подключали библиотеку, теперь пишется тремя строками и работает везде.
Что из этого можно закладывать в макет уже сегодня
Между появлением возможности в браузере и моментом, когда её можно закладывать без оговорок, обычно проходит два-три года — столько живут старые версии на устройствах пользователей. Практическое правило: смотреть не на дату выхода, а на долю поддержки в реальной аудитории проекта, и закладывать так, чтобы отсутствие возможности означало более простой вид, а не сломанный.
Этот подход старше самих стандартов: страница сначала работает, затем украшается. Разница в том, что раньше «украшение» означало тени и скругления, а теперь — сложную раскладку и цвет.
Что не изменилось
Ни одна новая возможность браузера не отменила базовых требований. Читаемая длина строки, достаточный контраст, понятная иерархия и предсказуемая навигация работают ровно так же, как десять лет назад, и по-прежнему решают больше, чем любая техническая новинка.
Более того, часть новых возможностей увеличила цену ошибки. Раньше сложную раскладку было трудно сделать, и это само по себе ограничивало эксперименты. Теперь она делается несколькими строками, и удерживать порядок приходится дисциплиной, а не сопротивлением технологии.
Как это меняет разговор дизайнера с разработчиком
Часть приёмов, которые ещё недавно считались дорогими, перестала ими быть, и это меняет не столько вёрстку, сколько переговоры. Раньше ответ «это долго» на запрос о плавном раскрытии, о липком заголовке внутри секции или о сложной сетке был обоснован; теперь у большинства таких запросов есть решение в несколько строк, поддержанное браузерами напрямую.
Практическое следствие для дизайнера — стоит спрашивать не «можно ли», а «сколько это стоит сейчас»: список подешевевшего меняется каждые несколько месяцев. И обратное: часть привычных приёмов подорожала относительно новых. Собственная реализация того, что теперь умеет браузер, — это код, который надо поддерживать, и он проигрывает встроенному в доступности и в скорости.
О чём стоит переспросить
- Плавное появление и переходы между состояниями — раньше требовали библиотеки, теперь нет.
- Сетки со сложным поведением: переносы, выравнивание по базовой линии, подстройка под содержимое.
- Стили в зависимости от размера самого блока, а не окна, — это меняет подход к компонентам.
- Модальные окна и всплывающие подсказки: у браузера есть свои, с правильной доступностью из коробки.
- Цвета вне привычного охвата: на современных экранах доступны те, которых раньше не было.
Что в итоге
Браузеры взяли на себя многое из того, ради чего раньше подключали библиотеки: переходы, адаптивность компонентов, позиционирование.
Для дизайнера это означает больше возможностей при меньшем весе страницы — но и необходимость понимать, что закладывается в макет.
Коротко
- Что из новых возможностей уже можно использовать?
- Контейнерные запросы,
:has(), вложенность в CSS и логические свойства поддерживаются во всех современных браузерах. Проверять стоит не «вышло ли», а «сколько времени прошло»: годовой возраст возможности обычно означает безопасность. - Нужны ли до сих пор префиксы и полифилы?
- Префиксы почти нигде. Полифилы — только если в аудитории заметная доля старых браузеров; в остальных случаях они добавляют вес ради нескольких процентов и обычно не окупаются.
Читайте также
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…