CSS Валидатор
Проверьте CSS на структурные и синтаксические ошибки — несбалансированные скобки и круглые скобки, неоканченные строки и комментарии, пустые блоки правил и свойства или значения, потерявшие свою пару. Не проверяет грамматику значений свойств CSS.
Ввод
Вывод
| Строка | Тип | Сообщение |
|---|---|---|
| No data yet | ||
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-validator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"cssInput": "body {\n color: #333;\n margin: 0;\n}\n"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-validator` tool (CSS Validator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-validator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS Валидатор — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что проверяет этот валидатор CSS?
Вставьте CSS и получите построчный отчет о структурных и синтаксических проблемах — о классе ошибок, который нарушает разбор, а не о классе, который производит неправильный цвет. В частности, он проверяет:
- Несбалансированные скобки (
{/}) — открытый блок правила, но никогда не закрытый, или стоящая отдельно закрывающая скобка без соответствующего открывателя. - Несбалансированные круглые скобки внутри значений, например
calc(100% - 10px, которому не хватает его закрывающей скобки). - Неоканченные строковые литералы — открывающая
'или"без соответствующего закрытия перед концом строки или концом файла. Строки CSS не могут охватывать несколько строк, если разрыв строки не экранирован обратной косой чертой. - Незавершенные блоки
/* comment */— открытие комментария без закрывающего*/. - Пустые блоки правил (
selector {}) — помечены как предупреждение, поскольку они технически являются допустимым CSS, но почти всегда остаток или мертвый код. - Свойство без значения (
color: ;) или значение без свойства (: red;).
Каждый результат указывает номер строки, является ли это ошибкой или предупреждением, и обычное сообщение. Если ничего из вышеперечисленного не найдено, вы получите единственный результат "Допустимый CSS — структурные проблемы не найдены".
Что оно НЕ проверяет
Это легкий структурный сканер, а не полный парсер CSS. Он не проверяет фактическую грамматику значений CSS — он не перехватит color: notacolor;, неверную единицу, неправильно написанное имя свойства или неподдерживаемое значение для конкретного свойства, потому что это требует знания полной и постоянно растущей спецификации CSS3 для каждого свойства. Для этого уровня проверки используйте DevTools вашего браузера (панель Styles исчезает и отмечает свойства/значения, которые он не распознает) или специальный линтер, такой как Stylelint.
Для кого это?
- Разработчики, ищущие недостающую
}или), которая молча нарушает остаток таблицы стилей. - Любой человек, вставляющий CSS из незнакомого источника (фрагмент, генерация искусственного интеллекта, копирование-вставка из документации), который хочет быструю проверку здравомыслия перед его использованием.
- Рецензенты кода, сканирующие пустые, вероятно, случайные блоки правил.
Как использовать
- Вставьте свой CSS в поле ввода — результаты обновляются в реальном времени при вводе.
- Прочитайте таблицу Строка/Тип/Сообщение: ошибки — это структурные разрывы, достойные исправления немедленно; предупреждения (такие как пустые блоки правил) стоит проверить, но не нарушат рендеринг.
- Скопируйте или загрузите результаты как CSV, если вам нужно их поделиться.
FAQ
Перехватит ли опечатку вроде bakground-color?
Нет — неизвестные имена свойств — это семантическая проверка, а не структурная. Браузер просто проигнорирует свойство, которое он не распознает; этот инструмент просто сообщит вам, когда сам CSS не может быть правильно проанализирован.
Почему он помечает пустой блок правила как предупреждение вместо ошибки?
selector {} — это допустимый CSS — браузеры его хорошо анализируют — но это ничего не делает, поэтому это почти всегда ошибка (забытое объявление или мертвый код, оставленный после редактирования).
Поддерживает ли это вложенный CSS или блоки @media?
Да — отслеживание скобок/круглых скобок/строк/комментариев работает на любой глубине вложенности, поэтому @media, @supports и вложенные блоки селекторов все проверяются одинаково.
Конфиденциальность
Проверка происходит полностью в вашем браузере. Ваш CSS никогда не загружается и не отправляется никуда.