Web-заметки №7. CSS-функции min(), max(), clamp()

preview_player
Показать описание
Привет!
Решил создать новую рубрику на канале - Web-заметки. Буду рассказывать тут про различные свойства, теги, js-методы и просто какие-то небольшие новости из мира веба.

В этом видео показываю удобные функции чистого css - min, max, clamp.

Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.

#ityoutubersru #web_заметки #верстка
  1. MaxGraph - cайты как страсть
  2. верстка
  3. верстка сайта
  4. верстка сайта с нуля
  5. верстка с нуля
  6. адаптивная верстка
Рекомендации по теме
Web-заметки №7. CSS-функции 0:09:21

Web-заметки №7. CSS-функции min(), max(), clamp()

CSS Функции calc(), 0:10:06

CSS Функции calc(), min(), max(), clamp()

Кроме clamp() в 0:00:53

Кроме clamp() в CSS ещё есть min() и max() 😱

Что надо знать 0:00:28

Что надо знать о clamp() в CSS?

CSS Grid. #8 0:04:27

CSS Grid. #8 Minmax function

Web-заметки №11. Пошаговый 0:19:47

Web-заметки №11. Пошаговый план изучения верстки

CSS функция clamp(). 0:12:04

CSS функция clamp(). Адаптивный размер текста. Прощайте медиазапросы...

Web-заметки №2. Мышление 0:13:30

Web-заметки №2. Мышление верстальщика

❌ Медиа-запросы не 0:00:48

❌ Медиа-запросы не нужны в CSS, если писать стили так

Web-заметки №6. Полезные 0:08:42

Web-заметки №6. Полезные ссылки для верстальщика

Wow! Уникальная функция 0:00:58

Wow! Уникальная функция в CSS

CSS с нуля. 0:00:51

CSS с нуля. Свойство max width, min width

Web-заметки №8. Практика 0:08:16

Web-заметки №8. Практика с column-count. Разрыв колонки

Свойства max-width & 0:11:26

Свойства max-width & min-width в CSS || Max-width & min-width property in CSS || Курс CSS от...

Вычисления в CSS: 1:40:15

Вычисления в CSS: calc(), min(), max(), clamp()

Новые единицы измерения 0:01:00

Новые единицы измерения в CSS

❌ Медиа-запросы не 0:19:02

❌ Медиа-запросы не нужны, если CSS писать так

CSS Clamp Function 0:00:07

CSS Clamp Function #css #cssfullcourse #cssdeveloper #developer #webdeveloper

Полезное свойство для 0:05:22

Полезное свойство для сокращения left, right, top, bottom - inset!

min(), max() & 0:36:24

min(), max() & clamp() en CSS

Trabalhando com as 0:12:18

Trabalhando com as funções CSS Min(), Max() e Clamp()

Using the CSS 0:10:57

Using the CSS Numeric Functions - min, max, calc, clamp, and minmax

Что можно поместить 0:27:28

Что можно поместить в CSS-переменную? Пользовательские свойства CSS. API свойств и значений....

Функция calc() на 0:06:19

Функция calc() на CSS3, Вычисления значения на CSS, Видео курс по CSS, Урок 37...

Комментарии
Автор

Хрена-се! Два года назад Макс уже сделал обзор на эти новые свойства, которые многие верстальщики только сейчас начинают использовать в своих проектах! )

_Fantom_.
Автор

Здорово! выглядит полезно. Будем использовать

jascherkagri
Автор

Даже не думал, что есть что-то подобное на css, а так писал свой хук на scss) очень полезный урок!

ggo_webdev
Автор

"кроме не браузера"
Хехе) Годно, как всегда!

enfllome
Автор

для font-size подходит отлично, а вот для обычных блоков можно использовать with + (max-width/min-width), например:

вместо min()/max()

.block{max-width: 500px; width: 50%;}
.block{min-width: 500px; width: 50%;}

А так вариаций может быть очень много:
calc()/vmin/vmax/vw/vh/% и т.д.

wmxhhot
Автор

Слегка сумбурно, но спасибо ) Что-то новенькое

aceracer
Автор

CSS функции: min(), max(), clamp()
Width: min (50%; 500px) - если 50% > 500px, то ширина = 500px, иначе ширина = 50%.

Width: max (50%; 500px) - если 50% < 500px, то ширина = 500px, иначе ширина = 50%.

Width: clamp(300px, 50%, 1000px) - минимальная ширина = 300px, если ширина < 1000px, то равна 50%, максимальная ширина = 1000px

Конспект урока

const-shish
Автор

Макс, спасибо за видео, полезные функции, я на препроцессоре sass попробовал скомпилировать их в обычный css, а он не хочет, ругается на разные единицы, % и px, но если написать вот так: calc(min(100%, 1000px)); то работает все, компилируется, подскажи пожалуйста, уместно так использовать эти функции? Еще раз спасибо за видео)))

ibjvqcn
Автор

Шикарные функции. Не знал даже про них. Сходу так сложно их куда-то вставить. Но их функционал шикарен

alym.aleksey
Автор

8:00 я не понял момент с 5vw. Для чего мы его там написали? Это шаг уменьшения и увеличения или что?

SireneviyRay
Автор

есть разница между min-width: / max-width: и width: clamp; ?

DrakeUA
Автор

Решил тут в качестве эксперимента потестить клампы не только для font-size, но и для line-height. И столкнулся со странным поведением элементов.
Допустим я задал переменную подобного плана:

--lineHeight: clamp(2.50rem, calc(1.63rem + 4.38vw), 6.88rem);
что равняется 40.00px при размере экрана 320px и 110.00px при 1920px

и еще с кучу других для разных абзацев и заголовков согласно макету, который нарисовал дизайнер для этих разрешений экрана.

и при изменении окна браузера многие элементы начинают скакать +-1px, оно и логично ибо размер строки меняется и размер шрифта, но вот чего я не могу понять, так это то, что background-image тоже начинают скакать. Есть кнопка размером 30 на 30 с bckg-pos: center center, bckg-size: 10 на 10 и вот при изменении размера окна браузера изображение прыгает на эти +-1px. Не скачет только в том случае, если кнопку вынем из потока задав ей скажем pos:fix. Принудительное обнуление или переназначение lh у данной кнопки не приводит к желаемому результату, чтобы иконка не скала. Через костыли конечно нашел вариант, как поправить это, но всё-же, почему так происходит.

NotForSale