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

Привет! Представляю вашему вниманию перевод статьи «The 6 most common mistakes developers when writing HTML and CSS ^[1]» автора 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;
}

Автор: Stanisurav

Источник ^[2]