Линтинг 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"] { ... }

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