Проверка CSS: синтаксис, свойства, ошибки
«Проверка CSS» разбирает CSS с помощью css-tree и сообщает о синтаксических ошибках с позициями строки и столбца, продолжая после первой ошибки, чтобы можно было найти больше проблем. Она также помечает имена свойств, отсутствующие в таблице спецификации CSS, как вероятные опечатки, игнорируя при этом пользовательские свойства (--*) и вендорные префиксы. Просматривайте число правил, объявлений и @-правил вместе с результатами.
«Проверка CSS» — браузерная проверка синтаксиса CSS, разбирающая таблицы стилей с помощью css-tree. Она сообщает о синтаксических ошибках с позициями строки и столбца и продолжается после первой ошибки, чтобы можно было проверить дополнительные проблемы. Инструмент также помечает имена свойств, которых нет в таблице спецификации CSS, как вероятные опечатки, и показывает число правил, объявлений и @-правил.
Во время проверки CSS разбирается, а синтаксические проблемы сообщаются с их позициями. Имена свойств, отсутствующие в таблице спецификации CSS, помечаются, но пользовательские свойства (--*) и вендорные префиксы этой проверкой игнорируются. Поэтому валидатор помогает отличить вероятные опечатки от тех шаблонов имён свойств, которые он пропускает по задумке.
CSS описывает правила стилей и объявления, а валидатор проверяет, может ли предоставленная таблица стилей быть разобрана и есть ли имена свойств в таблице спецификации CSS. Использование проверки CSS помогает разработчикам исследовать ошибки до того, как CSS дойдёт до парсера, падающего во время выполнения, проверять сгенерированный вывод и находить проблемы без ручного поиска по файлу.
«Проверка CSS» работает полностью в вашем браузере: ввод обрабатывается на вашем собственном устройстве и не отправляется на сервер. Она работает офлайн после загрузки страницы, так что можно пользоваться ею без соединения после этого. Она бесплатна, а разработчики и DevOps-инженеры могут использовать её для проверки таблиц стилей и изучения результатов валидации.
Шаг 1: Вставьте или перетащите ваш CSS в инструмент. Включите таблицу стилей, которую хотите проверить.
Шаг 2: Запустите проверку CSS. Инструмент разбирает ваш ввод и сообщает о найденных синтаксических ошибках.
Шаг 3: Проверьте позицию каждой сообщённой ошибки. Используйте детали строки и столбца, чтобы найти соответствующий фрагмент вашего CSS.
Шаг 4: Проверьте предупреждения о свойствах и счётчики. Инструмент помечает нераспознанные имена свойств и показывает итоги по правилам, объявлениям и @-правилам.
Пример использования: Проверьте CSS-файл, прежде чем он дойдёт до парсера и упадёт во время выполнения. Валидатор помогает заметить синтаксические проблемы раньше.
Пример использования: Найдите строку и столбец синтаксической ошибки вместо ручной бисекции файла. Проверьте сообщённые позиции, чтобы сузить область поиска.
Пример использования: Убедитесь, что вывод другого инструмента — валидный CSS, а не просто правдоподобный текст. Парсер сообщает о найденных синтаксических ошибках.
Пример использования: Ищите вероятные опечатки в именах свойств таблицы стилей. Валидатор помечает имена, отсутствующие в таблице спецификации CSS, игнорируя пользовательские свойства и вендорные префиксы.
Пример использования: Проверяйте число правил, объявлений и @-правил после генерации или редактирования CSS. Итоги дают быстрый обзор содержимого таблицы стилей.
Пример использования: Проверьте таблицу стилей с пользовательскими свойствами или вендорными свойствами. Они игнорируются проверкой имён свойств, поэтому не помечаются как неизвестные свойства.