Советы по CSS для избежания плохого UX
Я считаю, что CSS - это мощный инструмент для создания идеального UX. Я здесь, чтобы поделиться своими советами по устранению досадных ошибок.
Пожалуйста, перестаньте использовать resize: none
Раньше мы использовали resize: none, чтобы отключить изменение размера текстовой области. В итоге получалось, что текстовые области становились ужасно неудобными для ввода данных.
Вертикальное значение и ограничение на высоту делают то же самое, но без дискомфорта.
Неправильный код
.textarea {
resize: none;
}Корректный код
.textarea {
resize: vertical;
min-height: 5rem;
max-height: 15rem;
}Оставьте свойство content пустым, чтобы избежать неожиданного звучания
Обратите внимание, что программы чтения с экрана озвучивают текст, заданный с помощью свойства content. Это может привести к неожиданному озвучиванию. Именно поэтому не стоит использовать CSS для добавления текста на веб-страницу.
Неправильный код
.parent::before {
content: "I am text";
}Корректный код
.parent::before {
content: "";
}aspect-ratio - это прыжок со страницы на страницу
Перескакивание страниц после загрузки изображений - это боль. Избежать этого помогает соотношение сторон. Например, если картинка имеет размер 600x400px, мы должны установить aspect-ration: 1,5 (600px / 400xp = 1,5).
Неправильный код
img {
display: block;
max-width: 100%;
}Корректный код
img {
display: block;
max-width: 100%;
aspect-ratio: 1.5;
}Анимация без prefers-reduced-motion может привести к головной боли
Анимация движения может вызвать головокружение у пользователей с нарушениями вестибулярного аппарата.
Поэтому мы должны обернуть ее в prefers-reduced-motion, чтобы избежать проблем, если пользователи отключат анимацию в настройках ОС.
Неправильный код
.example {
animation: zoomIn 1s;
}Корректный код
@media (prefers-reduced-motion: no-preference) {
.example {
animation: zoomIn 1s;
}
}
