
Отлов пустых элементов на сайте 👻
Пустые элементы в разметке плохо сказываются на доступности сайта. Их нужно наполнять контентом или удалять.
Пустые элементы — это плохо
В разметке не должно быть пустых элементов.
Чаще всего пустые элементы выполняют чисто декоративную функцию. Например, при помощи пустого тега <i>
добавлять иконку неправильно:
<button><i class="icon"></i> submit </button>
Когда-то давно такое написание можно было оправдать, сегодня — нет.
Правильно вставить иконку в псевдоэлемент, .icon:before
, сократив вид записи:
<button class="icon"> submit </button>
Ещё остаются без контента пустые ссылки, стилизованные под кнопки.
Плохо
<a href=“fb.com”></a>
Хорошо
<a href=“fb.com”>facebook</a>
Если текст не нужен по дизайну, он всё равно должен присутствовать в разметке и его придётся скрыть средствами CSS. Это понятие доступности.
В правительстве США создан специальный сайт о доступности веб-интерфейсов. Рекомендую почитать.
Отлов пустых элементов
Чтобы отлавливать пустые элементы на этапе вёрстки, достаточно использовать небольшой фрагмент CSS
:empty:not(img):not(input) { visibility: hidden; opacity: .5; outline: 4px solid #4ce00e; }
Пустой элемент станет невидимым, как и в случае использования display: none
, но соседние элементы не будут смещаться. Тем более, элементам часто переназначается дисплей и тогда код не сработает.
На случай, если элементу задан visibility: visible
, пустой элемент станет полупрозрачным и с зелёным ободом, прям как приведение.
Не забудьте удалить фрагмент CSS после отладки.