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

Скрипты и советы | 11 декабря 2019

Уроки CSS на Хабрахабре, habrahabr.ru, CSS

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

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


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

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

Enter your email

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


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



Но иконка социальной сети — это декоративная иконка, которая помогает пользователям быстрее понять смысл элемента, не читая текст. Если мы удаляем значок, мы не теряем значение элемента, поэтому мы можем использовать для него свойство background-image.
Читать дальше →
[Из песочницы] Font (ещё более) Awesome — узорное изобретение

Привет, Хабр! Представляю вашему вниманию перевод статьи "Font (More) Awesome — an iconic invention" автора Pubudu...

Подробнее
Изоляция css стилей с помощью компонентного подхода

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

Подробнее
[Из песочницы] Новичку only: 10 вещей, которые вы должны знать как веб-разработчик

Привет, Хабр! Представляю вашему вниманию перевод статьи «10 Things You Should Know As a Web Developer» автора...

Подробнее
Хак сортировка новостей по цифровому коду

Хак предназначен для версии DLE 10.3 Добавляет возможность ручной установки "рейтинга" для новостей (в диапазоне от 1...

Подробнее
[Из песочницы] Градиентные границы в CSS

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

Подробнее
Canvas & SVG: работаем с графикой

В HTML5 представлено два элемента для работы с web графикой: Canvas и SVG. Две эти технологии достаточно сильно...

Подробнее

Написать комментарий

  • Смайлы и люди
    Животные и природа
    Еда и напитки
    Активность
    Путешествия и места
    Предметы
    Символы
    Флаги