CSS Функции calc(), min(), max(), clamp()
✏️ В арсенале технологий CSS есть набор функций, благодаря которым можно экономить десятки строк кода, зачастую заменяя JavaScript-костыли. Давайте разберем, что это за функции и в каких ситуациях их стоит применять.
🔴 Timeline:
▶ 00:00 | Вступление
▶ 00:22 | Функция calc()
▶ 02:09 | Использование calc() для размеров контентного контейнера container
▶ 04:17 | Использование calc() для задания полноэкранной высоты с учетом высоты header
▶ 05:16 | Использование calc() для задания ширины колонкам
▶ 05:39 | Функция min()
▶ 06:58 | Функция max()
▶ 07:40 | Функция clamp()
▶ 08:40 | Динамический размер шрифта через clamp()
▶ 09:27 | Заключение
📚 Полезные ссылки:
➖ Функция calc: doka.guide/css/calc/
➖ Функция min: doka.guide/css/min/
➖ Функция max: doka.guide/css/max/
➖ Функция clamp: developer.mozilla.org/en-US/d...
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #css
Пікірлер: 33
"Был бы у меня такой clamp, я может и не женился бы никогда..." 😁Очень полезная функция, спасибо за видос!
Спасибо за работу!
Ого, не знала, что min и max можно применять для любых свойств. А clamp для адаптивного размера шрифта -- вообще огонь!
Канал - находка для начинающих 👍 Ждём практических видео
clamp - имба, очень не хватало его раньше. Также стоило упомянуть про *vh (dvh, lvh, svh) для мобилок, они позволяют работать с размером в зависимости от вылезающей менюшки мобильного браузера! Будет полезно знать про их существование 😊
@AleksanderLamkov
7 ай бұрын
Да, про эти единицы измерения кстати есть информация на канале, но я реши, что эта информация для новичков будет лишняя :)
Класс, очень суперски рассказываешь. Очень здорово прописываешь сценарий текста, все четко и без воды !!)
Thanks!
Лайк, пушка просто !!
Очень круто, спасибо!) дальше обязательно буду смотреть мастер классы)
Спасибо!
Ждём!
Неплохо,неплохо. Давно искал подобного рода информацию. Спасибо за видео,отлично!!
@Ruslan4ik_B
2 ай бұрын
Так почитай любую документацию, одинаково.
@AleksanderLamkov
2 ай бұрын
@Ruslan4ik_B слово в слово? Обесценил так обесценил.
Хорош!
СУПЕР!!!!!!!!!!
божественно
6:25, Подскажите пожалуйста, откуда у нас взялось число 600 (шиирна экрана 600px)? Не вижу это явно указанного в коде
@AleksanderLamkov
Ай бұрын
Привет! В функцию min через запятую передается два аргумента - 200px и выражение "100% / 3", которое при ширине экрана 600px и более будет вычисляться в значение больше 200 пикселей, что будет явно больше, чем первый аргумент, поэтому при ширине экрана 600-9999px (в общем, при любой, больше 599px) функция min будет использовать наименьше вычисленное значение - первый аргумент "200px".
@tortik_0162
Ай бұрын
@@AleksanderLamkov тк откуда 600 то? Это какая то фиксированная ширина, привязанная к чему то или это просто число для примера?
@AleksanderLamkov
Ай бұрын
Это значение ширины экрана, при котором функция min с аргументом "100% / 3" будет отдавать предпочтение другому аргументу 200px, так как именно оно уже будет наименьшим. Если в круглые скобки функции min прописаны через запятую "200px" и "100% / 3", то: 1. На ширине экрана 599px функция выберет среди аргументов именно выражение "100% / 3", которое гарантировано вычислится в значение меньшее, чем 200px. 2. На ширине экрана 600px и шире функция выберет уже значение "200px", так как выражение "100% / 3" будет вычисляться в 200 и более пикселей. Если бы в примере в аргументах функции я использовал (300px, 100% / 4), то аналогичным «решающим» значением для ширины экрана было бы уже 1200px, т. к. 1200 / 4 = 300px.
@tortik_0162
Ай бұрын
@@AleksanderLamkov А, то бишь, первый аргумент умножается на делитель второго. Теперь понял, спасибо огромное ))
1:02 , вы имели ввиду оператор?) операнд это же про другое
@AleksanderLamkov
7 ай бұрын
Привет! Да, я напутал :) Именно оператор.
@colodatwin3102
7 ай бұрын
@@AleksanderLamkov отлично) спасибо за урок, very useful)
Крутой видос, но у моих учеников мозги поплавятся от таких объяснений 😂
@AleksanderLamkov
3 ай бұрын
Эх… Объясняю как умею 🤷♂️ Но что именно не так? Можете привести пример? Хочу понять зоны роста.
а нельзя заранее взять и max -width задать 1200px чем вот это calc писать
@AleksanderLamkov
4 ай бұрын
Если кратко отвечать, то можно, но так будет непрофессионально. Очень часто в верстке нужны переменные container-width и container-padding-x, поэтому без calc в свойстве max-width с этими переменными не обойтись.
Все отлично, но один большой минус что читаешь и быстро. Не хватает живого общения, объяснения
@AleksanderLamkov
2 ай бұрын
Учту.
Хорош 👍