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

Если HTML отвечает за содержание страницы, то CSS (Cascading Style Shects – каскадные таблицы стилей) это содержание форматирует, приводит страницу к окончательному виду. Помните, что только валидность CSS и HTML вместе, а не по отдельности, дают гарантию корректного отображения страниц блога во всех современных браузерах, так называемую кросс-браузерность.

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

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

На странице сервиса видим три вкладки для проверки по:

  • URL;
  • Загруженному файлу;
  • Набранному тексту.

Здесь все понятно. После ввода URL главной страницы своего блога и нажатия на кнопку "Проверить", я получил следующую картину:

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

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

Корректный CSS

Далее, через поиск файл менеджера Total Commander (как пользоваться этим инструментом я уже писал в статье "Внешние ссылки"), по ftp,  определяем, что ошибка значения кроется в файле options-contactform.php плагина контактной формы.

Открываем файл для редактирования в текстовом редакторе Notepad++. Через поиск находим ошибочный код и заменяем его валидным.

ispravlenie-na-Korrektnihyj

Еще один наглядный пример. Сервис выдал четыре предупреждения.

Одинаковые цвета в CSS

В этом случае все гораздо проще. Сервис выдал ссылку на файл, содержащий не валидный код и еще в придачу номер строки с этим кодом. По ftp открываем файл для редактирования в Notepad++. Цвет для background-color меняем с white , к примеру, на green. На дизайн блога это не повлияет, а предупреждение уйдет.

highslide

Если еще не слишком утомил, приведу последний, короткий, но интересный пример. Одна из ошибок крылась в самом style.css шаблона сайта.

Ошибка значения цвета в CSS

Сгенерированный, валидный CSS код ничем не отличался от кода с ошибкой (значение на строке 427 файла style.css). Оказалось все очень просто. В значении цвета #202С0С две буквы С были напечатаны не в латинице, а в кириллице :-).

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

Валидный код

Теперь валидность CSS кода вашего проекта в порядке.

С уважением, Роман Ваховский.

Хороший человек всегда нажмет на кнопку!
Комментарий > Благодарность > Ссылка на секретную страницу блога

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Поиск по блогу

Все права защищены © 2011-2016. WordPress-book.ru

Копирование материалов разрешено только с размещением открытой обратной ссылки на источник.