Комментарии 12
Важно, чтобы элементы выглядели однотипно. Для этого мы должны запретить перенос слов, и обрезать часть слов, если они выходят за ширину элемента.
Кому важно? Пользователю важно, чтобы он мог прочитать текст полностью, а не два с половиной слова.
Чтобы изображение не искажалось. мы используем object-fit: cover
В результате, загружает пользователь вертикальное фото, а у сверху треть обрезана и снизу треть. А через замочную скважину не разобрать что же изображено на картинке. Зато дизайнер счастлив.
Мы можем заранее избежать этого добавив резервное значение в конструкцию var()
Потом это резервное значение разъедется с актуальным дизайном и разработчик будет счастлив прошерстить все стили в проекте, чтобы поменять резервные значения. Просто пропишите эти значения для :root
и всё.
При overflow-y: auto полоса прокрутки будет видна только в том случае, если содержимое длинное. Иначе её там не будет
А при динамическом изменениии высоты контента или контейнера будет прыгать туда-сюда и ширина контента. Лучше тогда уж overflow: overlay
.
Лучше тогда уж
overflow: overlay
https://caniuse.com/css-overflow-overlay - несомненно лучше, ага.
Кому важно? Пользователю важно, чтобы он мог прочитать текст полностью, а не два с половиной слова.
Да, но это правило работает только на больших текстах. Если это в мессенджере, то тут стоит обрезать имя пользователя. Да даже в телефоне контакты обрезаются, если они слишком длинные.
А при динамическом изменениии высоты контента или контейнера будет прыгать туда-сюда и ширина контента. Лучше тогда уж
overflow: overlay
Подписываюсь под комментатором выше, поддержка этого свойства, на всех платформах, будет ещё нескоро
Полезно. Очень часто замечаю, что разработчики даже не задумываются над тем, что будет, если просто поменять количество текста в блоке.
"img { object-fit: cover; } "
это невероятно плохо работает когда каринки заметно вытянуты по вертикали и ужи чем ожидалось
"Не забудьте установить max-width: 100%
для всех изображений, "
а по умолчанию как это работает ?
Спасибо вам большое, очень помогло.
Красиво конечно, когда изображение с помощью object-fit: cover вписывается в определённую область. Но в статье столько сказано про универсальность решений, а тут провал. Дело в том, что всегда будут картинки разной ориентации. И в одном случае изображения будут обрезаться по бокам, а в другом сверху и снизу. В первую очередь нужно исходить от того, какой контент предполагается в данном месте. Например, если это карточки с фотографиями людей, то можно попробовать object-position: top (или процентное значение), чтобы головы не обрезались на вертикальных фотках. Если же на сайте предполагается, что будут и вертикальные и горизонтальные картинки, тогда лучше придумать решение с object-fit: contain и каким-либо фоном карточки.
Спасибо, когда заходил по ссылке думал что будет очередная статья о выравнивании дива по вертикали, но меня очень порадовали свойства overscroll-behavior и scrollbar-gutter, единственное замечание - я бы добавил в статью ссылки на поддержку этих свойств( к сожалению пока не везде это работает хорошо). Верстаю давно и ранее такие моменты обходил с помощью хаков, теперь будет для нормальных браузеров стандартные решения.
Безопасный CSS, или как писать универсальные стили