Проверка CSS на валидность с помощью CSS Validation Service. Что такое валидность и валидация и зачем они нужны? Что такое валидаторы кода

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

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

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

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

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

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

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

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

На странице результата проверки валидности 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 версия почти полностью ”законопослушная”, так что в скором времени, надеюсь, вебмастера будут освобождены от необходимости использовать хаки , то есть дополнительные коды, позволяющие достичь максимальной кроссбраузерности). Теперь посмотрим на документ, содержащий невалидные элементы и откорректируем его:

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

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

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

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

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

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

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

Валидация — это проверка страниц или всего сайта в целом на правильность и соблюдение всех норм веб стандартов. Все такие стандарты прописаны на W3C, который соответственно и проводит валидацию вашего сайта. Через данный сервис можно осуществить проверку на HTML ошибки и CSS ошибки . Если на ресурсе найдены ошибки, то не факт, что он будет отображаться в любом браузере именно как в вашем. Совершая вёрстку шаблона, нужно обязательно проверять код на валидность так как именно красивый и чистенький код нравится поисковым системам и браузерам. А сейчас мы узнаем как производится проверка.

Валидация HTML

Произвести проверку можно по адресу:

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

А вот как выглядит отчёт после проверки сайта:

Как мы видим сервис нашёл у меня 20 ошибок и 3 опасных. Раньше было около 150 ошибок). Исправить все ошибки многим не удаётся из-за шаблонов. Как я прочитал на одном сайте: «Сделай сайт валидный и потеряй всю красоту сайта.» Но всё равно нужно стремится к максимально возможному уменьшению ошибок на сайте!

Валидация CSS

А вот с стилевой валидацией всё гораздо легче и исправлять её в разы легче. Для этого зайдите на и всё в том же порядке, что и выше. После ввода адреса сайта, система W3C выдаст результат. Что касается с моим сайтом, то у меня всё ок). Но так же было много ошибок и всё приходилось менять собственноручно.

И в окончание статье скажу вам: практически все бесплатные шаблоны не проходят валидацию. А если вы покупаете шаблон или заказываете, то обязательно выдвините условие, что сайт должен иметь валидный код и никак иначе. Всё такие деньги платите и всё должно быть на высшем уровне. И для сокращение времени, которое вы тратите на заход и проверку в данном сервисе, просто установите для вашего браузера SEO плагин. Который на лету будет проверять все параметры ресурса и заодно проверит код на ошибки. Я именно плагином и пользуюсь.

Так что дорогие друзья всегда старайтесь сделать сайт как можно лучше, как внутренне так и внешне!

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

Разработчиком языка стилей CSS является Консорциум Всемирной паутины (World Wide Web Consortium, сокращённо W3C) — это организация, которая разрабатывает и внедряет технологические стандарты в интернете.

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

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

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

Здесь нас ждёт приятное удивление, всё на русском языке! Кроме того, есть возможность выбора любого другого языка из более 20 доступных. На странице расположены вкладки, предлагающие выбрать вариант проверки:

Проверить по URI - достаточно указать адрес страницы;

Проверить загруженный файл — требуется выбрать локальный файл CSS;

Проверить набранный текст — нужно ввести код CSS для проверки на корректность.

Дополнительные возможности позволяют указывать параметры расширенной проверки. Привожу краткую справку по каждому из них:

• Профиль — перечисляет все особенности и возможности реализации на конкретной платформе. Выбор по умолчанию соответствует наиболее часто используемому стандарту третьего уровня CSS3.
• Предупреждения — настройка подробности отчётов: все или наиболее важные предупреждения, обычный отчёт, без показа предупреждений. Сервис может выдавать два типа сообщений: ошибки и предупреждения. Если проверяемый CSS не соответствует рекомендации — это ошибка. Предупреждения отличаются от ошибок тем, что не относятся к проблемам выполнения спецификации.
• Среда — указать где применяются стили, например, на портативном устройстве, дисплее, телевизоре или странице для печати. Рекомендуется проверять все среды применения стилей.
• Расширения поставщика — желательно оставить по-умолчанию, есть возможность отображения только ошибок или только предупреждений. Поставщики браузеров иногда реализуют экспериментальные CSS свойства, для их поддержки используются префиксы: -moz- (для Firefox), -webkit- (для Chrome), -ms- (для Internet Explorer), -o- (для Opera) и другие.

Указываю URL адрес, настраиваю дополнительные параметры проверки и нажимаю на кнопку «Проверить» для старта. Ура! Результат проверки CSS: ошибок не обнаружено!

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

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

Обратите внимание, в списке предупреждений приведён номер строки, в которой найдено неизвестное свойство. При обнаружении ошибок вы увидите таблицу со свойством и описанием проблемы. Например, такой результат проверки имеет главная страница Яндекса:

Ниже представлена информация о корректном проверенном CSS. Не спешите его копировать и использовать на своём сайте! Да, в приведённом варианте корректного CSS нет ошибок и свойств, использование которых вызывает предупреждения, код 100% пройдёт полную проверку. Но эффект достигается путём удаления этих свойств, поэтому на сайте могут возникнуть проблемы с отображением или ожидания не совпадут с реальностью.

Данный сервис размещается и обслуживается на сервере W3C, но в то же время не является официальным инструментом проверки CSS.

При желании, воспользуйтесь совмещенным валидатором — он проверяет весь документ, объединяя на одной странице результаты проверки HTML и CSS валидаторов, а также других полезных инструментов.

При веб-разработке сайтов обращайтесь к актуальным спецификациям и справочникам по таблицам каскадных стилей. Рекомендую воспользоваться валидатором CSS и проверить свой сайт, делитесь результатами в комментариях!

