4 июня 2010

Проверяем таблицу стилей CSS на ошибки

CSS validation service

Сегодня в разделе wordpress для начинающих рассмотрим сервис проверки таблиц стилей CSS, его еще называют CSS validator. Перед началом работы советую вам загрузить для использования редактор Notepad++.
Если вы еще не знакомы с правилами CSS, то рекомендую ознакомится с основами.

А если вы уже знакомы с CSS, то скорее всего уже вносили изменения-дополнения в файл CSS. Не исключено, что там могут содержаться ошибки. Хотя и в исходном коде шаблона возможны ошибки.
Итак сервис CSS validation — http://jigsaw.w3.org/css-validator/. Если страница загрузилась не в русской кодировке, то посмотрите самое верхнее меню для выбора языка. Всего есть три закладки:

  • для проверки документа по адресу
  • для проверки файла с локального компьютера
  • и для проверки CSS прямо в процессе набора

Нас сейчас интересует первая вкладка — Проверить URI. Вводим адрес сайта и в дополнительных возможностях выбираем профиль CSS 2.1 (есть возможность выбрать CSS3). И жмем кнопку проверить:

CSS validation service

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

CSS validation service

Для этого в редактор Notepad++ загружаем файл с таблицей стилей и по номеру строки находим ошибку. Для примера возьмем строку 858

858  .related_post a:hover Ошибка значения : color  66 не является значением color : 66  66

В таблице видим правило где код цвета не предваряет знак #

.related_post a:hover {
        color: 000066;
	text-decoration: none;
}

Меняем ошибочную строку на

color: #006;

теперь смотрим первую ошибку:

366  	 div#commentform  	 Ошибка разбора  align:left

в таблице находим правило с ошибкой в строке 366:

div#commentform {
background:#333 url(/press-tsentr/images/comment-form-bg.jpg) 22px 21px no-repeat;
text-
align:left;
margin:0;
border:1px solid #d4d4d4;
padding:59px 17px 5px 25px;
}

в этом случае оказался лишним перенос строки, исправляем:

text-align: left;

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

Статьи по теме
Статья оказалась полезной? Подпишись на RSS рассылку или следуй за мной на твиттере @wpstarter или по этой ссылке wpstarter

Комментариев: 2

Вы можете следовать любому комментарию через RSS 2.0 feed.

Вы можете оставить комментарий или trackback с вашего сайта.

  1. Может косяк в цсс создавать следующую проблему: у меня на блоге в хроме и файрфоксе при клацании мышкой на окно комментария курсор прыгает на окно куда вписывать сайт, т.е. написать сообщение можно, только если табом переключится с окна «сайт» на окно «коммент».
    Смотрел код в теме комментс.пхп, обычный, как и в других темах, с другими темами все хорошо. В чем косяк, подскажи??

Оставьте комментарий

Обведите фигуру по линии:

Ставим WordPress на локальном копьютере