Дискретный Fluid Sizing в CSS с функцией round() 📐
Как round() вместе с clamp() превращает плавные размеры в чёткие шаги и сохраняет строгую дизайн-систему.
Все мы любим clamp() за возможность делать плавный отзывчивый дизайн (fluid sizing) для шрифтов и отступов. Но у него есть минус: на промежуточных экранах браузер выдает хаотичные дробные значения вроде 23.419px. Это часто ломает строгую дизайн-систему, где все размеры должны быть кратны, например, 8 пикселям.
Ахмад Шадид выпустил классный разбор того, как решить эту боль с помощью относительно свежей CSS-функции round().
Идея в том, чтобы обернуть clamp() в round() и задать интервал дискретности. В итоге размеры меняются не линейно-размыто, а четкими шагами (ступенями).
Выглядит это примерно так:
font-size: round(nearest, clamp(1rem, 5vw, 3rem), 4px);Что это дает на практике:
- Визуальное единообразие: Размеры текста и блоков округляются до понятных дизайн-системе шагов (например, строго кратны
4pxили8px). - Идеальная синхронизация: Соседние элементы, зависящие от ширины экрана, будут перепрыгивать на новые брейкпоинты одновременно, исключая визуальный перекос «в процессе» резинового ресайза.
- Меньше работы для субпиксельного рендеринга: Никаких микро-размытий из-за дробных пикселей.
Если вы топите за идеальный UI и строгие сетки — этот трюк определенно стоит забрать в арсенал.