01
Ориентируйтесь по вводу
Пример содержит пользовательское свойство и @media. Номера в списке относятся к исходнику, даже если форматирование добавило строки.
HTML / CSS Dev Tools
форматтер CSSСохраняйте исходник перед глазами
Форматирование, сжатие и проверка запускаются вручную. После изменения исходника старый результат нельзя экспортировать.
форматтер CSS
CSS обрабатывается в этой вкладке, без загрузки и сохранения истории.
Навигация по правилам
Запустите действие, чтобы увидеть селекторы и @ правила.
Введите CSS и выберите действие.
Форматирование CSS онлайн помогает разобрать сжатый файл, где трудно заметить повторное свойство или границы медиазапроса. Форматтер CSS расставляет отступы, сохраняя порядок селекторов и объявлений; исходник и результат остаются рядом.
Для передачи меньшего файла доступна минификация CSS, а проверка CSS помогает найти незакрытый блок. Форматтер CSS каждый раз работает с исходным текстом, а не с предыдущим результатом.
Почему форматтер CSS оставляет исходник видимым
Читаемый вывод вместе с точными строками источника.
Сохранить порядок каскада
Форматтер CSS оставляет повторные свойства и комментарии на месте. Он не сортирует объявления, поэтому видно, какое более позднее значение перекрывает раннее.
Перейти к нужному правилу
Список селекторов и @ правил показывает исходные номера строк. Нажатие переносит курсор в текст, а ошибка дополнительно указывает столбец.
Проверяйте исходные строки
02
Выберите действие явно
По умолчанию используются два пробела; доступны четыре и табуляция. Сжатие и проверка снова читают ввод, а не предыдущий вывод.
03
Экспортируйте свежий результат
Изменение текста или отступа блокирует копирование и скачивание. Запустите действие заново; Ctrl/Cmd+Enter выполняет форматирование.
Читать, сжимать и находить правила
Читаемая разметка
CSS-форматтер раскрывает вложенные блоки, сохраняя комментарии и исходную последовательность объявлений.
Осторожное сжатие
Убираются необязательные пробелы и обычные комментарии. Правила не объединяются, цвета и единицы не переписываются.
Переход по селекторам
Селекторы и @ правила перечислены по строкам исходника. Длинный список открывается по 50 элементов без обрезания экспорта.
Границы проверки синтаксиса
- Не тестирует браузерную поддержку
- Успешный разбор структуры не означает, что каждое свойство или селектор работает во всех целевых браузерах.
- Только стандартный CSS
- Форматтер CSS не понимает переменные и миксины SCSS или Less. Сначала скомпилируйте исходный файл в CSS.
- Не меняет логику каскада
- Форматирование сохраняет комментарии и порядок; сжатие удаляет обычные комментарии и пробелы, но не сортирует и не объединяет правила.
- Не видит проект целиком
- Инструмент не загружает URL и не сохраняет историю. Без HTML и других таблиц стилей он не покажет фактический вид страницы.
Вопросы о форматтер CSS
Сколько на самом деле экономит минификация?
Экономия зависит от пробелов и комментариев во входном файле. Панель показывает размер до и после в байтах UTF-8 именно для вашей строки.
Меняет ли минификация поведение стилей?
Здесь она не переставляет объявления и не объединяет правила. Всё же проверьте итоговый файл на реальной странице перед публикацией.
Поддерживаются ли SCSS и Less?
Нет. Сначала преобразуйте синтаксис препроцессора в стандартный CSS, затем используйте форматирование или проверку.
Почему мой CSS отклоняется?
Проверка находит структурную ошибку и показывает исходные строку и столбец. Исправьте код самостоятельно; автоматической починки здесь нет.
Как привести CSS-файл к виду с отступами?
Вставьте содержимое и запустите форматирование. Выберите два или четыре пробела либо табуляцию; исходник останется в левой колонке.
Остались вопросы?
Проверьте исходный стиль
Вернитесь в форматтер CSS, найдите исходную строку и скачайте только свежий результат.
Форматирование и сжатие не перезаписывают исходный CSS.