MaxTarget

Проверка CSS на валидность

Добро пожаловать на Блог Свободного Вебмастера. Сегодня я хочу обратить Ваше внимание на еще один способ проверки сайта на соответствие общепринятым интернет-стандартам. Буквально на днях я рассказывал как проверить валидность HTML кода, на очереди CSS.

CSS

CSS (от англ. Cascading Style Sheets) — это формальный стандарт, предназначенный для описания внешнего вида документа языком разметки.

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

Главное окно валидатора CSS

И здесь нас ждет приятное удивление! Все на русском языке! Кроме того, есть возможность выбора любого языка из 18 доступных. В окне присутствуют вкладки, предлагающие выбрать вариант проверки:

  • URI — по ссылке на страницу
  • Загруженный файл
  • Набранный текст

Думаю, здесь пояснения не требуются. Продолжаем экспериментировать с Яндексом и проверим его на соответствие стандартам CSS. Для этого в текстовую строку ввожу адрес главной страницы и нажимаю на кнопку «Проверить». В ответ получаю следующее:

Результаты проверки CSS

И снова Яндексу необходимо поработать над ошибками 😀 Кстати, из первых строк таблицы видно, что ошибки в основном связаны с параметром border-radius, отвечающим за скругление углов, что не поддерживает стандарт CSS2.1. На самом деле это не критично, просто браузеры, не поддерживающие такие свойства, не будут их учитывать и покажут углы без скруглений.

Настроек проверки как таковых нет, НО сервис предлагает нам сгенерированный валидный код таблицы стилей, который будет отображен после списка всех ошибок и предупреждений:

Информация о корректном CSS

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

Чтобы подтвердить, что ничего невозможного нет, привожу результат проверки валидности CSS Блога Свободного Вебмастера на момент написания поста:

Я прошел проверку CSS!

