Форматировщик CSS — бесплатно
Форматируйте минифицированный CSS с единообразными отступами или минифицируйте его. Дополнительная сортировка свойств по алфавиту для предсказуемых различий.
Перетащите файл сюда или нажмите для выбора
CSS · обрабатывается на вашем устройстве
или нажмите Ctrl+V, чтобы вставить из буфера обмена
Результат появится здесь…Частые применения
- Отладка CSS производстваПросмотрите минифицированный CSS с рабочих сайтов в читаемом формате, чтобы найти и сделать инженерию обратного хода стилей.
- Обеспечение согласованности стилей CSS командыЗапустите CSS, представленный командой, через согласованный красивый форматер, чтобы дифы касались содержания, а не форматирования.
- Форматирование CSS с префиксом поставщикаCSS с префиксом поставщика (вывод autoprefixer) часто содержит множество вариантов -webkit-, -moz-, -ms-. Отформатируйте для проверки.
- Учитесь у профессионального CSSИзучите CSS из известных систем проектирования, форматируя их скомпилированный вывод.
- Форматирование CSS для отчетов об ошибкахПри подаче отчета об ошибке CSS отформатированный CSS гораздо проще читать и понимать рецензентам.
Как это работает
Этот инструмент форматирует CSS с помощью написанного вручную рекурсивного парсера, встроенного прямо в страницу — без сторонней библиотеки, без обращения к серверу. Парсер проходит по вашему CSS посимвольно, корректно обрабатывая строки в кавычках, значения url(), вложенные at-правила и комментарии, которые запутали бы более простые подходы на основе регулярных выражений.
- 1Токенизация на уровне символовФункция walkCss сканирует необработанный ввод по одному символу за раз, отслеживая состояние кавычек и глубину скобок, так что точки с запятой или фигурные скобки внутри url(), строковых значений или комментариев никогда не принимаются за структурные разделители.
- 2Разделение блоков и декларацийКогда сканер находит открывающую фигурную скобку верхнего уровня, он извлекает прелюдию (селектор или ключевое слово at-правила) и рекурсивно обрабатывает тело блока — которое само может содержать вложенные правила (@media, @supports, нативная вложенность CSS), обрабатываемые на более глубоком уровне рекурсии.
- 3Сортировка свойств и отступыДекларации внутри каждого блока собираются в серию, затем опционально сортируются по алфавиту по имени свойства перед выводом с выбранной шириной отступа (2 или 4 пробела). Режим минификации полностью пропускает пробелы и удаляет комментарии.
- 4Мгновенный вывод в браузереРезультаты появляются по мере ввода через хук useMemo — ничего никуда не отправляется. Отформатированный или минифицированный CSS можно скопировать в буфер обмена или скачать как файл .css, а панель показывает разницу в размере по сравнению с оригиналом.
Похожие инструменты
Форматировщик и минификатор HTML
Форматируйте или минифицируйте HTML с правильными отступами вложенности. Сохраняет содержимое внутри блоков <pre>, <script>, <style>.
Форматтер SQL
Форматируйте SQL-запросы с правильными отступами, настраиваемым регистром ключевых слов и переносами строк на основных предложениях. Работает с любым диалектом SQL.
Минификатор и форматировщик CSS
Минифицируйте CSS для уменьшения размера файла или форматируйте минифицированный CSS для читаемости. Мгновенно, в браузере.