Инструменты, предоставляемые CSS, постоянно развиваются, появляется много новых фич, но главной проблемой использования новинок остается поддержка браузерами. Иногда приходится ждать по несколько лет прежде, чем то или иное обновление получит достаточную поддержку, и его можно будет использовать.
Lvh (large viewport height) задает размеры по самому большому размеру viewport, когда панель навигации скрыта.
И наконец Dvh (Dynamic viewport height) динамически меняет значение высоты относительно того, открыта панель с навигацией или нет.
Эти единицы измерения можно использовать прямо сейчас, согласно сайту can i use, они поддерживаются во всех современных браузерах.
Чтобы этого добиться для контейнера карточки (.card) нужно определить свойство container-type в значении inline-size. Теперь можно задавать стили непосредственно для дочерних элементов. Пока карточка больше 400px, к ней будут добавляться свойство display flex.
.card {
container-type: inline-size;
}
@container (min-width: 400px) {
.card__container {
display: flex;
align-items: center;
}
}
Вот, что получилось.
Это лишь небольшой пример вариаций применения контейнерных запросов множество. Сейчас они получили широкую поддержку, и их уже можно использовать.
@media (max-width: 1000px) {
/* ... */
}
@media (min-width: 1000px) and (max-width: 1400px) {
/* ... */
}
С новым же можно сделать эту запись короче и понятнее для понимания.
@media (width <= 1000px) {
/* ... */
}
@media (1000px <= width <= 1400px) {
/* ... */
}
.element {
width: min(50vw, 500px);
}
.element {
width: min(10em, 30%, 30px);
}
И наконец clamp. Функция принимает 3 параметра и задает значение между верхней и нижней границей.
.element {
width: clamp(250px, 100% / 3, 900px);
}
До тех пор, пока элемент не будет меньше 250px и не больше 900px, его ширина будет рассчитываться по формуле 100% / 3.
Мы рассмотрели 5 новых фич CSS, которые помогут в адаптивной верстке. Если вам было полезно, то подписывайтесь, я буду делиться нововведениями в CSS, доступных для применения уже сегодня.