В одной из прошлых статей я рассказывал о . Однако, не все знают, что помимо валидатора для HTML , есть валидатор и для CSS .

Значение валидности CSS такое же, как и у HTML: почти не имеет значения. Аналогично с HTML , если Вы будете писать невалидный CSS , то проблем не возникнет (если, конечно, не будет грубых ошибок), однако, валидный код - это всегда хорошо. Такой код чёткий и структурированный, он легко поддаётся пониманию, что также немаловажно, особенно при исправлении, и особенно другими людьми. Также валидность CSS ускоряет процесс обработки, а, следовательно, и скорость загрузки страниц.

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

Чтобы проверить валидность CSS , надо воспользоваться вот этим W3-сервисом : http://jigsaw.w3.org/css-validator/ .

Я сразу скажу, что в отличии от HTML , сделать CSS валидным гораздо проще, поскольку там в основном только грубые ошибки, за исключением , которые лучше вообще избегать.

Подведу итоги. Делать валидным код совсем не обязательно, но я настоятельно рекомендую этим заниматься, так как такой сайт будет легче индексироваться поисковыми системами (валидность HTML ), быстрее работать, проще редактироваться и вызывать уважение со стороны профессионалов.

В этой статье я познакомлю с понятием «валидность» кода сайта (html & css). Надеюсь все помнят, html — это структура сайта. Css — правила и стили для тегов, которые описаны в html.

Будем разбираться с самых низов: теория, а далее перейдем к практике. Так же вы найдете ответы на следующие вопросы: что такое валидность html и css кода, зачем она нужна, почему поисковые системы любят чистый / валидный код. А самое то главное покажу на примерах как проводить проверку валидности кода сайта.

Зачем нужна проверка валидности html и css кода

Валидность — по-другому чистый код (без ошибок)

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

Константа № 2. Чистый код (html и css) поощряют поисковые машины (Yandex, Google). Говоря по-русски, когда робот поисковой машины приходит на ваш ресурс и видит что валидность соблюдена, то соответственно поисковой робот будет знать, что этот ресурс без ошибок, а значит к отношение к сайту в лучшую сторону.

Из личного опыта: В моей практике была ситуация, когда новые статьи на блоге ни в какую не хотели залетать в поисковую выдачу. Вроде делаешь то все правильно, а в выдаче Яндекса нет и все! Вот что делать, куда копать? Кто-то подумает фильтры — фильтры, но ничего такого нет.

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

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

2016-12-29

Оживляем кнопки и проверяем сайт на валидность кода HTML и CSS

Здравствуйте уважаемый посетитель!

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

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

• Делаем кнопки объемными
• Делаем кнопки интерактивными
• Нужна ли валидация
• Как проверять на валидность HTML-код
• Как проверять на валидность CSS-код
• Исходные файлы сайта

Делаем кнопки объемными

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

Ниже показан фрагмент сайдбара с такими кнопками.

Для того, чтобы кнопки "оживить" сначала придадим им с помощью стилей CSS некоторую объемность. И сделаем это с помощью свойства линейного градиента, которое ранее уже использовалось при оформлении блоков ротатора, поиска и подписки.

Значения линейного градиента определим следующим образом:

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

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

2. Дальше определим стоп-позицию градиента где начальный, более темный цвет будет переходить в основной. Стоп-позицию разместим примерно в середине. При этом, для того, чтобы сделать более насыщенный цвет, сдвинем стоп-позицию немного вверх, и определим ее значение, скажем в 70% от высоты.

3. И последнее, что нужно сделать для назначения свойств градиента, это определить более светлый цвет по сравнению с основным, который будет окрашивать кнопки в верхней части. Делается это аналогичным образом, как и при определении начального цвета градиента. В данном случае значение этого цвета примем за "b88686".

3. На основании полученных данных добавим линейный градиент к ранее сформированным свойствам CSS кнопок.

