Тестирование HTML с помощью CSS

Тестирование HTML с помощью CSS может быть полезным способом проверки структуры HTML! С помощью CSS-селекторов вы можете выявить различные проблемы или особенности в разметке. Вот несколько идей для тестирования:

1. Проверка структуры HTML

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

Пример: Найти элементы <a> без текста или пустым href

a:empty,
a[href=""] {
    outline: 2px solid red;
}

2. Обнаружение элементов без alt или aria-label

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

Пример: Найти <img> без alt

img:not([alt]) {
    outline: 2px solid orange;
}

3. Проверка уникальности идентификаторов

Выявить повторяющиеся id невозможно полностью через CSS, но с помощью селекторов вроде [id^="name"] можно хотя бы выделить подозрительные элементы.

Пример: Найти элементы с id, начинающимся на name

[id^="name"] {
    background: yellow;
}

4. Выявление неиспользуемых классов

Если вы стилизуете элементы, но в проекте их не должно быть, можно подсветить такие элементы через CSS.

Пример: Найти элементы с классом deprecated

.deprecated {
    outline: 3px dashed magenta;
    opacity: 0.5;
}

5. Поиск элементов без родительских контейнеров

Если элементы должны быть вложены в определённый контейнер, а они вне его, их тоже можно выделить.

Пример: Найти <li> вне <ul> или <ol>

li:not(ul li):not(ol li) {
    outline: 2px dotted red;
}

6. Проверка иерархии заголовков

Если важна правильная структура заголовков (h1, h2 и так далее), можно найти пропуски.

Пример: Найти <h3> без родительского <h2>

h3:not(h2 ~ h3) {
    outline: 2px solid green;
}

Итог

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