Узнайте, как писать защитный CSS
При создании веб-сайтов во многих случаях мы хотим убедиться, что компонент дизайна будет работать в различных условиях. Мышление «на всякий случай» направлено на то, чтобы научить дизайнеров и разработчиков заранее продумывать некоторые возможные сценарии отказа компонента. Я назвал это на всякий случай, потому что это буквально то, что это значит. На всякий случай, если название стало длиннее, сделайте это. На всякий случай, если рядом с этим элементом есть брат или сестра, сделайте это. Все дело в учете некоторых крайних случаев.
В этой статье я расскажу о некоторых распространенных случаях использования дизайна и о том, как с ними справиться на тот случай, если контент станет длиннее или отличается от ожидаемого 🤷. Вас ждет угощение, давайте погрузимся!
Изучение мышления «на всякий случай»
Вся концепция «На всякий случай» сводится к учету неизвестного. Следование этому мышлению, по крайней мере, уменьшит количество проблем, с которыми вы можете столкнуться. Разница между плохим и хорошим вариантом использования может заключаться в одной строке CSS. В следующих примерах я покажу, как можно легко реализовать такие хорошие практики.
Случаи применения:
Название и значок (Title and Icon)
Для этого компонента заголовок может состоять из одного слова или из нескольких. Чтобы заголовок не прилипал к иконке справа, лучше добавить margin-right: 1rem на тот случай, если заголовок станет длиннее.
Кнопки (Buttons)
Бывают случаи, когда вам нужно иметь две кнопки рядом. Как мы можем объяснить этот случай, не добавляя поле к кнопке по умолчанию?
Благодаря комбинатору смежных братьев и сестер это легко сделать. Он говорит: «Если кнопка находится рядом с другой кнопкой, добавьте ко второй левой margin, на всякий случай».
.button + .button {
margin-left: 1rem;
}
Тег категории (Category Tag)
Для компонента карты вам может понадобиться тег категории. Как вы будете обрабатывать различные варианты контента? Рассмотрим следующий рисунок.
Правая карточка имеет длинный заголовок, и это выглядит не очень хорошо, так как он закрывает большую часть миниатюры. Для сайтов о еде изображения очень важны.
Вот несколько возможных решений на случай, если метка тега станет длиннее.
Первое решение — использование техники усечения текста с кодом max-width в CSS. Второй использует только max-width, но он может дать сбой, если тег имеет очень длинный текст.
.tag {
max-width: 6.25rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Прокручиваемый элемент (Scrollable Element)
Когда вам нужно сделать элемент прокручиваемым, может возникнуть соблазн сделать следующее:
.element {
height: 20rem;
overflow-y: scroll;
}
Проблема с этим подходом заключается в том, что он всегда будет отображать полосу прокрутки, даже если содержимое недостаточно длинное для прокрутки. Лучше использовать ключевое слово auto. Таким образом, он может передать концепцию «на всякий случай».
.element {
height: 20rem;
overflow-y: auto;
}
Резервное изображение HTML (HTML Image Fallback)
В случаях, когда вы используете img в качестве фона для главного раздела, по какой-то причине он может не загрузиться. В таком случае, что, если был запасной вариант?
img {
background-color: #525252;
}
На случай, если изображение не загрузится, фоновый цвет будет работать как запасной вариант.
Изображение аватара (Avatar Image)
Это очень распространенный вариант использования, когда аватар может выглядеть растянутым или сжатым.
Этого можно избежать, используя object-fit: cover. Она будет выступать в качестве штучки на всякий случай. Без него изображение будет выглядеть плохо.
Заключение
Как вы только что видели, все примеры относятся к конкретным случаям использования, когда контент выходит за рамки ожидаемого. Не забудьте включить в свою работу мышление на всякий случай.
Успехов вам в веб-дизайне 🎉
Ссылка на автора - twitter.com/shadeed9
