#инструмент дня

Текучая типографика. Адаптивная типографика. Шлюзы.

Это все названия для одной крутой вещи — плавного изменения размера шрифта и вертикального ритма в зависимости от размера экрана. С одним нюансом: есть контрольные точки, где формула может меняться. Или нужно «зажать» размер в некотором диапазоне.

И это логично, ведь надо предотвратить слишком мелкий или слишком крупный шрифт.

И вот инструмент для этого: https://modern-fluid-typography.vercel.app/

#font #clamp

#devtools дня

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

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

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

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

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

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

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

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

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

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

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

#css #clamp #chrome

#фишка дня

...от Ахмада Шадида, уже хорошо нам известного.

Как отменить скругление углов на мобиле, но оставить на дестопе?

Конечно, можно написать медиазапросы. Конечно, можно подождать реализации if()...

А можно просто:

border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;

Или так:

clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));

Вообще, вот статья на тему: https://ishadeed.com/article/conditional-border-radius/

А вот так будем делать в будущем:

border-radius: if(100% < 100vw: 8px; else: 0px);

#css #clamp #math