Comments 11
Вы немного перегнули с 2022 годом.
когда же грид денс выйдет
margin: 0 auto; -- 15 символов, привычная запись
margin-inline: auto; -- 20 символов, непривычная, за то новая.
писать min-width через max и max-width через min == ломать голову новичкам, смотрящим в код. но тут запись лаконичнее, ок.
З.Ы.: так себе "фишки", честно говоря
margin: 0 auto перезаписывает топ и боттом — или нужно их подсмотреть и вписать.
margin-inline: auto их не перезаписывает, а делает ровно то, для чего предназначен: выравнивает элемент по горизонтали.
С функциональной точки зрения новая форма записи чище.
А использовать как аргумент, что новичкам что-то непонятно, просто смешно. Новичкам всегда всё в новинку и всё непонятно. Это нормально.
Странно что про min и max указали, а про clamp ни слова.
Я не смог подобрать удачный пример. А так, здорово, что вы указали. Спасибо!
clamp() нужно использовать вместе с формулой адаптивности, которая без этой функции работает коряво.
Условно у нас есть размер элемента на 1280 и его размер на 768 vw. Мы хотим, чтобы размер плавно менялся в этих пределах. Подставляем размеры элемента и vw в пропорцию и выводим адаптивную формулу. Всё хорошо? Нет. Если мы просто подставим её, элемент продолжит расти после 1280 и уменьшаться после 768 vw. Но если мы ограничим его через clamp(), то получим именно то, чего хотим. Это помогает решать некоторые вопросы короче и проще, чем через media-запросы.
Я не понимаю мин/макс
width: min(100%, 1024px)
Если элемент не станет БОЛЬШЕ 1024, то какой же это мин? Это же макс в чистом виде...
.container {
width: 100%;
max-width: 1024px;
}Изначально мы задаем 100%, но не больше 1024px. Значение 100% браузерами понимается тоже в px, не смотря на то, что мы используем %. Это можно посмотреть во вкладе Computed в DevTools.
Таким образом, мы говорим: пусть ширина элемента в px будет любой, но не больше 1024px. Например, браузеры рассчитали, что 100% в итоге трансформируется в 1000px. В итоге им нужно выбрать минимальное значение между 1000px и 1024px.
Это поведение является функцией min().
Любопытные CSS фишки 2022 года