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

  • @27FeetUnder
    @27FeetUnder6 ай бұрын

    "Был бы у меня такой clamp, я может и не женился бы никогда..." 😁Очень полезная функция, спасибо за видос!

  • @PavelChupryna
    @PavelChupryna2 күн бұрын

    Спасибо за работу!

  • @user-me5lo4ib7q
    @user-me5lo4ib7q7 ай бұрын

    Ого, не знала, что min и max можно применять для любых свойств. А clamp для адаптивного размера шрифта -- вообще огонь!

  • @user-xw4sp6lk7k
    @user-xw4sp6lk7k7 ай бұрын

    Канал - находка для начинающих 👍 Ждём практических видео

  • @gift.albooms
    @gift.albooms7 ай бұрын

    clamp - имба, очень не хватало его раньше. Также стоило упомянуть про *vh (dvh, lvh, svh) для мобилок, они позволяют работать с размером в зависимости от вылезающей менюшки мобильного браузера! Будет полезно знать про их существование 😊

  • @AleksanderLamkov

    @AleksanderLamkov

    7 ай бұрын

    Да, про эти единицы измерения кстати есть информация на канале, но я реши, что эта информация для новичков будет лишняя :)

  • @VitalBielik
    @VitalBielik7 ай бұрын

    Класс, очень суперски рассказываешь. Очень здорово прописываешь сценарий текста, все четко и без воды !!)

  • @akylbekbaizakov
    @akylbekbaizakov26 күн бұрын

    Thanks!

  • @smotritelyoutube
    @smotritelyoutube7 ай бұрын

    Лайк, пушка просто !!

  • @Ivanfwit
    @Ivanfwit7 ай бұрын

    Очень круто, спасибо!) дальше обязательно буду смотреть мастер классы)

  • @Bit_Maximum
    @Bit_Maximum7 ай бұрын

    Спасибо!

  • @user-hw3ev1wb3y
    @user-hw3ev1wb3y7 ай бұрын

    Ждём!

  • @user-tc9ml2mu5k
    @user-tc9ml2mu5k3 ай бұрын

    Неплохо,неплохо. Давно искал подобного рода информацию. Спасибо за видео,отлично!!

  • @Ruslan4ik_B

    @Ruslan4ik_B

    2 ай бұрын

    Так почитай любую документацию, одинаково.

  • @AleksanderLamkov

    @AleksanderLamkov

    2 ай бұрын

    @Ruslan4ik_B слово в слово? Обесценил так обесценил.

  • @user-np8nk9km8y
    @user-np8nk9km8y7 ай бұрын

    Хорош!

  • @user-ho9lx2nz2o
    @user-ho9lx2nz2o3 ай бұрын

    СУПЕР!!!!!!!!!!

  • @user-xu2yb4dr4e
    @user-xu2yb4dr4e4 ай бұрын

    божественно

  • @tortik_0162
    @tortik_0162Ай бұрын

    6:25, Подскажите пожалуйста, откуда у нас взялось число 600 (шиирна экрана 600px)? Не вижу это явно указанного в коде

  • @AleksanderLamkov

    @AleksanderLamkov

    Ай бұрын

    Привет! В функцию min через запятую передается два аргумента - 200px и выражение "100% / 3", которое при ширине экрана 600px и более будет вычисляться в значение больше 200 пикселей, что будет явно больше, чем первый аргумент, поэтому при ширине экрана 600-9999px (в общем, при любой, больше 599px) функция min будет использовать наименьше вычисленное значение - первый аргумент "200px".

  • @tortik_0162

    @tortik_0162

    Ай бұрын

    @@AleksanderLamkov тк откуда 600 то? Это какая то фиксированная ширина, привязанная к чему то или это просто число для примера?

  • @AleksanderLamkov

    @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

    @tortik_0162

    Ай бұрын

    @@AleksanderLamkov А, то бишь, первый аргумент умножается на делитель второго. Теперь понял, спасибо огромное ))

  • @colodatwin3102
    @colodatwin31027 ай бұрын

    1:02 , вы имели ввиду оператор?) операнд это же про другое

  • @AleksanderLamkov

    @AleksanderLamkov

    7 ай бұрын

    Привет! Да, я напутал :) Именно оператор.

  • @colodatwin3102

    @colodatwin3102

    7 ай бұрын

    @@AleksanderLamkov отлично) спасибо за урок, very useful)

  • @Luiming-
    @Luiming-3 ай бұрын

    Крутой видос, но у моих учеников мозги поплавятся от таких объяснений 😂

  • @AleksanderLamkov

    @AleksanderLamkov

    3 ай бұрын

    Эх… Объясняю как умею 🤷‍♂️ Но что именно не так? Можете привести пример? Хочу понять зоны роста.

  • @mirzoki
    @mirzoki4 ай бұрын

    а нельзя заранее взять и max -width задать 1200px чем вот это calc писать

  • @AleksanderLamkov

    @AleksanderLamkov

    4 ай бұрын

    Если кратко отвечать, то можно, но так будет непрофессионально. Очень часто в верстке нужны переменные container-width и container-padding-x, поэтому без calc в свойстве max-width с этими переменными не обойтись.

  • @Ruslan4ik_B
    @Ruslan4ik_B2 ай бұрын

    Все отлично, но один большой минус что читаешь и быстро. Не хватает живого общения, объяснения

  • @AleksanderLamkov

    @AleksanderLamkov

    2 ай бұрын

    Учту.

  • @virtuoz-ru
    @virtuoz-ru7 ай бұрын

    Хорош 👍

Келесі