Форматировщик CSS
Форматируйте CSS, сохраняя селекторы, декларации, комментарии, значения и структуру at-rule.
Make CSS easier to review
Сжатый CSS скрывает селекторы, декларации, комментарии и длинные значения в одной строке. Инструмент показывает читаемый вид.
Форматирование меняет представление и не доказывает валидность, эффективность, доступность или совместимость. Сохраните исходник и diff.
Используйте пример с селекторами, декларациями, комментариями, custom properties, media queries и строками в кавычках.
Formatting is not CSS validation
CSS состоит из селекторов, деклараций, значений, комментариев, at-rules, функций, custom properties и блоков. Отступы показывают границы.
Форматтер упорядочивает пробелы и токены, но не подтверждает стандарты, специфичность, доступность, производительность или совместимость сборки.
Значения могут содержать строки, URL, escapes, градиенты, переменные и расширения поставщика.
How to format CSS
- Вставьте полный stylesheet или поддерживаемый фрагмент.
- Проверьте селекторы, скобки, декларации, комментарии, custom properties, функции и at-rules.
- Сравните свойства, значения, кавычки, URL, переменные и порядок с источником.
- Запустите linter, build, проверки доступности и браузера.
- Удалите приватные URL, токены и пользовательские данные.
Formatting method
- Читает селекторы, декларации,
Читает селекторы, декларации, значения, комментарии, блоки, функции и at-rules.
- Добавляет строки и
Добавляет строки и отступы для просмотра правил и вложенных блоков.
- Сохраняет значения, строки,
Сохраняет значения, строки, URL, custom properties, комментарии и порядок источника.
Восстановление parser, dialect, расширения поставщика, комментарии, пробелы и ошибки нужно проверить на рабочем движке.
Read the formatted result
Успешный результат — читаемый CSS. Сверьте селекторы, декларации, значения, комментарии, блоки, функции и порядок с источником.
Ошибка не доказывает точную поддержку parser или recovery.
Проблемы браузера, linter или build отдельны; форматирование не является оптимизацией.
Распространённые ошибки
Отождествление отступов с валидацией может скрыть неверные значения, specificity или проблемы доступности.
Изменение custom property, строки, URL, escape или порядка меняет поведение.
Не считайте расширение поставщика одинаковым во всех toolchain.
Приватные URL, токены и пользовательские стили могут раскрыть данные.
Ограничения и особые случаи
Функция форматирует CSS и не гарантирует стандарты, lint, доступность, безопасность, производительность, совместимость или minify.
Проверяйте custom properties, at-rules, расширения, функции, escapes, комментарии и большие стили целевыми инструментами.
Не вставляйте секретные production-стили без разрешения.
Examples
Проверяет ли форматирование CSS?
Проверяет ли форматирование CSS?
Вставьте полный stylesheet или поддерживаемый фрагмент.
Успешный результат — читаемый CSS. Сверьте селекторы, декларации, значения, комментарии, блоки, функции и порядок с источником.
Меняется ли cascade?
Меняется ли cascade?
Проверьте селекторы, скобки, декларации, комментарии, custom properties, функции и at-rules.
Ошибка не доказывает точную поддержку parser или recovery.
Сохраняются ли значения?
Сохраняются ли значения?
Сравните свойства, значения, кавычки, URL, переменные и порядок с источником.
Проблемы браузера, linter или build отдельны; форматирование не является оптимизацией.
Сохраняются ли комментарии?
Сохраняются ли комментарии?
Запустите linter, build, проверки доступности и браузера.
Успешный результат — читаемый CSS. Сверьте селекторы, декларации, значения, комментарии, блоки, функции и порядок с источником.
Можно ли форматировать media query?
Можно ли форматировать media query?
Удалите приватные URL, токены и пользовательские данные.
Ошибка не доказывает точную поддержку parser или recovery.
Улучшает ли это производительность?
Улучшает ли это производительность?
Вставьте полный stylesheet или поддерживаемый фрагмент.
Проблемы браузера, linter или build отдельны; форматирование не является оптимизацией.
Frequently asked questions
Проверяет ли форматирование CSS?
Нет. Используйте parser, linter, build, доступность и браузерные тесты.
Меняется ли cascade?
Должны меняться только пробелы; сравните порядок и протестируйте.
Сохраняются ли значения?
Примеры сохраняют значения, строки, URL и функции; проверьте diff.
Сохраняются ли комментарии?
Примеры сохраняют комментарии; подтвердите на своём вводе.
Можно ли форматировать media query?
Пример показывает вложенный at-rule; подтвердите поддержку.
Улучшает ли это производительность?
Нет. Используйте profiling и целевую оптимизацию.
Исправляет ли неверный CSS?
Не предполагайте исправление; исправьте источник и проверьте.
Что делать после?
Проверьте diff, запустите linter и build, тесты доступности и браузера.