Главная > Инструменты > Необычный инструмент проверки кода: Holmes валидирует HTML-код, используя при этом CSS

Необычный инструмент проверки кода: Holmes валидирует HTML-код, используя при этом CSS


18 апреля 2013, 12:20. Разместил: Design FactoRy
Конечно же, вам не обязательно проверять ваш код (но рекомендовано) на предмет соответствия установленным стандартам. Вместо того, чтобы пропускать ваш проект через многие валидаторы, вы можете воспользоваться абсолютно новым инструментом диагностики под названием Holmes. Holmes представляет собой инструмент, который использует CSS для проверки HTML-кода на соответствие стандартам. Давайте рассмотрим, как он работает…

Необычный инструмент проверки кода: Holmes валидирует HTML-код, используя при этом CSS

Holmes: встройте CSS, и проверьте сайт

Чтобы воспользоваться Holmes, вам нужно встроить таблицы стилей в головную секцию вашего HTML-кода. Затем мы привязываем класс holmes-debug к телу документа. В процессе ренденринга, Holmes красным цветом выделяет все проблемные места кода, будь то пропущенный Alt-атрибут для изображения или настоящие ошибки в коде.

Если Holmes обнаруживает фрагменты, где существуют более принятые и удобные вариации кода (например, когда в конце атрибута A следует убрать #), Holmes ставит выделение желтым цветом. Кроме того, Holmes также окрашивает в серый цвет все устаревшие элементы вроде center или font.

Holmes: учимся использовать…

Holmes не основан на каком-либо языке программирования или логике. Вместо этого, здесь используются различные селекторы CSS, которые выделяют элементы в зависимости от критерия ошибки. Пропущенный alt-тег у изображений определяется и представляется следующим образом:

.holmes-debug img:not([alt]) {
outline: 2px solid red;
}

А таким образом обнаруживается хэштег в ссылке:

.holmes-debug a[href="#"] {
outline: 2px solid #fd0;
}

Так как в Holmes используются некоторые новые CSS-свойства – вроде псевдо-класса :not(), – он вряд ли будет нормально работать во всех браузерах. Нам довелось успешно протестировать инструмент в Chrome, Firefox, Opera и Safari, и даже, не поверите, в Internet Explorer 10.

Завершение

Holmes нельзя назвать более способным инструментом, нежели другие, но он работает немного по-другому. Он показывает ошибки прямо на странице, и от этого нам легче понять, что именно нужно исправить. Holmes обязательно покажется вам удобным, особенно если вам нужно справиться с сайтом, разработкой которого вы не занимались, и при этом вам известно, что он существует уже пару лет. Инструмент бесплатный, так что обязательно опробуйте его…

Ссылки

* Holmes - инструмент валидации кода на CSS
Вернуться назад