Линтинг HTML за допомогою CSS

17

Від автора: якщо в HTML є помилки, на екрані ви цього не помітите. Тому вони досить легко входять у код, можуть проскакувати несемантические і недоступні елементи, і це можна помітити відразу. Линтить HTML і виправляти помилки можна різними способами. Наприклад, з допомогою W3C Markup Validation Service. Інший спосіб – використовувати просунуті селектори для підсвічування потенційних областей з помилками. Такий спосіб набагато легше інтегрувати в процес розробки. Нижче представлені кілька способів, як з допомогою CSS селекторів можна линтить розмітку.

Инлайновые стилі

*[style] {
border: 5px solid red; /* Робимо елементи помітними */
}

Цей селектор знайде всі елементи на сторінці, до яких застосовані инлайновые стилі. Намагайтеся не вживати инлайновые стилі, їх складно переписувати з-за великої специфічності. Однак у деяких випадках инлайновые стилі потрібні. Цей селектор виділить їх, і ви зможете прийняти власне рішення (залишити або прибрати).

Після знаходження проблемних елементів їм можна присвоїти стилі, щоб зробити їх видимими на сторінці. Наприклад, можна додати велику червону рамку.

Биті посилання і посилання без атрибута href

a:not([href]),
a[href=»#»],
a[href=»»],
a[href*=»javascript:void(0)»] { … }

Ці селектори підсвічують всі якоря, у яких або взагалі немає атрибута href або в ньому вказано неправильну адресу.

Недоступні зображення

img:not([alt]) { … }

Запам’ятайте, у всіх зображень завжди повинен бути заповнений атрибут alt. Якщо атрибут відсутній, більшість скрін рідерів замість нього прочитати вголос атрибут src, що не несе ніякого смислового навантаження для користувача. Більш того, це може заплутати.

Селектор зверху не вибирає зображення з порожнім атрибутом alt, наприклад, зображення з 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) { … }

Недоступні атрибути вьюпорта

meta[name=»viewport»][content*=»user-scalable=no»],
meta[name=»viewport»][content*=»maximum-scale»],
meta[name=»viewport»][content*=»minimum-scale»] { … }

За допомогою цього селектора можна підсвічувати недоступні мета атрибути вьюпорта. Як правило, не рекомендується перешкоджати користувачеві маніпулювати розмірами вьюпорта. Тому 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 маркує елементи в контексті HTML-документа, а атрибут name використовується для відсилання до елементу при надсиланні даних форми.

input:not([name]),
select:not([name]),
textarea:not([name]) { … }

Крім елементів форми корисно задати name та/або id самому тега form.

form:not([name]):not([id]) { … }

Цей селектор підсвітить всі елементи form, у яких відсутні обидва атрибута name і id.

Порожні інтерактивні елементи

button:empty,
a:empty { … }

Інтерактивні елементи типу посилань і кнопок зазвичай позначаються контентом. Ці елементи можна маркувати та іншими способами, наприклад, через атрибут aria-label, але якщо вони порожні, значить, щось пішло не так. Цей селектор знайде всі посилання і кнопки без HTML-контенту всередині.

Необов’язкові і застарілі атрибути

script[type=»text/javascript»],
link[rel=»stylesheet»][type=»text/css»] { … }

І нарешті, з допомогою CSS селекторів можна підсвітити застарілі і необов’язкові атрибути HTML.