Собрала несколько реально нужных свойств (и значений), которые и меня часто выручают. Но эти свойства многие почему-то забывают в процессе.
Разберем подробнее:
1. aspect-ratio
Свойство задает фиксированное соотношение сторон блоку/картинке (4:3, 16:9, квадрат, вертикальное видео и т.п.). Например:
.box {
aspect-ratio: 16 / 9;
}
Must have, когда нужно задать размер условному видео - на адаптиве будет выглядеть отлично и никаких танцев с бубном с width, height и прочим.
2. object-fit
Свойство используется для картинок. Когда нужно, чтобы одна картинка заняла всю область ее родительского контейнера и при этом не "жмыхнулась" и не "расплющилась".
img {
width: 100%;
height: 100%;
object-fit: cover;
}
Картинка просто растягивается на всю высоту и ширину с сохранением соотношения сторон.
Если нужно вписать картинку без обрезания, есть:
img {
object-fit: contain;
}
А ещё есть object-position, если надо сместить картинку.
3. clamp()
Вместо бесконечных медиа-запросов прописываем просто:
.text {
font-size: clamp(1rem, 2vw, 2rem);
}
Размер текста будет меняться плавно между значениями. Работает не только со шрифтами: марджины, паддинги - всё можно заclamпить)
4. scroll-margin-top
Если у сайта есть фиксированная шапка, при переходе по якорю текст обычно уезжает под неё. Так вот это свойство добавляет отступ, равный высоте шапки при переходе по якорю.
.text {
scroll-margin-top: 80px;
}
Теперь заголовки прокручиваются ровно так, как нужно - без лишнего JS!
5. min(), max()
Блок останется адаптивным, но не растянется больше нужного. Например, чтобы ширина не превышала границ:
.box {
width: min(90%, 600px);
}
В этом примере блок будет занимать до 90% ширины родителя, но не превысит 600px.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Для меня, например, недавним открытием было первое свойство - aspect-ratio, когда нужно было задать соотношение сторон для видео. И это обалдеть как пригодилось - ни единого медиа-запроса, а блок встал идеально
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
👌😄 Хочешь круто верстать сайты/страницы и узнавать о новинках в верстке? Тогда приглашаю подписаться на мой ТГ канал! Рассказываю на своем опыте и делюсь полезными инструкциями! : )