CSS-валидатор: как найти ошибки в таблице стилей и не сломать вёрстку

Стили не применяются, но непонятно почему. Или вёрстка ломается только в одном месте, и нужно найти ошибку в большом CSS-файле. Или после рефакторинга остались пустые правила и повторы, которые хочется убрать. CSS-валидатор проверяет таблицу стилей: незакрытые скобки, строки и комментарии, объявления без двоеточия или точки с запятой, неизвестные свойства, недопустимые значения и селекторы, ошибочные медиазапросы, @import не на своём месте, пустые правила и повторы. Поддерживаются вложенные правила (CSS Nesting), а всё выполняется в браузере.

В этой статье разберём, какие ошибки находит валидатор, почему результат зависит от браузера, когда повтор свойства — не ошибка и почему Sass и Less не проверяются.

Что умеет валидатор

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

Результат показывает замечания с номером строки и столбца — удобно исправлять. Отдельно отмечаются конструкции, через которые в старых браузерах выполнялся код.

Всё выполняется в браузере: введённые данные никуда не отправляются.

Ошибки, которые находит валидатор

Инструмент проверяет синтаксис и корректность конструкций.

Почему результат зависит от браузера

Это важная особенность. Свойства и значения проверяет движок вашего браузера — так же, как он будет применять стили.

Это значит:

• Новое свойство, которое браузер ещё не знает, будет отмечено как неизвестное. Хотя в других браузерах оно работает.
• Результат может отличаться в разных браузерах и версиях.
• Чтобы проверить код для старых браузеров, откройте валидатор в них.

Это не ошибка инструмента, а его подход: он проверяет так, как стили будет применять конкретный браузер.

Повтор свойства: ошибка или совет

Повтор свойства бывает разным.

Пример запасного значения:

.card {
  background: #ccc;
  background: linear-gradient(...);
}

Старый браузер возьмёт #ccc, новый — градиент. Это осознанный приём, поэтому повтор с другим значением отмечается как совет, а не как ошибка.

CSS Nesting

Валидатор поддерживает вложенные правила (CSS Nesting) — возможность писать вложенные селекторы без препроцессоров.

.card {
  display: flex;
  &__title {
    font-weight: bold;
  }
}

Это современная возможность CSS, и валидатор её понимает. Если бы он не поддерживал вложенность, такие правила считались бы ошибками.

Конструкции, через которые выполнялся код

Отдельно валидатор отмечает конструкции, через которые в старых браузерах выполнялся код. Это исторические уязвимости: например, expression() в старом IE или javascript: в url().

Такие конструкции сегодня не работают в современных браузерах, но если код будет открываться в старых — это риск. Валидатор отмечает их, чтобы вы могли убрать или заменить.

Почему Sass и Less не проверяются

Валидатор работает только с CSS. Переменные, примеси и вложенность препроцессоров он посчитает ошибками.

Если вы пишете на Sass или Less, сначала компилируйте в CSS, затем проверяйте.

Зачем проверять CSS

Ограничения валидатора

• Зависит от браузера. Новые свойства могут быть отмечены как неизвестные.
• Только CSS. Sass и Less не проверяются.
• Не заменяет визуальную проверку. Валидатор находит синтаксические ошибки, но не оценивает, как стили выглядят.
• Лимит 500 000 символов. Очень большие файлы нужно проверять частями.

Как пользоваться: пошагово

1. Вставьте CSS-код.
2. Нажмите «Проверить».
3. Исправьте замечания: у каждого указаны строка и столбец.

Типичные ошибки

• Путать CSS с Sass или Less. Валидатор проверяет только CSS. Препроцессоры нужно компилировать до проверки.
• Считать новые свойства ошибкой. Браузер может не знать новое свойство, хотя в других браузерах оно работает.
• Игнорировать повтор с другим значением. Это может быть осознанный приём для старых браузеров, но стоит понимать, зачем он нужен.
• Оставлять пустые правила и повторы. Они увеличивают размер файла и усложняют чтение.
• Забывать про медиазапросы. Ошибка в условии медиазапроса ломает адаптивность.
• Проверять только синтаксис и забывать про визуальную проверку. Валидатор не оценивает, как стили выглядят.

Вопросы и ответы

Почему результат зависит от браузера?

Свойства и значения проверяет движок вашего браузера — так же, как он будет применять стили. Новое свойство, которое браузер ещё не знает, будет отмечено как неизвестное. Чтобы проверить код для старых браузеров, откройте валидатор в них.

Ошибка ли повтор свойства?

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

Проверяются ли Sass и Less?

Нет, только CSS. Переменные и примеси препроцессоров валидатор посчитает ошибками.

Поддерживается ли CSS Nesting?

Да, вложенные правила поддерживаются. Валидатор понимает конструкцию с &.

Что значит «конструкции, через которые выполнялся код»?

Исторические уязвимости вроде expression() в старом IE или javascript: в url(). В современных браузерах они не работают, но в старых — риск.

Почему ошибка указывает на строку и столбец?

Так удобнее исправлять: вы сразу видите, где именно проблема, и не ищете её по всему файлу.

Итог

CSS-валидатор — инструмент для проверки таблицы стилей: синтаксис, свойства, значения, селекторы, медиазапросы, @import, пустые правила и повторы. Он поддерживает CSS Nesting, отмечает конструкции, через которые в старых браузерах выполнялся код, и показывает строку и столбец для каждого замечания. Помните, что проверка зависит от браузера, а Sass и Less нужно компилировать до проверки, — и стили будут работать предсказуемо.