Линтинг HTML с помощью CSS


Данный материал является вольным переводом статьи:
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

Неправильная кодировка


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"] { ... }

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