Современный CSS предоставляет множество возможностей, которых невозможно было представить в прошлом.
Ширина с помощью функции min.
Функция min(90%, 1000px) выбирает наименьшее значение из двух заданных. В примере выше представлен широкий экран. Ширина контейнера 1000px, так как 90% в этом случае больше 1000px. Синяя граница подчеркивает ширину элемента относительно родителя. Однако, если уменьшать ширину экрана, то в тот момент когда ширина экрана станет меньше 1000px, то выбранной станет первая опция функции.
Padding и margin с помощью функции max.
Функция max(3vh, 1rem) - полная противоположность предыдущей функции CSS, выбор идет в пользу наибольшей величины. На примере выше, если уменьшать высоту окна, можно заметить, что верхние и нижние padding'и темного блока .dark-backbround уменьшаются, но в момент, когда 3vh становится меньше 1rem'а, уменьшение прекращается и padding'и становятся статичными. Тоже самое и с margin-bottom.
Типография с функцией clamp.
CSS-функция clamp(3rem, 10vw + 1rem, 5rem) задает значение в диапазоне между минимальным и максимальным значением. Функция принимает три аргумента: минимальное значение, предпочитаемое значение и максимально допустимое. При этом минимальное и максимальное значение должно быть абсолютным значением или как в этом случае, относительным к корневому размеру font-size, а в середине функции должна находится относительная единица измерения. На примере выше можно заметить, что размер заголовка изменяется в заданном диапазоне при изменении ширины окна, не превышая минимального и максимального значения. Ссылка на пример: https://codepen.io/aurovd/pen/XWPBwZz
Новые единицы измерения.
cq - это сокращение от английского "query container". Далее идут указатели относительно чего идет отсчет измерения.
Один сqw/сqh равен одному проценту от контейнера. По умолчанию, контейнером является элемент body. Так в примере выше, 10% темного блока определяются по умолчанию размерами элемента body, а не размерами родительского блока.
Container-type.
- size
- inline-size
- normal
- inherit
- initial
inline-size затрагивает не все пространства, работая только по горизонтали. Это видно на примере выше, где ширина темного блока адаптировалась по ширине родительского контейнера. Его высота же осталась зависимой от высоты элемента body.
size позволяет адаптироваться к родительскому контейнеру относительного его высоты и ширины.
Размер сqw/сqh зависит от того какой тип контейнера указан в стилях.
Размеры с cqmax/cqmin
cqmax - это наименьшее значение cqi или cqb.
cqmin - это наибольшее значение cqi или cqb.
В примере выше видно, что ширина темного контейнера берется от ширины контейнера, так как она максимальна. В то время как, высота темного контейнера берется от ширины контейнера, так как она меньше чем его ширина.
Типографика с cqi/cqb
cqi - это 1% от inline-size контейнера.
cqb - это 1% от size контейнера.
В зависимости от ширины или длины контейнера можно указать свои стили.
В примере выше, размер шрифта зависит от размера контейнера. В зависимости от значения свойства меняется способ подсчета. Для заголовка подсчет происходит по размеру контейнера, а для параграфа по его ширине. Поэтому, если изменять ширину экрана, изменяется размер параграфа, а если высоту, то заголовка. Ссылка на пример: https://codepen.io/aurovd/pen/XWPBwZz
Отзывчивый шрифт с calc()
В зависимости от размера экрана или при желании контейнера, с помощью функции calc() высчитывается размер шрифта. Ссылка на пример: https://codepen.io/aurovd/pen/XWPBwZz