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