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