Не мучайте пользователей свойствами justify-content и align-items
Когда мы решаем задачи по позиционированию элементов, нам нравится использовать свойства justify-content и align-items. Но мало кто знает, что эти свойства могут провести к мукам пользователя. Особенно часто проблемы связаны с вертикальным позиционированием.
Это связано с особенностями работы свойств, а именно свойства justify-content и align-items не учитывают размеры flex-элементов. Соответственно в случае когда размеры flex-элементов больше размеров flex-контейнера, то flex-элементы будут выходить за его пределы, и могут отображаться некорректно.
Например, я часто не могу закрыть модальное окно, потому что кнопка-крестик вышла за пределы окна и не доступна. Вы можете увидеть этот эффект на изображении ниже.
Эта проблема легко решается с помощью свойства margin со значением auto. Внутри flex-контейнера значение auto будет рассчитано с учетом размера самого контейнера и размеров flex-элементов. Если размеры flex-элементов меньше, чем размеры flex-контейнера, то браузер рассчитает отступ автоматически. А если больше, то элементы прижмутся к границам flex-контейнера.
Не делайте так
<div class="modal"> <div class="modal__main"></div></div>
.modal { display: flex; justify-content: center; align-items: center;}
Можно делать так
<div class="modal"> <div class="modal__main"></div></div>
.modal { display: flex;}.modal__main { margin: auto;}

Не заставляйте пользователей ждать загрузки кастомных шрифтов
Сегодня мы часто используем кастомные шрифты, чтобы наши интерфейсы выглядели более уникальными. Из-за того, что в большинстве случаев такие шрифты не установлены в операционных системах, нам нужно загружать их. Но это занимается какое-то время и появляется проблема. А что нам показывать в этот момент?
По умолчанию браузер ждет пока шрифт загрузится, и поэтому блокирует отрисовку текста. Но мы можем повлиять на это и подсказать ему, что он может отобразить текст безопасным шрифтом.
Для это существует дескриптор font-display, который определяет то, как шрифт, подключённый через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.
У дескриптора есть значение swap, подсказывающее браузеру, что он может использовать безопасный шрифт, пока кастомный полностью не загрузится. А когда он будет загружен, то текстом будет отображен им.
Этим трюком вы поможете вашим пользователям быстрее начать взаимодействовать с интерфейсом, а не ждать отображения текста.
Не делайте так
@font-face { font-family: "Baloo Tamma"; src: url("balotamma.woff2") format("woff2"), url("balotamma.woff") format("woff");}
Можно делать так
@font-face { font-family: "Baloo Tamma"; src: url("balotamma.woff2") format("woff2"), url("balotamma.woff") format("woff"); font-display: swap;}

Не ломайте SVG иконками интерфейсы
Когда вы используете SVG иконки внутри HTML, обратите внимание, что вам нужно уставить атрибуты width и height. Если вы это не сделаете и установите ширину и высоту через CSS, то ваш интерфейс будет сломан.
В эпоху фреймворков CSS может сработать не сразу. Я не понимаю как это получилось, но я видел приложения на React, в которых cначала отображались огромные иконки, а только потом они принимали нужный размер. Поэтому просто установите размеры через атрибуты width и height, и ваши интерфейсы будут пуленепробиваемыми.
Не делайте так
<svg xmlns="http://personeltest.ru/away/www.w3.org/2000/svg" viewBox="0 0 448 512"> <path fill="currentColor" d="..."></path></svg>
svg { width: 0.875rem; height: 1rem;}
Можно делать так
<svg xmlns="http://personeltest.ru/away/www.w3.org/2000/svg" viewBox="0 0 448 512" width="0.875rem" height="1rem"> <path fill="currentColor" d="..."></path></svg>
Не заставляйте ждать пользователей загрузки тяжелых изображения на всех типах устройств
Когда пользователи посещают сайты, то они вынужденно сталкиваются со слишком тяжелыми изображениями. Если у них хороший интернет, это не проблема. Но часто они заходят на сайты там, где плохая связь. Например, в метро, на природе или в другой стране, где нестабильное качество сети. Поэтому я думаю, что наша задача, помочь им.
Существует хороший подход, согласно которому мы подсказываем браузеру какое изображение ему лучше загрузить в зависимости от типа экрана устройства. Для его реализации нам следует использовать элемент picture, который позволяет определить набор изображений для разных экранов, а браузер будет выбирать наиболее подходящее.
Например, мы может создать 2 source элемента и определить через медиа-запросы, какое изображение загружать на планшетах, а какое на десктопах. Кроме того, для отображения изображения на мобильных устройствах мы будем использовать элемент img.
Не делайте так
<img src="ferrari-1920x1080.jpg" alt="yellow ferrari F8 spider on the background of the ocean">
Можно делать так
<picture> <source srcset="ferrari-1200x960.jpg" media="(min-width: 641px) and (max-width: 1200px)"> <source srcset="ferrari-1920x1080.jpg" media="(min-width: 1201px)"> <img src="ferrari-640x480.jpg" alt="yellow ferrari F8 spider on the background of the ocean"></picture>
Также мы можем оптимизировать загрузку изображений для retina-экранов. Для этого мы будем использовать дескриптор плотности.
Например, если у смартфона плотность пикселя 2x, то браузер загрузит ferrari-640x480-2x.jpg, а если 1x, то ferrari-640x480-1x.jpg. Такой же механизм сработает для планшетов и десктопных экранов.
Не делайте так
<img src="ferrari-1920x1080.jpg" alt="yellow ferrari F8 spider on the background of the ocean">
Можно делать так
<img src="ferrari-1x.jpg" srcset="ferrari-2x.jpg 2x" alt="yellow ferrari F8 spider on the background of the ocean"><!-- или --><picture> <source srcset="ferrari-1200x960-1x.jpg, ferrari-1200x960-2x.jpg 2x" media="(min-width: 641px) and (max-width: 1200px)"> <source srcset="ferrari-1920x1080-1x.jpg, ferrari-1920x1080-2x.jpg 2x" media="(min-width: 1201px)"> <img src="ferrari-640x480-1x.jpg, ferrari-640x480-2x.jpg 2x" alt="yellow ferrari F8 spider on the background of the ocean"></picture>
P.S: Если у вас есть вопросы по CSS/HTML, то, не стесняйтесь, пишите мне на мою почту. Она указана в моем профиле на Хабре.