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

  • Автор темы Firewoll
  • Дата начала
  • Ответы 0
  • Просмотры 101

Firewoll

Просто, ваш повелитель😈
Местный

Firewoll

Просто, ваш повелитель😈
Местный

Использование атрибута 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="
Пожалуйста , Вход или Регистрация чтобы увидеть ссылку!
" class="social">
<img class="social__icon" src="twitter.svg" alt>
<span class="social__name">Twitter</span>
</a>

Но иконка социальной сети — это декоративная иконка, которая помогает пользователям быстрее понять смысл элемента, не читая текст. Если мы удаляем значок, мы не теряем значение элемента, поэтому мы можем использовать для него свойство background-image.
<a href="
Пожалуйста , Вход или Регистрация чтобы увидеть ссылку!
" 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;
}
 
Сверху Снизу