Данный материал является вольным переводом статьи:
Ire Aderinokun Linting HTML using CSS
Когда HTML написан не правильно, то ничего особенного не происходит. Однако, в таком случае на сайте могут появиться блоки, которые не семантичны или недоступны для пользователя.
Существует множество способов проверки HTML для обнаружения и устранения проблем. К примеру, можно воспользоваться валидатором W3C. Но есть еще одна вещь которую мы с легкостью можем интегрировать в процесс разработки — использовать некоторые усовершенствованные CSS селекторы для выделения потенциально проблемных областей. Ниже мы рассмотрим несколько примеров, которые помогут нам в этом.
##Встроенные стили
*[style] {
border: 5px solid red; /* Стиль для выделения элементов */
}
Этот селектор применится к элементам страницы, в которых используются встроенные (инлайновые) стили. Их использования стоит избегать, так как инлайновые стили трудно переопределить из-за повышенного уровня специфичности. Хотя есть случаи, когда встроенные стили необходимы, но они тоже будут выделены нашим селектором. Поэтому решение о необходимости использования инлайновых стилей принимается в каждом конкретном случае.
Выбрав проблемные элементы, мы можем применить к ним оформление, чтобы сделать их заметными на странице, например, добавить красную рамку.
##Неисправные или отсутствующие ссылки
a:not([href])
a[href="#"],
a[href=""],
a[href*="javascript:void(0)"] { … }
Эти селекторы выделяют ссылки, которые либо не содержат атрибута href, либо он не несет смысла.
##Недоступные изображения
img:not([alt]) { ... }
Как правило, изображения должны иметь атрибут alt. Когда же он отсутствует, большинство скринридеров считывает вместо него значение атрибута src, которое бесполезно для пользователя и может ввести его в заблуждение.
Описанный селектор не будет выбирать изображения с пустым атрибутом, т.е.изображения с alt="". Это связано с тем, что пустой атрибут alt может быть преднамеренным способом пропустить считывание скринридером, что полезно, например, если изображение используется в декоративных целях. Тем не менее было бы полезно, если бы такие теги выделялись. Сделать это мы можем следующим селектором —
img[alt=""] { ... }##Отсутствие языка документа
html:not([lang]),
html[lang=""] { ... }
Важным атрибутом, который должен присутствовать во всех элементах html является атрибут языка. Этот атрибут помогает определить скринридерам язык страницы.
Вот пример того, что произойдет, если будет отсутствовать атрибут lang
Share @HTeuMeuLeu's video to show why setting a default language (eg. lang="en") is important. 😂 https://t.co/tjn8GvPVKM
— overflow: heydon (@heydonworks) 23 февраля 2017 г.
##Неправильная кодировка
meta[charset]:not([charset="UTF-8"]) { ... }
Этот селектор предназначен для мета-тега, кодировка которого установлена не в UTF-8. Этот тег говорит браузеру о том, что нужно использовать кодировку UTF-8, которая в настоящее время является рекомендуемой для html документов.
Использование этого тега необходимо для валидного html.
В идеале, этот тег должен идти первым, после открывающего <head>. Мы можем проверить это, используя следующий селектор —
meta[charset="UTF-8"]:not(:first-child) { ... }
##Недопустимые атрибуты Viewport
meta[name="viewport"][content*="user-scalable=no"],
meta[name="viewport"][content*="maximum-scale"],
meta[name="viewport"][content*="minimum-scale"] { ... }
Этот селектор необходимо использовать для выделения недопустимых значений viewport. Как правило, рекомендуется избегать ограничения возможности пользователю манипулировать областью просмотра, масштабируя ее. Таким образом выражения user-scalable=no , maximum-scale или minimum-scale никогда не должны использоваться.
##Немаркированные элементы формы
input:not([id]),
select:not([id]),
textarea:not([id]) { ... }
label:not([for]) { ... }
Элементы формы, пожалуй, являются самыми важными тегами, когда дело доходит до маркировки. Хотя и существует несколько способов маркировки, наиболее распространенным способом является использование id, на который ссылается label. Данный селектор проверяет элементы форм, которые не имеют id и элементы label, которые не связаны явно с элементом формы при помощи атрибута for.
Другой тип маркировки, который важен для элементов формы — это атрибут name. Хотя атрибут id используется для маркировки элемента в контексте документа. Атрибут name используется в качестве ссылки на элемент при отправке данных формой.
input:not([name]),
select:not([name]),
textarea:not([name]) { ... }
Кроме того, помимо самих элементов формы, полезно присваивать тегу формы имя и/или идентификатор.
`form:not([name]):not([id]) { ...` }
Этот селектор выделяет теги form, у которых отсутствуют оба атрибута — name и id.
##Пустые интерактивные элементы
button:empty,
a:empty { ... }
Интерактивные элементы, такие как ссылки или кнопки, обычно размечаются их контентом. Хотя эти элементы можно размечать с помощью других методов, таких как атрибут aria-label, ситуация, когда теги не содержат контента, скорее всего признак чего-то неправильного. Этот селектор выделяет любые ссылки и кнопки без содержимого.
##Необязательные или устаревшие атрибуты
script[type="text/javascript"],
link[rel="stylesheet"][type="text/css"] { ... }
Наконец, мы можем использовать селектор, чтобы выделить элементы с атрибутами которые устарели или не являются обязательными.