Проверка валидности css документа с помощью W3C валидатора

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. Я уже упоминал о том, что существует проверка сайта на ошибки с точки зрения валидности html кода. Это надо делать хотя бы время от времени, поскольку валидность как html, так и css сильно влияет на кроссбраузерность сайта, то есть, на тождественное отображение вашего ресурса в различных браузерах.

Кстати, тут о популярных и лучших вэб-обозревателях обобщающая статья, которая, надеюсь, поможет вам сделать выбор в пользу одного из них.

CSS validator для проверки корректности кода CSS

Кроме того, я уже упоминал, несмотря на то, что поисковые системы на данном этапе не учитывают ошибки CSS и HTML кода при ранжировании сайтов, в будущем все может измениться и можно получить ситуацию, когда великолепно оформленный, сделанный для людей проект может лишиться части потенциальной аудитории из-за того, что не прошел валидацию. Ну ладно, это все лирика, здесь каждый для себя решает сам, насколько все важно.

Я думаю, с моим мнением вы теперь знакомы, поскольку я пишу эту статью, а значит считаю это достойным внимания наряду, например, с такой важнейшей частью seo оптимизации как закрытие ссылок и фрагментов текста от индексации Google и Яндекс с помощью nofollow noindex или грамотным использованием анкора ссылки.

Ладно, как говорится ближе к делу. Сначала немного о CSS. CSS (Cascading Style Sheets — Каскадные таблицы стилей) является языком стилей, который определяет отображение HTML документов. То есть если HTML описывает содержимое страницы, то CSS форматирует это содержимое, иными словами придает ему завершенный вид. Кстати, для повышения скорости сайта полезно будет провести оптимизацию CSS файлов вашей темы.

W3C валидатор: проверка валидности кода CSS

Теперь перейдем к тому, как осуществить проверку на валидность того или иного документа (странички нашего сайта или блога WordPress). Также, как в случае проверки HTML кода, воспользуемся одним из инструментов Международного Консорциума W3C. Перейдем на сервис валидации CSS:

Сервис валидации CSS документов

Как видите, есть три возможности проверки валидности CSS посредством W3C валидатора. Кстати, обратите внимание, что внизу страницы валидатора есть примечание, которое указывает на необходимость проверки кода HTML на валидность. Только оба правильных кода дают гарантию корректности всего документа. Для проверки вводим URL. Например, проверим главную страницу моего блога:

Результат проверки документа на валидность кода CSS

Итог проверки W3C валидатором в отношении ошибок CSS кода нельзя назвать неутешительным, поскольку обнаружены всего 2 ошибки. Конечно, эти ошибки бывают разными, в каждом конкретном случае они вызывают разные последствия. Посмотрим, как можно поступить  для их ликвидации. Здесь все удобно, поскольку W3C валидатор выдает не только ссылку на документ, содержащий некорректный код, но и номер строки, на которой он расположен. Кстати, ниже, после списка предупреждений и ошибок будет отображен вариант корректного кода CSS, которым можно воспользоваться:

Вариант корректного кода CSS в окне результатов валидатора W3C

На странице результата проверки валидности CSS присутствует ссылка на документ css.ie, который расположен в папке темы. Он был создан для достижения кроссбраузерности  блога (одинакового отображения в популярных браузерах). Причем именно для различных модификаций Internet Explorer, который грешит различными ”косяками” в плане искажения вида сайта, особенно его старые версии (IE9 значительно лучше в этом отношении). Кроссбраузерность имеет очень важное значение для продвижения проекта, однако при проверке оказалось, что в этом документе присутствуют свойства, которые не соответствуют стандартам W3C.

Итак, получаем строчки 3 и 12, на которых присутствуют ошибки. Для их исправления следует удалить ошибку разбора html {filter: expression(document.execCommand(«BackgroundImageCache», false, true));} и свойство .zoom. Сейчас не буду вдаваться в тонкости программирования и верстки сайтов, замечу только, что свойство expression помогает избавиться от неприятного эффекта мерцания фоновых изображений, которое происходит в IE6.

То есть в браузере, использование которого исходит на нет, а в последующих версиях этого ”глюка” уже не наблюдается. Сразу скажу, что я некоторое время еще буду использовать это ”лекарство”, до тех пор, пока количество потенциальных посетителей, иcпользующих IE6  не достигнет минимального уровня. Однако для наглядности, чтобы показать вам, как на это будет реагировать W3C валидатор, я удалю его.

Свойство .zoom, которое устанавливает коэффициент масштабирования элемента, не являющаяся частью Международного Стандарта W3C, поддерживается совсем старинными версиями браузеров Opera, Safari, в том числе IE8 (9 версия почти полностью ”законопослушная”, так что в скором времени, надеюсь, вебмастера будут освобождены от необходимости использовать хаки, то есть дополнительные коды, позволяющие достичь максимальной кроссбраузерности). Теперь посмотрим на документ, содержащий невалидные элементы и откорректируем его:

Хаки для Internet Explorer, содержащие невалидные элементы кода CSS

Этот документ находится в папке моей темы Cloudy, я удаляю вышеназванные элементы, которые не прошли проверку валидности. Далее, в результатах проверки на валидность, кроме ошибок, оказалась еще масса так называемых предупреждений:

Предупреждения W3C валидатора в результате проверки