input: {

height:30px;

margin-bottom:10px;

border-radius:5px;

background:#a76d6d;

text-align:center;

font-weight:bold;

color:#fff;

float:right;

background-image

Можно отметить, что при определении крайних цветов здесь не указаны стоп-позиции, так как при значениях 0% и 100% это делать необязательно.

Теперь, обновим браузер и посмотрим на результат.

Как видно, кнопки приобрели небольшую выпуклость. Теперь можно приступить к их "оживлению".

Делаем кнопки интерактивными

Для того, чтобы полноценно работать с кнопками сделаем их интерактивным, что будет визуально отражать их три основных состояния, пассивное (кнопка находится в исходном состоянии), активное (на кнопку наведен курсор) и нажатое (при наведенном курсоре нажата и удерживается кнопка мышки).

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

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

Цвета бордюров и тени подберем таким же образом, как и в предыдущих случаях.

CSS-код после соответствующих дополнений примет вид.

input: {

height:30px;

margin-bottom:10px;

border-radius:5px;

background:#a76d6d;

text-align:center;

font-weight:bold;

color:#fff;

float:right;

background-image:linear-gradient(to top, #653939, #a76d6d 50%, #b88686);

box-shadow:2px 2px 4px 0px #422a2a;

border-width:2px;

border-style:solid;

border-color:#ddbebe #241616 #241616 #ddbebe;

Здесь можно отметить, что бордюры представлены комбинацией свойств, определяющих толщину (border-width со значением 2px ), стиль (border-style ) со значением, определяющим сплошную рамку и цвета (border-color ) по каждой из четырех сторон.

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

Как видно, кнопки в этом состоянии как будто приподнялись.

Теперь попытаемся кнопкам придать вид нажатого состояния. Для этого уберем тень, а бордюрам изменим цвет. При этом будем использовать специальный селектор псевдо-класса :hover , соответствующий активному состоянию.

Код CSS для активного состояния кнопок примет следующий вид.

input: hover {

box-shadow:none;

border-color:#a76d6d #a76d6d #a76d6d #a76d6d;

В этом случае бордюрам снова изменим цвет и добавим тень, только в этом случае она будет внутренней и без смещения. Селектор псевдо-класса также изменится на :active , соответствующий нажатому состоянию.

Код CSS для нажатого состояния будет следующим.

input: active {

box-shadow:0px 0px 7px 2px #422a2a inset;

border-color:#777 #fff #fff #777;

Ниже для сравнения показана кнопка "Поиск", где хорошо видно, как она меняет свой вид в зависимости от состояния.

Рис.8 Пассивное состояние

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

Нужна ли валидация

Валидация - это проверка кода на соответствие установленным стандартам. Различают валидацию на корректность кода HTML и CSS. При этом понятно, что в одном случае проверяется HTML-код, в другом код CSS.

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

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

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

А теперь перейдем к непосредственной проверке валидности кодов, сначала HTML, затем CSS.

Как проверять на валидность HTML-код

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

Здесь рассмотрим самый простой и наиболее распространенный вариант проверки на валидность - это использование сайта "W3C Консорциум", который при поддержке разработчиков браузеров разрабатывает спецификации кодов веб-страниц.

Для проверки кода HTML достаточно перейти по ссылке https://validator.w3.org/ , где откроется страница с полем ввода адреса проверяемой страницы.

скриншот 51

После нажатия кнопки "Check" получим результат проверки.

В данном случае код HTML валидный, но имеется рекомендация использовать атрибут lang со значением "ru" , так как на странице используется русский язык.

Атрибут lang предназначен для правильного отображения браузерами некоторых символов, например кавычек, в зависимости от используемого языка. Поэтому, совсем нелишним будет нам его включить в код HTML. И сделаем это в теге html для того, чтобы этот атрибут смог действовать на весь документ.

Как сделать это дополнение, показано в следующей таблице.

"ru" >

. . .

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

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

На скриншоте показан последний вариант, когда код веб-страницы скопирован непосредственно в форму для проверки.

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

Как проверять на валидность CSS-код

Мы рассмотрели проверку валидации HTML-кода. Проверка кода CSS проходит в точно таком же порядке. Только при этом нужно использовать другую страницу валидатора, которая для такого случая находится по адресу http://jigsaw.w3.org/css-validator/ .

Откроем ее и также как в предыдущий раз введем адрес проверяемой страницы, после чего нажмем кнопку "Check".

Результат этой проверки приведен на скриншоте.

Как видно, наш CSS-код полностью соответствует спецификации без каких-либо ошибок, что является хорошим результатом.

Порядок остальных способов проверки для этого случая полностью совпадает с подобными проверками для HTML-кода. Поэтому повторяться здесь не будем и на этом закончим рассмотрение проверок на валидацию.

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

А, займемся мы этим сразу после Новогодних праздников.

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

Исходные файлы сайта

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

В последнее время я получила несколько вопросов от пользователей, касающихся валидности моих тем и валидации вообще. В этом посте хочу ответить на них.

Что такое валидность?

Считается, что валидность кода - это единая, универсальная характеристика любого кода.
На самом деле, валидность это соответствие html кода документа определенному своду правил, указанному в доктайпе или подразумеваемому в HTML5 .
То есть, валидность - понятие относительное, поскольку правила бывают разные, и требования у них тоже.
Чтобы было понятнее, приведу пример, который я нашла на сайте css-live.ru :

К строительству жилых домов и атомных электростанций применяются разные СНиПы (строительные нормы и правила), поэтому документ, валидный по одному своду правил, может быть не валидным по другому (хороша была бы АЭС, построенная по нормативам жилого дома!).

Доктайп обычно указывает на документ, по которому планируется валидация html, но может быть выбран из прагматических соображений для выбора оптимального режима браузеров.
XHTML5 может вообще не иметь доктайпа, но быть валидным.

Валидация - что это?

Простыми словами, валидация - это процесс проверки кода и приведения его в соответствие с выбранным доктайпом (DTD).

Как проверяется валидность?

Валидность HTML кода проверяется инструментом, который называется валидатором.
Самый известный валидатор w3c - https://www.w3.org .
Валидатор w3c производит несколько проверок кода.
Главные из них :

1. Проверка на наличие синтаксических ошибок:
   Пример c habrahabr.ru/post/101985 :
   является корректным синтаксисом, несмотря на то, что является недопустимым HTML-тэгом
   Так что проверка синтаксиса является минимально полезной для написания хорошего HTML-кода.
2. Проверка вложенности тэгов :
   В HTML документе тэги должны быть закрыты в обратном порядке относительно их открытия. Эта проверка выявляет незакрытые или неправильно закрытые теги.
3. Валидация html согласно DTD :
   Проверка того, насколько код соответствует указанному DTD - Document Type Definition (доктайпу). Она включает проверку названий тэгов, атрибутов, и «встраивания» тэгов (тэги одного типа внутри тэгов другого типа).
4. Проверка на наличие посторонних элементов :
   Она обнаружит все, что есть в коде, но отсутствует в доктайпе.
   Например, пользовательские тэги и атрибуты.

Для проверки валидности CSS кода существует валидатор css - http://jigsaw.w3.org/css-validator .
Валидность кода - это результат механической проверки на отсутствие формальных ОВ, согласно указанного свода правил.
Нужно понимать, что валидация - инструмент, а не самоценность.
Верстальщики с опытом обычно знают, где можно нарушить правила валидации HTML или CSS, а где нет, и чем грозит (или не грозит) та или иная ошибка валидации.
Примеры того, когда не валидный код делает сайт:

• более удобным и быстрым - пользовательские атрибуты для Javascrip/AJAX или
• SЕО оптимизированным - разметка ARIA.

Понятно, что в валидности ради валидности нет никакого смысла.
Как правило, опытные верстальщики придерживаются следующих правил:
- В коде не должно быть грубых ошибок.
- Незначительные можно допустить, но только по обоснованным причинам.
В отношении допустимости ошибок валидации html/CSS:

Ошибки валидации (ОВ) можно разделить на группы:

• ОВ в файлах шаблона:
  Их не сложно найти и исправить.
  Если, какие то из мелких ошибок помогают сделать сайт более функциональным или быстрым, их можно оставить.
• ОВ в сторонних скриптах, подключенных на сайте:
  Например, виджет Вконтакте, скрипт Твиттера или видео-файлы с ютуб.
  Исправить их никак не удастся, поскольку эти файлы и скрипты находятся на других сайтах и у нас нет к ним доступа.
• CSS-правила, которые валидатор не понимает:
  Валидатор проверяет соответствие кода сайта определенной версии HTML или CSS.
  Если вы использовали в шаблоне правила CSS версии 3, а валидатор проверяет на соответствие версии 2.1, то все правила CSS3 он будет считать ошибками, хотя они таковыми не являются.
• ОВ, которые поневоле приходится оставлять на сайте, чтобы получить нужный результат. Например:
  • теги noindex. Они не валидны, но очень нужны и с этим приходится мириться.
  • хаки. Чтобы получить корректное отображение сайта в некоторых браузерах, иногда, приходится использовать хаки - код, который понимает только определенный браузер.
• Ошибки самого валидатора.
  Часто он не видит каких то тегов (например, закрывающих) и сообщает об ОВ там, где ее нет.

Получается, что на работающем сайте практически всегда будут какие-то ОВ.
Причем, их может быть очень много.
Например, главные страницы Google , Яндекса и mail.ru содержат по несколько десятков ошибок.
Но, они не ломают отображение сайтов в браузерах и не мешают им работать.
Все написанное выше относится и к моим темам.

В сложных темах есть:

• WordPress функции (например the_category()) , которые дают невалидный код.
• Вывод видео с видеохостингов, например, с YouTube, а в коде YouTube очень много ОВ, на которые ни вы, ни я не можем влиять.
• Кнопки социальных сетей, которые подключаются при помощи скриптов этих сетей и содержат ОВ.
• Правила CSS3 и HTML5, которые валидаторы старых версий считают ошибками.
  В то же время, валидаторы версий CSS3 и HTML5 считают ошибками старые правила:).
• Иногда, чтобы добиться корректного отображения в браузере Internet Explorer или старых версиях других браузеров приходится использовать, так называемые хаки - код, который понимает только определенный браузер, чтобы написать правила отображения сайта именно для этого браузера.

В итоге получить полностью валидный код можно только при верстке очень простых тем, т.е. тем, которые содержат минимальное количество функционала.
После окончания верстки любой своей темы я всегда проверяю ее валидатором и исправляю все ОВ, которые можно исправить без потери работоспособности темы.
Т.е., если стоит выбор между работающим функционалом и валидностью - я выбираю функционал.
Если вы верстаете свои темы, советую поступать так же.
С моей точки зрения (а также, точки зрения большинства верстальщиков) отношение к валидации html/CSS, как к истине в последней инстанции ошибочно. В обязательном порядке нужно исправлять только те ОВ, которые:
- мешают браузеру корректно отобразить страницу (незакрытые и неправильно вложенные теги).
- замедляют загрузку страницы (неправильно подключенные скрипты).
- можно исправить, не нарушая работоспособность темы.
Надеюсь, я ответила на все вопросы о валидации.

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

Проверить URI

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

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

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

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

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

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

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

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

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

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

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

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

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

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