Какие новые CSS функции, например clamp и области видимости контейнеров, вы знаете

Что проверяют

Знаете ли вы механику, а не только названия: как clamp() считает значение и что нужно, чтобы контейнерный запрос вообще сработал. Следом часто просят сверстать карточку, которая меняет раскладку в узкой и широкой колонке без медиазапросов.

Как отвечать

clamp(MIN, VAL, MAX) возвращает VAL, зажатое между границами, и равна max(MIN, min(VAL, MAX)). Типичный случай, резиновая типографика: font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem). Середину пишут как сумму rem и vw, а не чистые vw, иначе текст перестаёт расти при зуме страницы, а это нарушение требования WCAG о масштабировании текста до 200%.

Container queries работают так:

• объявить контейнер: container-type: inline-size на родителе или сокращённо container: card / inline-size. Тип size следит и за высотой, но тогда высоту нужно задать явно, иначе блок схлопнется;
• написать запрос: @container card (width > 400px) { ... }. Без имени запрос смотрит на ближайшего предка-контейнера;
• элемент не опрашивает сам себя: стили применяются к потомкам контейнера;
• единицы контейнера: cqi, cqw, cqh, cqmin, их удобно подставлять в тот же clamp() вместо vw;
• style queries: @container style(--variant: compact) проверяет значение кастомного свойства, поддержка появилась позже размерных запросов, её стоит проверить.

Размерные контейнерные запросы работают во всех основных браузерах с 2023 года, полифилл уже не нужен. Рядом уместно упомянуть другие новинки: :has(), нативную вложенность, @layer, min() и max(), light-dark().

Где спотыкаются

Пишут @container и забывают объявить container-type на родителе. Запрос тогда молча не срабатывает, и ошибку ищут долго.

Делают шрифт на чистых vw внутри clamp(). На десктопе красиво, но при зуме 200% размер почти не меняется.

Путают container queries с @scope. Первые про размер родителя, второе ограничивает область действия селекторов и к адаптивности отношения не имеет.