Проверить валидность стилей CSS, найти ошибки, увидеть предупреждения и исправить косяки поможет сервис от буржуев https://jigsaw.w3.org/css-validator/#validate_by_uri+with_options. На нём проверяют код CSS за пару минут, после чего останется внести правки и избежать кривого отображения сайта.
Почему важна проверка CSS? Сейчас боты отлично читают файлы стилей и кривятся при наличии там ошибок. Это раз. Ошибки CSS могут привести к некорректному отображению сайта, отсюда растут ногу и у плохого ПФ. Отсюда проблемы с ранжированием. Это два.
Возможности сервиса
На CSS Validation Service выполняется проверка CSS кода:
- По Url,
- Из загруженного файла,
- Из набранного текста.
По результатам проверки видны ошибки и предупреждения, а также можно посмотреть проверенный код с указанными замечаниями.
Проверка по Url
При проверке кода по url введите полный адрес файла стилей и установите дополнительные условия работы (необязательно):
- Профиль,
- Виды предупреждений,
- Тип ошибок,
- Среду проверки.
Профили в наборе: CSS 1-3, SVG, теле и мобильный, в пункте «среда» выбирайте все, предупреждения: «обычный отчёт».
Нажимаете «проверить», после чего видны отдельно ошибки, предупреждения и код проверенного файла.
Проверка текста и файла CSS
При проверке набранного текста дополнительно появляется условие «тип документа: CSS или HTML), пометьте нужное и вставьте код в окно проверки. Открывайте CSS-файл через ftp, копируйте код и вставляйте в окно.
При проверке на валидность загруженного файла сначала загрузите с хостинга файл на компьютер, после укажите его и нажмите проверить.
Эти два способа удобней, чем проверка по url.
Для справки – файлы CSS находятся в Joomla по пути public_html/templates/шаблон/css.
Результат проверки
После завершения проверки не советую тратить время на исправление предупреждений, займитесь ошибками. Как правило, ошибки происходят при обработке кода, который содержит лишние пробелы, не имеет закрывающихся кавычек или содержит некорректные значения. Для упрощения правки сервис указывает тип ошибки и строку, в которой она проживает.
Например:
a{margin:0;padding:3;font-size:103%;vertical-align:baseline;background:transparent;color:#06C;font-family:;}
Ошибка значения : font-family Ошибка разбора : font-family:; за ":" нет значения.
Также в этой же строке:
a{margin:0;padding:3;
После цифры "3" требуется указать px
Перед правкой файла обязательно сделайте бэкап и не ставьте цель избавиться от проблем с валидностью CSS до нуля и за один подход. Не спеша корректируйте код и получайте от работы удовлетворение. Сделав один этап, проверяйте файлы снова, так как можно не сократить, а увеличить количество ошибок (се ля ви или отсутствие опыта).