Для примера я постараюсь показать наглядно, как избавиться от самых распространенных из них, ну и попутно, объяснить их значения. Как видим, W3C валидатор предупреждает о наличии одинаковых цветов для текста и фона. Надо сказать, что это вообще-то нежелательно в любом случае, поскольку поисковые системы такое положение вещей могут рассматривать как сокрытие информации, что чревато серьезными санкциями.

Конечно, это не всегда так происходит, однако недооценивать эту опасность нельзя. Итак, переходим непосредственно к исправлению ситуации. Лучше всего скопировать файл style.css вашей темы в HTML и PHP редактор notepad++, о котором я рассказывал тут и который упрощает поиск по номеру строки:

Коды цвета в проверяемом документе CSS

Теперь мы знаем, где расположены эти строчки в файле вашей темы, корректируем цвет, немного изменив оттенок. В шестнадцатеричной системе цветов #ffffff  соответствует белому цвету. Изменяем его следующим образом: вместо последней f вписываем d, таким образом получаем немного другой оттенок белого цвета; теперь изменения для пользователей заметны не будут, однако поисковики увидят разницу:

Корректировка цветового оттенка в файле CSS

Вот примерно так можно проводить корректировку невалидных частей кода CSS страничек вашего ресурса. Точно также находим остальные участки, отмеченные предупреждениями и которые  необходимо исправить.Что касается предупреждений, касающихся строки 483 (таких оказалось, кстати, немало, порядка 10). При проверке я обнаружил, что их причиной  является плагин WP Page Numbers, который обеспечивает постраничную навигацию.

Это подвинуло меня на деактивацию этого плагина и явилось причиной того, что я наконец заменил его внедрением кода, что явилось шажком по направлению к снижению нагрузки на сервер. Как только проделал это, предупреждения, касавшиеся нарушения валидности кода именно этим плагином, при повторной проверке тут же исчезли. После вышеописанных телодвижений проводим повторную проверку валидности CSS с помощью W3C валидатора:

Корректный код CSS в результате проверки W3C validator

Теперь вы знаете, как проверять валидность CSS документа (вебстраницы сайта или блога), прибегнув к помощи W3С валидатора. Напоследок хотелось бы отметить, что степень и частоту проверки валидности кода CSS каждый для себя решает сам, все зависит от обстоятельств, но тем не менее время от времени это надо делать обязательно, по моему глубокому убеждению. Засим разрешите откланяться, надеюсь, расстаемся ненадолго.

Поделиться с друзьями
Игорь Горнов

Создатель и администратор сайта Goldbusinessnet.com. Участник нескольких успешных проектов и автор более 1000 статей о работе в интернете, создании сайтов, полезных программах и сервисах.

Работа в интернете
Добавить комментарий

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

  1. Алексей

    Спасибо, вроде исправил все ошибки на своём блоге по CSS — http://bestforinfo.ru/
    А на вашем сейчас две ошибки выдаёт.

    Ответить
    1. Игорь Горнов автор

      Да, знаю, Алексей, это последствия использования хака для IE7, чтобы сайт правильно отображался в этом браузере. Ничего не поделаешь, приходится чем-то жертвовать, ведь некоторые читатели еще пользуются старинными версиями.

      Ответить
  2. Андрей

    аааа, понятно но я думаю в перспективе удальть этот сайт и создать новый на эту тему, это был мой первый сайт. А что вы скажите про этот сайт : http://profnastil-zt.org.ua/?????

    Ответить
  3. Андрей

    Всё проверил работает, спасибо, а ошибки чем мешают ?

    Ответить
    1. Игорь Горнов автор

      Андрей, это помогает добиться максимальной кроссбраузерности сайта (одинакового отображения во всех популярных браузерах),а, поскольку посетители пользуются разными браузерами, максимальное их количество будет видеть страницы Вашего ресурса в правильном красивом виде. Естественно, это влияет напрямую на трафик. Пока ошибки мало влияют на продвижение, но со временем может все измениться. Поэтому лучше поддерживать их минимальное количество. Вот Вам навскидку две основные причины.

      Ответить
  4. Андрей

    У меня на експлоере сайт только показывает главную страницу, а эту не показывает http://optzt.org.ua/index.php?option=com_content&view=category&layout=blog&id=10&Itemid=15

    что нужно сделать чтобы все страницы отображались? все коды worlda в html удалил.

    Ответить
    1. Игорь Горнов автор

      А, понятно, эта страница не хочет показываться в IE7. Я протестировал, в 8 и 9 версии эксплорера страница великолепно отображается. Андрей, попробуйте поставить хак для IE6 и IE7. Информация здесь. А вообще, в скором времени, я думаю, семеркой уже не будут пользоваться, так что страшного ничего нет, но попробуйте поставить хаки, возможно, это поможет. Только потом протестируйте полученный результат во всех популярных браузерах (Mozilla, Opera, восьмая и девятая версия IE, Google Chrome). О результатах сообщите.

      Ответить
  5. Андрей

    Здравствуйте, подскажите главную страницу исправил, а остальные в експлоере не показывает не знаю что делать вот сайт: http://optzt.org.ua/

    Ответить
    1. Игорь Горнов автор

      Андрей, что-то я не понял Вас, объясните поподробнее, в чем суть проблемы. В IE я отлично вижу Ваш сайт, вот ошибочек в CSS коде у вас многовато.

      Ответить