Здесь меня поздравляют, что блог не содержит ошибок и предлагают в знак подтверждения соответствия правилам разместить баннер. Баннер не является обязательным, на усмотрение вебмастера. Предлагаю и Вам воспользоваться этим сервисом и поделиться результатами в комментариях!

  1. BloggerMen

    Неплохой сервис. Как это у вас получилось исправить абсолютно все ошибки?

    Ответить

  2. Webliberty

    Как я уже писал после проверки предлагается валидный код CSS 😉 Изначально код самого движка WordPress полностью удовлетворяет требованиям W3C и в основном нарушить стандарты «помогают» различные плагины, авторы которых не особо заморачиваются на эту тему. Выход из сложившейся ситуации — попытаться редактировать код плагина, найти альтернативную замену или вовсе от него отказаться.

    Ответить

  3. Арина

    Денис, какой ты молодец и умница. Твой сайт без ошибок, а у меня ужас — 56. С HTML чуть получше, там много погрех дают баннеры. Вроде вижу где и в чем ошибки, но как исправить — не знаю. Кстати? в последнем плагине для страниц тоже много всего оказалось.

    Ответить

  4. Webliberty

    Арина, ой спасибо 😳 Да, баннеры могут вызывать ошибки, но у меня их нет. А какой плагин, WP-PageNavi? После проверки сервис выдает валидный код, его можно скопировать и заменить существующий — ошибки исчезнут (я именно так и сделал на своем блоге), только нужно не забывать делать резервную копию начального варианта на всякий случай…

    Ответить

  5. osminog

    Очень переживаю после проверки данным сервисом 😥 У меня походу текст и фон в нескольких местах одного цвета! Я боюсь попасть из-за этого под БАН. Что мне сделать, смертельно ли это для сайта? Подскажите!

    Ответить

  6. Webliberty

    osminog, не смертельно, но нарвать на санкции поисковых систем возможно. Советую отредактировать CSS, чтобы цвета не совпадали, иначе поисковики могут расценить это как сокрытие информации.

    Достаточно лишь немного изменить оттенок. Например, если взять белый, то в шестнадцатиричной системе счисления он будет иметь значение #ffffff. Если нужен цвет текста такой же, то достаточно немного скорректировать значение: #fffffd — в итоге получим оттенок, зрительно не отличимый от белого, а для поисковика он уже другой, соответственно и при проверке CSS на валидность ошибки возникнуть не должно.

    Ответить

  7. osminog

    Webliberty, я это уже понял, но как и где менять цвет, так и не нашел 🙁

    Ответить

  8. Webliberty

    osminog, нужно редактировать файл темы WordPress. Для этого в консоли управления выбрать вкладку «Внешний вид», а в ней пункт «Редактор». Выбрать файл CSS и редактировать его, естественно, для этого нужно знать что такое каскадные таблицы стилей (CSS) и как с ними работать.

    Ответить

  9. Дмитрий

    Опять таки большое спасибо, Денис!!! Я чайник, поэтому ошибки CSS обнаружил благодаря этой твоей статье и указанному тобой сервису. Из 44-х предупреждений остался ноль, из 35 ошибок — 22, потом доделаю.

    Ответить

  10. Max

    В целом интересно написано, только этот корректный css теперь весит в 3 раза больше чем до оптимизации, теперь сравнивать буду. Спасибо.

    Ответить

  11. Webliberty

    Max, попробуйте выполнить оптимизацию CSS, должно помочь в сокращении размера файла.

    Ответить

  12. Балашова Татьяна

    Здравствуйте, Денис! Прочитала Вашу статью, проверила валидность, подумала, что я могу исправить и здорово расстроилась. Оказывается, я ничем не могу помочь самой себе. В программировании я всем чайникам чайник. Не могли бы Вы хотя бы на одном примере (из моих ошибок) подробно рассказать как и что нужно сделать? Или: исправить все мои ошибки (не бесплатно, но в разумных пределах)?

    Ответить

  13. Webliberty

    Балашова Татьяна, зачем же расстраиваться? Ведь эти ошибки не влияют ни на посещаемость блога, ни на качество его содержимого. Проверьте несколько блогов — наверняка у них куча ошибок и при этом отлично себя чувствуют, даже тот же Яндекс, главную страничку которого я приводил в примере имеет ошибки.

    Что касается Ваших ошибок валидности CSS — почти все из них связаны с не поддерживаемыми свойствами спецификации CSS2.1, но их поддержка внедрена в новую спецификацию каскадных таблиц стилей CSS3, а конкретнее — это тень вокруг текста (text-shadow), закругленные углы (border-radius) и прочие.

    Если хотите их исправить, то просто удалите эти свойства из файла CSS, но учтите, что при этом пострадает оформление блога. Ведь ради валидного кода порой приходится жертвовать, да и к тому же совсем скоро все современные браузеры будут в полной мере поддерживать CSS3, а значит и большинство ошибок уже перестанут быть таковыми 😉

    Ответить

  14. Павел

    Хорошая статья, спасибо вам, что пропагандируете валидное написание веб-ресурса. Ведь в сети Интернет, сейчас редко встретишь полностью соответствующий стандартам W3C сайт. При создание своего сайта, о персональном компьютере для начинающих я тоже очень много времени посвятил этому вопросу.

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

    Ответить

  15. Webliberty

    Павел, солидарен) А на каком у Вас движке, на Joomla? У нее изначально не валидный код?

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

    Ответить

  16. Татьяна

    Здравствуйте! Я новичок, поэтому прощу проявить снисходительность к моим вопросам 😳 Моему сайту всего полтора месяца, а вот такая статистика, как проверка валидности HTML — 43 ошибки и проверка валидности CSS — 13 мне кажется устрашающей. Начала самостоятельно разбираться в указанных ошибках и поняла, что без специальных знаний лучше не соваться. Скажите, пожалуйста, если я не уберу ошибки уже существующие, мне не грозит это их многократным увеличением?

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

    Ответить

  17. Webliberty

    Здравствуйте, Татьяна! В этом нет ничего устрашающего, поверьте мне) Ошибки валидности в основном появляются из-за установленных тем, плагинов, счетчиков, баннеров, т.к. сама платформа WordPress изначально валидна. Соответственно, если добавляете или удаляете плагины, вставляете какой-то код, то количество ошибок может изменяться в большую или меньшую сторону, ни о каком многократном увеличении не может быть и речи.

    Плагин All in One SEO никак не связан с отображением меток на странице. Что Вы имеете в виду? Метки под названием статьи, к примеру? Если да, то за их вывод отвечает функция вызова и должна присутствовать в шаблоне, если ее нет, то и они не отображаются. Ну а в сайдбаре я вижу все метки присутствуют. Описанные проблемы с иерархией скорее связаны с темой шаблона.

    Ответить

  18. Татьяна

    Денис! Большое спасибо за такой развернутый и обнадеживающий ответ. У вас очень интересный и полезный сайт. Подписываюсь на обновления. У меня это первые шаги, прежде больше трех лет занималась копирайтингом и желание иметь собственный ресурс росло с каждым разом. Но вот такие неприятные «мелочи» сильно мешают поверить в то, что если не имеешь специальных знаний, то ничего реального не получится. Очень не хватало тех. знаний. А у вас на сайте инфа просто разжевывается для таких чайников как я. Поэтому большое спасибо 😎

    Ответить

  19. Максим

    Спасибо за статью! Такой вопрос, установил новую joomla 2.5 установил шаблон от YooTheme, технология Warp поддерживает HTML5 по которому сайт является валидным, и CSS3, но валидатор проверил и автоматом определил CSS2.1 — выявил 142 ошибок. Если в ручном режиме ставлю проверить как CSS3 то ошибок 92 💡

    Вопрос вот в чем если исправлять таблицы стилей то какой версии CSS необходимо придерживаться 2.1 или 3? Еще раз спасибо за статью.

    Ответить

  20. Webliberty

    Максим, знаете, я тоже делал попытки по преобразованию блога под новые стандарты верстки и столкнулся с той же проблемой — валидатор автоматически присваивал CSS2.1. Думаю это связано с тем, что все элементы старой версии CSS поддерживаются в новой, но в то же время последняя официально не принята. С HTML почему проще — там указывается доктайп страницы, который изначально задает версию, в CSS подобного нет.

    Думаю раз уж у Вас HTML5, то следуйте инструкциям CSS3, чтобы идти в ногу со временем, как только новые стандарты будут официально утверждены W3C проблема отпадет сама собой.

    Ответить

  21. Макс

    Влияет ли валидность CSS, а точнее ошибки на работу сайта?

    Ответить

  22. Webliberty

    Макс, косвенно очень сильно влияет. Вроде уже писал в комментариях, что ошибка когда цвет фона совпадает с цветом текста, расположенного на этом фоне может привести к санкциям со стороны ПС — скрытие информации от пользователей. Это один пример, можно и другие привести при желании.

    Ответить

  23. Ирина

    Webliberty, только позавчера проявила инициативу исправить ошибки CSS кода с помощью оптимизатора. В результате — все у меня поехало 😀 Весь дизайн испортился. Пришлось в срочном порядке бекапить. А ошибок 127 показывает. Теперь боюсь чего-то уже менять

    Ответить

  24. Webliberty

    Ирина, откатите изменения и ничего страшного)

    Ответить

  25. Ольга

    Здравствуйте. Проверила свой сайт и получила ответ — Не найдено ни одной каскадной таблицы стилей. Что это значит? Сайт сделан на cms TYPOlight. Спасибо

    Ответить

  26. Anton

    После того. как я отвалидировал свой блог по HTML, оставалась одна ахиллесова пята — CSS, я все никак не мог разобраться с некоторыми моментами. Но, в один прекрасный момент я себе сказал «Хватит!», надоело жить с ошибками.

    Поисправлял все (благо, их было всего 30 или 40), при этом исправляя одну, можно было добиться исправления еще 4-5 ошибок. Весь процесс у меня занял несколько часов, в том числе с одновременной проверкой самого шаблона, чтобы не поплыл. На данный момент у блога полностью пройдена валидация по стандарту CSS3.

    Ответить

  27. Webliberty

    Ольга, вероятно в шаблоне сайта этой cms не используются файлы *.css, хотя звучит странно. Без ссылки на сайт остается только догадываться.

    Anton, поздравляю! 😎

    Ответить

  28. Геннадий

    Все верно. Удалите -moz-border-radius и другие строчки с префиксами и получите разваливающуюся некроссбраузерную верстку. Кроме того, крайне не рекомендуется использовать отметку !important в стилях — это вам уже скажет любой опытный верстальщик.

    А так, да, автор молодец, трудился, печатал буковки. Продолжайте тратить время на вылизывание CSS до идеала. А Яндекс, конечно же, не авторитет — автор статьи, разумеется, авторитетнее 😀

    Ответить

  29. Webliberty

    Геннадий, спасибо за советы опытного верстальщика 😎 Я и не утверждал что им являюсь) Можете рассказать подробнее, почему не стоит использовать !important? Все современные браузеры поддерживают CSS3, поэтому у себя я не применяю префиксы.

    Про авторитетность речи не шло, я показал простой доступный пример, из которого следует что не стоит уделять слишком пристального внимания валидности.

    Ответить

  30. Светлана

    Простите меня, пожалуйста, но я никак не могу понять как исправить ошибки… У меня аж 67 ошибок, но как их исправить я никак не пойму. Создать сайт умудрилась, а вот ошибки исправить никак не получается 😥

    Ответить

  31. Webliberty

    Светлана, это не критично, если сайт нормально отображается в браузерах, то можете не уделять этому аспекту слишком много внимания и не переживайте. Возможно, со временем разберетесь что к чему и справитесь.

    Ответить

  32. Геннадий

    Webliberty, использование !important значительно затрудняет дальнейшее переопределение стилей в обычном режиме. Это звоночек о том, что используется неверный порядок наследования стилей.

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

    Ответить

  33. Webliberty

    Геннадий, спасибо за развернутый комментарий, теперь буду знать!

    Ответить

  34. Лара

    Денис здравствуйте. У меня выдает около 400-сот ошибок. Смотрела я смотрела, но к сожалению ничего не поняла, совсем я в этом не разбираюсь. Не могли бы вы подсказать, с чего бы мне хотя бы начать? Честно, прям хоть плач от бессилия. Или лучше обратиться к спецу какому-нибудь?

    Ответить

  35. Anton

    Лара, я бы на Вашем месте не стал даже самостоятельно пытаться. 400 ошибок для свежей версии CMS не так и мало, т.к. обычно их не былее 50-ти. К тому же, исправление ошибок по незнанию может привести к полной неработоспособности шаблона. Найдите знакомого верстальщика — он поможет избавиться от ошибок и проконсультировать по всем интересующим вопросам.

    Ответить

  36. Лара

    Anton, спасибо! Да, так и сделаю.

    Ответить

Ваш комментарий:

:) ;) :D :( :cry: :| :o :P 8-) :oops: :roll: :idea: