Проверка CSS

Проверка CSS на синтаксические ошибки, незакрытые блоки, неизвестные свойства и недопустимые значения по грамматике css-tree. Строка и столбец каждой проблемы.

Ввод CSS

Проверяет синтаксис, неизвестные свойства и недопустимые значения по грамматике css-tree. Пользовательские свойства и значения с var() не проверяются.

Работает полностью в вашем браузере. Ваши данные никуда не загружаются.

Что такое Проверка CSS?

Инструмент сообщает о структурных ошибках (незакрытые скобки, строки, комментарии), ошибках разбора, неизвестных свойствах, недопустимых значениях свойств и неизвестных @-правилах — каждую со строкой и столбцом. Проверки свойств и значений используют данные грамматики CSS из css-tree; это не сервис проверки CSS от W3C.

Как пользоваться Проверка CSS

Вставьте CSS в поле ввода.
Нажмите Проверить (результаты обновляются по мере ввода).
Прочитайте сводку и список ошибок и предупреждений.
Исправьте каждую проблему по указанным строке и столбцу.

Пример

Ввод

a { colr: red; color: bluee; }

Вывод

Errors: 2 · Warnings: 0
Line 1, column 5 Unknown property "colr"
Line 1, column 16 Invalid value for "color": bluee

Когда использовать Проверка CSS

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

Как работает Проверка CSS

Сканер проверяет баланс {} и () и закрытость строк и комментариев. Затем таблица стилей разбирается css-tree (входит в состав CSSO), который сообщает об ошибках разбора. Каждое объявление сопоставляется через lexer.matchDeclaration с грамматикой свойств css-tree: неизвестные свойства — ошибки, неизвестные свойства с вендорным префиксом (-moz-foo) — предупреждения, а значения, не соответствующие грамматике (например, margin с пятью значениями), — ошибки. Пользовательские свойства (--x) и значения с var(), env() или attr() статически проверить нельзя, они пропускаются.