Валидацией называется проверка CSS-кода на соответствие спецификации CSS2.1 или CSS3. Соответственно, корректный код, не содержащий ошибок, называется валидный, а не удовлетворяющий спецификации - невалидный. Наиболее удобно делать проверку кода через сайт http://jigsaw.w3.org/css-validator/ , с помощью этого сервиса можно указать адрес документа, загрузить файл или проверить набранный текст. Большим плюсом сервиса является поддержка русского и украинского языка.

Проверить URI

Эта вкладка позволяет указывать адрес страницы размещенной в Интернете. Протокол http:// можно не писать, он будет добавлен автоматически (рис. 1.42).

Рис. 1.42. Проверка документа по адресу

После ввода адреса нажмите на кнопку «Проверить» и появится одна из двух надписей: «Поздравляем! Ошибок не обнаружено» в случае успеха или «К сожалению, мы обнаружили следующие ошибки» при невалидном коде. Сообщения об ошибках или предупреждениях содержат номер строки, селектор и описание ошибки.

Проверить загруженный файл

Эта вкладка позволяет загрузить HTML или CSS-файл и проверить его на наличие ошибок (рис. 1.43).

Рис. 1.43. Проверка файла при его загрузке

Сервис автоматически распознает тип файла и если указан HTML-документ, вычленяет из него стиль для валидации.

Проверить набранный текст

Последняя вкладка предназначена для непосредственного ввода HTML или CSS-кода, при этом проверке будет подвергнут только стиль (рис. 1.44).

Рис. 1.44. Проверка введенного кода

Этот вариант представляется наиболее удобным для проведения различных экспериментов над кодом или быстрой проверки небольших фрагментов.

Выбор версии CSS

В CSS3 добавлено много новых стилевых свойств по сравнению с предыдущей версией, поэтому проводить проверку кода следует с учетом версии. По умолчанию в сервисе указан CSS2.1, так что если вы хотите проверить код на соответствие CSS3, это следует указать явно. Для этого щелкните по тексту «Дополнительные возможности» и в открывшемся блоке из списка «Профиль» выберите CSS3

Рис. 1.45. Указание версии CSS для проверки

Идентификаторы и классы

Периодически поднимается спор о целесообразности использования идентификаторов в вёрстке. Основной довод состоит в том, что идентификаторы предназначены для доступа и управления элементами веб-страницы с помощью скриптов, а для изменения стилей элементов должны применяться исключительно классы. В действительности нет разницы, через что задавать стили, но следует помнить о некоторых особенностях идентификаторов и классов, а также подводных камнях, которые могут поджидать разработчиков.

Для начала перечислим характерные признаки этих селекторов.

Идентификаторы

В коде документа каждый идентификатор уникален и должен быть включён лишь один раз.

Имя идентификатора чувствительно к регистру.

Через метод getElementById можно получить доступ к элементу по его идентификатору и изменить свойства элемента.

Стиль для идентификатора имеет приоритет выше, чем у классов.

Классы могут использоваться в коде неоднократно.

Имена классов чувствительны к регистру.

Классы можно комбинировать между собой, добавляя несколько классов к одному тегу.

Идентификаторы

Если во время работы веб-страницы требуется изменить стиль некоторых элементов «на лету» или выводить внутри них какой-либо текст, с идентификаторами это делается гораздо проще. Обращение к элементу происходит через метод getElementById , параметром которого служит имя идентификатора. В примере 1.70 к текстовому полю формы добавляется идентификатор с именем userName , затем с помощью функции JavaScript делается проверка на то, что пользователь ввёл в это поле какой-либо текст. Если никакого текста нет, но кнопка Submit нажата, выводится сообщение внутри тега с идентификатором msg . Если всё правильно, данные формы отправляются по адресу, указанному атрибутом action .

Пример 1.70. Проверка данных формы XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

Проверка формы

function validForm (f) {

user = document.getElementById("userName"); if (user.value == "")

document.getElementById("msg").innerHTML = "Пожалуйста, введите имя."; } else f.submit();

Введите свое имя:

Поскольку идентификаторы чувствительны к регистру, имеет значение их однотипное написание. Внутри тега используется имя userName , его же следует указать и в методе getElementById .

При ошибочном написании, например, username , скрипт перестанет работать, как требуется.

В примере выше стили вообще никакого участия не принимали, сами идентификаторы требовались для работы скриптов. При использовании в CSS следует учитывать, что идентификаторы обладают высоким приоритетом по сравнению с классами. Поясним это на примере 1.71.

Пример 1.71. Сочетание стилей

xmlns= "http://www.w3.org/1999/xhtml">

Стиль идентификатора

class= "a b" > Стиль классов a и b

class= "b" > Стиль класса b

Для первого абзаца устанавливается стиль от идентификатора A и класса b , свойства которых противоречат друг другу. При этом стиль класса будет игнорироваться из-за особенностей каскадирования и специфичности. Для второго абзаца стиль задаётся через классы a и b одновременно. Приоритет у классов одинаковый, значит, в случае противоречия будут задействованы те свойства, которые указаны в стиле ниже. К последнему абзацу применяется стиль только от класса b . На рис. 1.46 показан результат применения стилей.

Рис. 1.46. Использование стилей для текста

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

Поскольку к элементу одновременно можно добавлять более одного класса, это позволяет завести

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

Пример 1.72. Использование классов

R, .b { padding : 10 px ;

} background: #FCE3EE ;

border-radius: 8 px ; -webkit-border-radius: 8 px ;

} -moz-border-radius: 8 px

B { border : 1 px solid #ED1C24 ; }

N { border : none ; }

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