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

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

Конечно же, вам не обязательно проверять ваш код (но рекомендовано) на предмет соответствия установленным стандартам. Вместо того, чтобы пропускать ваш проект через многие валидаторы, вы можете воспользоваться абсолютно новым инструментом диагностики под названием 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
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: верстка сайта, CSS
Опубликовал Design FactoRy   Прочитано (раз): 9401   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031