How to practice html css

6 хороших практик по HTML и CSS

Можно легко найти хорошие практики по любой технологии, но, к сожалению, по HTML и CSS это сделать не так просто. Недолго думая, я написал свой список из 6 кейсов, когда вы можете сделать удобный или не удобный интерфейс для пользователя только через HTML и CSS.

Текст в атрибуте alt это не дублирование заголовка

Атрибут alt очень полезен, потому что с помощью него пользователи скринридеров могут понять, что изображено на картинке. К сожалению, многие разработчики используют не оптимально. Они либо дублируют текст вокруг картинки, либо совсем его не добавляют.

Но мы можем использовать alt по другому, а именно на основе текста из заголовка добавить дополнить его, добавив больше деталей о изображении. Например, если у нас карточка товара, в которой заголовок-название товара и изображение, то в alt можно описать внешние характеристики товара.

Не делайте так

 
adidas Originals Superstar
 

Можно сделать так

 
adidas Originals Superstar
 

Не весь текст это заголовок

Заголовки важная часть HTML, которая помогает пользователям в навигации. Особенно, пользователям скринридеров, которые используют список заголовков для быстрой навигации по странице.

Поэтому нам следует уделять особое внимание заголовком. Сейчас существует практика использование элементов h1 — h6 везде. Как результат, скринридеры отображают кашу из заголовков, и людям требуется больше времени, чтобы разобрать это.

Например, мы можем избегать этого, если подумаем насколько нам действительно нужны элементы h1 — h6 для разметки заголовка и подзаголовка. Возможно, вместо двух элементов, например h2 и h3 , мы можем использовать только один.

Не делайте так

iPad Pro
 
Supercharged by the Apple My chip.

Можно сделать так

 
iPad Pro Supercharged by the Apple My chip. 

button type=button лучше чем a href=»#»

Часто можно встретить ссылку с якорем, когда разработчики пытаются разметить интерактивный элемент. Они делают это, думая, что если отменить дефолтное поведение ссылки с помощью JS, то они получат поведение кнопки.

Да, на первый взгляд это так. Но есть проблема. Бразуеры по-прежнему думают, что это ссылка. Если вы откроете контекстное меню на таком элементе, с помощью правой кнопки мыши, то увидите опции: «Открыть в новой вкладке», «Открыть в новом окне» и «Открыть в приватном окне».

Когда пользователи видят такие пункты, они думают, что это ссылка и могут открыть ее, например, в новой вкладке. Когда они это делают, то получает неожиданный результат, а именно они увидят верх страницы. Поэтому лучше использовать элемент button . Вы получаете интерактивный элемент и не запутаете пользователя в случае вызова контекстного меню, потому что в нем не будет опций ссылки.

Не делайте так

Можно сделать так

justify-content: space-between приводит к неожиданному отображению разметки

Когда только появился Flexbox многие были воодушевлены свойством justify-content, которое позволяет просто расположить равномерно элементы сетки с помощью значений space-between или space-around. И конечно многие стали пользоваться этим. Но есть проблема.

Когда мы используем эти значения, то не задумываемся, что количество элементов может измениться. Например, если я добавлю еще 2 элемента в сетку из 4 колонок, то они будут отображаться по бокам родителя, в случае space-between, а не в начале строки, как ожидает пользователь.

Поэтому в этой ситуации лучше использовать margin , если нужна поддержка IE11, или column-gap для установки расстояние между элементами.

Не делайте так

Можно сделать так

justify-content и align-items теряют элементы

При решении задач по позиционированию элементов мы часто используем свойства justify-content и align-items . Я не спорю, что это удобный и простой способ позиционирования. Но есть проблема, которая особенно часто встречается при вертикальном позиционировании.

Это связано с особенностями работы свойств, а именно свойства justify-content и align-items не учитывают размеры flex-элементов. Соответственно в случае когда размеры flex-элементов больше размеров flex-контейнера, то flex-элементы будут выходить за его пределы, и могут отображаться некорректно.

Например, я часто вижу модальное окно, у которого кнопка-крестик вышла за пределы окна и не доступна. Приходит уменьшать масштаб страницы, чтобы его закрыть.

Эту проблему можно решить с помощью свойства margin со значением auto . Внутри flex-контейнера значение auto будет рассчитано с учетом размера самого контейнера и размеров flex-элементов. Если размеры flex-элементов меньше, чем размеры flex-контейнера, то браузер рассчитает отступ автоматически. А если больше, то элементы прижмутся к границам flex-контейнера.

Не делайте так

Можно сделать так

Позаботьтесь о пользователях, которые могут испытывать головокружение, тошноту и головные боли

Я думаю, что многим дизайнерам и разработчикам нравится создавать анимацию. Да, интерфейсы в этих случаях выглядят более интересными. Но мы должны быть более осторожны.

В WCAG 2.2. есть раздел 2.3.3., в котором описывается, что некоторые пользователи могут испытывать головокружение, тошноту и головные боли, когда видят анимацию, которая запускает движение элементов.

Таким образом, если мы создаем анимацию такого типа, нам следует использовать медиа-функцию prefers-reduced-motion . В этом случае, если люди отключили анимацию в операционной системе, то она не будет отображаться, а если они этого не сделали, анимация будет работать. И мы позаботимся о наших пользователях.

Не делайте так

Можно сделать так

@media (prefers-reduced-motion: no-preference) < .example < animation-name: zoomInDown; animation-duration: 1s; animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-delay 0.3s; animation-fill-mode: both; >>

P.S. У меня есть почтовая рассылка с CSS советами. Я буду рад, если вы присоединитесь. Ссылка указана в разделе «О себе» в моем профиле.

Почитать еще

Источник