Одна из моих любимых фишек современного CSS — это функция clamp.

#devtools дня

Одна из моих любимых фишек современного CSS — это функция clamp.

В переводе — зажим. И это буквально то, что она делает: зажимает некое значение в пределах двух других.

Ну, например, выражение:

width: clamp(250px, 50vw, 600px);

...задаст по-умолчанию ширину блока в половину ширины экрана, но не меньше 250 пикселей и не больше шестиста.

Удобно? Ну, не то слово. Со шрифтами вообще великолепно выходит! Вот инструмент, например: https://t.me/htmlshit/902

Ну и пример с шириной: https://codepen.io/Ekaterina_Vu/pen/QWjxJvm

Но собрал я вас не совсем за этим. К сожалению, в средствах разработчика Chrome никак не возможно понять, какое же значение используется в данный момент.

Но уже в Chrome Canary и скоро и в стабильных DevTools 134 нас ждёт адекватная нотация! С зачёркнутыми неиспользуемыми значениями:

width: clamp(250px, 50vw, 600px);

Счастье есть, котаны!

#css #clamp #chrome