CSS Математика - это новый подход в адаптивной верстке?
В последнее время обойма CSS пополнилась новыми математическими функциями. На первый взгляд функции - это просто новый способ задания стилей, но все не так просто. Возможно эти новинки помогут нам изменить устоявшийся подход в адаптивной верстке!
0:00 Пролог
00:35 Вспоминаем ветерана CSS: функцию calc()
04:51 Встречайте, функция min()
06:33 Встречайте, функция max()
07:19 min() и max() на практике
10:57 Вишенка на торте - clamp()
14:20 В чем истинная ценность новых функций?
15:32 Браузерная поддержка
16:00 Резюме
______________________________
Один из моих самых любимых каналов о Фронтенде в telegram:
https://t.me/frontendnoteschannel
______________________________
Тайга UI
https://taiga-ui.dev/grid
https://github.com/TinkoffCreditSyste...
_______________________________
Примеры calc()
1) Вертикальное выравнивание
https://codepen.io/Trebushnoi/pen/Jjy...
2) Сетка на коленке
https://codepen.io/Trebushnoi/pen/dyz...
Примеры min(), max()
1) Вертикальные отступы
https://codepen.io/Trebushnoi/pen/ZEJ...
2) Общие стили ссылок
https://codepen.io/Trebushnoi/pen/gOx...
3) Фоновая картинка
https://codepen.io/Trebushnoi/pen/LYj...
Примеры clamp()
1) Адаптивная карточка
https://codepen.io/Trebushnoi/pen/Exv...
2) Адаптивная Grid сетка
https://codepen.io/Trebushnoi/pen/dyz...
3) Адаптивная рамка
https://codepen.io/Trebushnoi/pen/GRv...
_____________________
Для видео я использовал материалы из этих статей:
1) https://moderncss.dev/practical-uses-...
2) https://ishadeed.com/article/css-min-...
3) https://web.dev/min-max-clamp/
Спасибо авторам, хоть они и никогда не посмотрят эти видосы из-за языкового барьера)
#css #html #frontend
Смотрите видео CSS Математика - это новый подход в адаптивной верстке? онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Как пройти в IT? 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 29,00 раз и оно понравилось 2.2 тысяч людям.