Как проверить валидность CSS |
ТОП 5 онлайн-валидаторов кода: HTML, CSS, XML, W3C
Валидатор — это онлайн-парсер, который сканирует веб-код страницы и проверяет на синтаксические, стилистические и другие ошибки, а также анализирует соответствие кода современным веб-стандартам (например, W3C). Часто, именно ошибки в коде приводят к разным проблемам сайтов, связанными с поисковой оптимизацией (ПС не могут просканировать и проиндексировать сайт), отображением в браузерах на разных устройствах. В данной статье я подобрал для вас наиболее удобные и эффективные онлайн валидаторы кода, которыми пользуюсь сам.
W3C HTML Validator
W3C — это Всемирный Консорциум Веб-паутины, определяет стандарты для всех веб-сайтов и веб-приложений. С помощью онлайн-валидаторов W3C можно проверить веб-код на ошибки.
Инструмент поможет:
Форк этого валидатора размещен в сервисах Site24x7. Кому интересно, может попробовать.
W3C CSS Validator
Бесплатный сервис проверки CSS-кода от W3C. Может проверить страницу по указанному URL, загруженному файлу или набранному коду. Поддерживает все версии CSS.
W3C RSS Validator
Бесплатный сервис для проверки синтаксиса RSS/ATOM ленты от W3C.
FIND-XSS. NET
Онлайн-сервис с базовым набором инструментов для проверки веб-страниц. Имеет достаточно простой и понятный в использовании интерфейс. Прекрасно подойдет для всех, кому в W3C валидаторах сложно разобраться.
Dr. Watson Validator
Неплохой, простенький инструмент, который помимо проверки синтаксиса HTML, дает еще такую информацию как: код ответа страницы, проверка количества слов в тексте, анализ ссылок, проверка совместимости с поисковыми системами и так далее.
XML Schema Validator
Сервис проверяет XML документы, а также XHTML.
Code Beauty Java Script Validator
Простой онлайн-валидатор Java Script, который позволит быстро проверить код на ошибки, указав URL, вставив в форму или с помощью загрузки файлом.
PHPLint Online
Онлайн-валидатор PHP кода от итальянского веб-разработчика Умберто Сальси. Умеет проверять PHP-код (5.6, 7.4), так и различные php-модули. Содержит много интересных для применения настроек.
Знаете другие инструменты, которые не попали в данный список? Пожалуйста, напишите в комментариях!
Как проверить валидность CSS
Здравствуйте, дорогие друзья! В прошлой статье я рассказывала о том что такое валидаторы, для чего нужно проверять свой сайт на валидность и как осуществить проверку валидности HTML. Если вы ещё не читали эту статью, то вот ссылка на неё. В данной же статье речь пойдёт о проверке валидности CSS.
Навигация по статье:
Сервис для проверки валидности CSS
Валидацию CSS мы будем делать при помощи сервиса jigsaw. w3.org. Оформление и принцип работы данного сервиса очень похож на валидатор HTML, но в отличии от него, данный сервис русифицирован.
На странице данного сервиса по проверке валидности CSS, точно так же, есть три вкладки, на которых мы может либо ввести адвес проверяемого сайта, либо загрузить файл с CSS кодом, либо проверить фрагмент кода, вставив его в соответствующее поле. Так же, нажав на ссылку «Дополнительные возможности», мы получаем доступ к следующим дополнительным параметрам:
«Профиль» — позволяет задать стандарт css по правилам которого будет осуществляться проверка валидности. По умолчанию стоит CSS3, если по каким-то причинам вам нужно будет проверять CSS2 или CSS1, либо какие-то другие стандарты, то задать это можно здесь. Так как большинство сайтов сейчас делаются с использованием СSS3, то проверять лучше всего именно по правилам этого стандарта.
В раскрывающемся списке «Предупреждение» вы можете выбрать тип вывода отчёта. Я думаю здесь понятно, какой пункт за что отвечает.
В поле «Среда» вы можете выбрать, под какой способ отображения вы будете проверять набор CSS-правил.
Здесь лучше всего оставить значение по умолчанию.
«Расширения поставщика» — здесь можно выбрать, что бы выводились либо предупреждения, либо ошибки. Также можно оставить по умолчанию.
Параметры мы рассмотрели, теперь можно вводить адрес сайта в соответствующее поле и нажимать кнопку «Проверить»
Анализ и исправление ошибок валидации CSS
После нажатия кнопки «Проверить» высвечивается список ошибок и предупреждениий найденных на проверяемом сайте.
Структура вывода ошибок уже не такая как при валидации HTML. С начале идет адрес CSS-файла, в котором были найдены ошибки. Далее, в левом столбце указывается строка и селектор, для которого была найдена ошибка.
В правом столбце указывается текст самой ошибки и рекомендации по ее устранению.
Для того чтобы исправить определённую ошибку вам нужно открыть CSS файл, в котором была найдена данная ошибка, а затем либо по номеру строки найти эту ошибку, либо скопировать название селектора и через поиск найти этот фрагмент кода и исправить.
Если вам проще осуществлять проверку валидности CSS на английском и потом самостоятельно это переводить, вы можете воспользоваться сервисом css-validator. org
Принцип его работы абсолютно такой же, единственное, он сделан полностью на английском языке и проверяет он как то не так как предыдущий. В большинстве случаев он находит в несколько раз больше ошибок и по умолчанию у него стоит проверка под стандарт CSS2.
Конечно же, чтобы исправить ошибки валидности CSS вам нужно иметь определённые знания в данной области. Очень часто валидаторы ругаются на кроссбраузерные префиксы и CSS хаки для браузеров Internet Explorer. Однако эти префиксы и хаки добавлены как раз для того чтобы добиться одинакового отображения во всех браузерах. И их удаление или исправление может негативно отразиться на кроссбраузерности сайта.
Вот и получается что в теории валидные сайты должны отображаться одинаково в разных браузерах, но для того чтобы добиться этой одинаковости нужно прибегать к невалидным решениям 
Нужна ли проверка валидности CSS?
Осуществлять проверку кода стоит, потому что иногда это позволяет выявить наиболее грубые ошибки, исправление которых позволит вам избежать некоторых проблем в будущем. Однако далеко не всегда каждый сайт можно привести к такому состоянию, когда у него не будет вообще ни каких ошибок.
Если у вашего сайта достаточно сложный и разнообразный функционал, то возможно у вас не получится совместить реализацию поставленных задач и того, что бы ваш сайт проходил проверку валидности, без возникновения каких-либо ошибок. В случае если ошибки не очень грубые, конечно же, стоит сделать выбор в пользу функционала.
Что же касается проверки сайта на валидность и исправления ошибок с целью SЕО-оптимизации, то этот вопрос достаточно неоднозначный. Потому, что весной этого года Google объявил, что они вообще не будут учитывать валидность кода при ранжировании сайта. Яндекс пока что такого заявления не делал. Они в своих рекомендациях советуют стараться, что бы верстка соответствовала стандартам. Однако, как показывает практика, большинство сайтов находящихся в топе по высокочастотным запросам содержат в себе кучу ошибок HTML и CSS. Вы можете сами в этом убедиться, протестировав их через эти сервисы.
Видеоинструкция
Лично я с валидацией CSS сильно не заморачиваюсь, так как если использовать различные эффекты анимации, сложные селекторы и добиваться кроссбраузерности, то ошибки в любом случае буду возникать и их устранение не даёт никаких существенных плюсов.
На этом у меня всё. Если вам есть что сказать по данному вопросу, то буду рада прочитать в комментариях ваше мнение по данному вопросу. Делитесь статьёй в соцсетях и подписывайтесь на новости блога и канал YouTube.
