6 самых распространённых ошибок разработчиков при написании HTML и CSS

Привет, Хабр! Представляю вашему вниманию перевод статьи «The 6 most common mistakes developers when writing HTML and CSS» автора Stas Melnikov.

Использование атрибута placeholder вместо элемента label

Часто разработчики используют атрибут placeholder вместо элемента label. Но в этом случае пользователи скринридера (программы чтения с экрана) не могут заполнять поля, потому что скринридер не может прочитать текст из атрибута placeholder.

<input type="email" placeholder="Enter your email">

Поэтому я рекомендую использовать элемент label для поля имени и атрибут placeholder для примера данных, которые пользователь должен заполнить.

<label>   <span>Enter your email</span>   <input type="email" placeholder="e.g. example@gmail.com"> </label>

Использование элемента img для разметки декоративной графики

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

<a href="https://twitter.com" class="social">   <img class="social__icon" src="twitter.svg" alt>   <span class="social__name">Twitter</span> </a>

Но иконка социальной сети — это декоративная иконка, которая помогает пользователям быстрее понять смысл элемента, не читая текст. Если мы удаляем значок, мы не теряем значение элемента, поэтому мы можем использовать для него свойство background-image.

<a href="https://twitter.com" class="social">   <span class="social__name">Twitter</span> </a>

.social::before {   background-image: url("twitter.svg"); }

Использование свойства resize

При отключении изменения размера текстовой области с помощью свойства resize доступность ухудшается. Таким образом, пользователь не может ввести данные удобным для себя способом.

textarea {   width: 100%;   height: 200px;   resize: none; }

Вы можете использовать свойства min-width, max-width, min-height и max-height, которые ограничивают размеры элемента, и пользователь может заполнять поля удобным для себя способом.

textarea {   min-width: 100%;   max-width: 100%;   min-height: 200px;   max-height: 400px; }

Использование display: block и position: absolute (fixed) вместе.

Я часто вижу, как разработчики используют свойства display и position следующим образом:

.button::before {   content: "";   display: block;   position: absolute;   top: 0;   left: 0; }

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

.button::before {   content: "";   position: absolute;   top: 0;   left: 0; }

Нет значения для свойства структуры

Я не могу работать с веб-сайтом, используя клавиатуру. Я не могу перейти по ссылке. Я не могу зарегистрироваться. Это происходит потому, что разработчики отключают фокус на элементах, когда они добавляют значение none для свойства outline.

.button:focus {   outline: none; }  /* or */  .button:focus {   outline: 0; }

Если вам нужно отключить фокусировку по умолчанию, не забудьте сделать состояние альтернативной фокусировки.

.button:focus {   outline: none;   box-shadow: 0 0 3px 0 blue; }

Пустые элементы

Часто разработчики используют пустые элементы HTML для оформления элементов. Например, разметка меню-гамбургера с использованием пустых элементов div или span:

<button class="hamburger">   <span></span>   <span></span>   <span></span> </button>

.hamburger {   width: 60px;   height: 45px;   position: relative; }  .hamburger span {   width: 100%;   height: 9px;    background-color: #d3531a;   border-radius: 9px;    position: absolute;   left: 0; }  .hamburger span:nth-child(1) {   top: 0; }  .hamburger span:nth-child(2) {   top: 18px; }  .hamburger span:nth-child(3) {   top: 36px; }

Но вы можете использовать псевдо-элементы :: before и :: after и достичь аналогичных результатов.

<button class="hamburger">   <span class="hamburger__text">     <span class="visually-hidden">Open menu</span>   </span> </button>

.hamburger {   width: 60px;   height: 45px;   position: relative; }  .hamburger::before, .hamburger::after, .hamburger__text::before {   content: "";   width: 100%;   height: 9px;    background-color: #d3531a;   border-radius: 9px;    position: absolute;   left: 0; }  .hamburger::before {   top: 0; }  .hamburger::after {   top: 18px; }  .hamburger__text::before {   top: 36px; }  .visually-hidden {   position: absolute !important;   clip: rect(1px, 1px, 1px, 1px);   width: 1px !important;    height: 1px !important;    overflow: hidden; }