Анализатор CSS-переменных
Проверьте объявления CSS-переменных, ссылки var() и свойства без распознанного использования.
Запустить инструмент
Вставьте текст CSS, чтобы быстро проверить объявления пользовательских свойств и ссылки на них по коду. Инструмент находит объявления с именами вроде `--main-color`, извлекает их значения, считает вызовы `var(--main-color)` и выявляет объявления без совпадающей распознанной ссылки. В итоговом отчёте отображаются найденные объявления, общее число деклараций, число деклараций без ссылок и количество ссылок для каждого конкретного имени. Например, объявление `--gap: 12px;` сопоставляется со ссылкой `gap: var(--gap);`. Если объявление `--unused: red;` не встречается среди распознанных ссылок в тексте, оно попадает в отдельный список свойств без использования. Анализ учитывает только поддерживаемые шаблоны объявлений и ссылок с префиксом из двух дефисов. Инструмент не заменяет полный разбор каскадных таблиц стилей, проверку соответствия стандарту или глубокий семантический анализ. Чтобы увидеть результат, вставьте фрагмент стилей с нужными декларациями, запустите обработку и изучите показанные списки, счётчики и найденные соответствия.
Инструкция
- Вставьте CSS-код в поле «CSS».
- Проверьте, что объявление содержит два дефиса перед именем, двоеточие, значение и точку с запятой, например `--brand-color: #2563eb;`.
- Нажмите кнопку запуска анализа.
- Проверьте найденные объявления, общее число деклараций, количество ссылок по именам и список объявлений без распознанной ссылки.
- Учитывайте поддерживаемые шаблоны: результат не заменяет полный разбор или семантическую проверку CSS.
Примеры
- Вставьте `:root { --brand-color: #2563eb; --spacing-md: 16px; } .button { color: var(--brand-color); margin: var(--spacing-md); }`. В отчёте будут два объявления и распознанные ссылки на каждое из них.
- Вставьте `.card { --card-gap: 12px; --card-color: #222; gap: var(--card-gap); }`. Объявление `--card-color` появится в списке свойств без распознанной ссылки.
Частые вопросы
Что проверяет инструмент?
Инструмент извлекает распознанные объявления пользовательских свойств, считает ссылки `var()` по именам и отмечает объявления без совпадающей распознанной ссылки, не делая полный разбор CSS.
Какие CSS-переменные учитываются?
Учитываются имена, начинающиеся с двух дефисов, за которыми могут следовать буквы, цифры, подчёркивания и дефисы. После имени должны быть двоеточие, значение и точка с запятой. Значение обрезается по краям.
Как находятся свойства без ссылок?
Инструмент находит ссылки вида `var(--имя)`, подсчитывает их по имени и сопоставляет с объявлениями. Объявление без совпадающей распознанной ссылки попадает в отдельный список.
Что будет при пустом поле?
Если поле ввода пустое, в области результата появится сообщение об ошибке. Вставьте текст CSS с объявлениями пользовательских свойств и повторите запуск.