Минификатор и форматировщик CSS — бесплатно
Минифицируйте CSS для уменьшения размера файла или форматируйте минифицированный CSS для читаемости. Мгновенно, в браузере.
Перетащите сюда файл .css или нажмите, чтобы выбрать
CSS · обрабатывается на вашем устройстве
или нажмите Ctrl+V, чтобы вставить из буфера обмена
Частые применения
- Минификация CSS для развертывания в производствоУменьшите размер файла CSS перед развертыванием в производство — более быстрая загрузка страниц и более низкие затраты на полосу пропускания.
- Визуализация минифицированного CSS для отладкиОтформатируйте сжатый или минифицированный CSS в читаемый код, чтобы вы могли проверять и отлаживать стили.
- Минификация CSS для шаблонов электронной почтыКомпактируйте CSS для HTML-шаблонов электронной почты, где размер файла и раздутие встроенных стилей имеют значение.
- Минификация CSS для тем WordPressУменьшите размер таблиц стилей пользовательской темы WordPress для лучших оценок PageSpeed.
- Визуализация CSS для проверки кодаОтформатируйте любой файл CSS в чистый, с отступами и читаемый код, готовый к проверке и сотрудничеству.
Как это работает
Этот инструмент использует написанный вручную токенизатор CSS без зависимостей, построенный полностью на JavaScript — без внешних библиотек, без обращений к серверу. Токенизатор классифицирует каждый символ как код, комментарий, строку в кавычках или значение url() перед применением любых преобразований, что предотвращает искажение содержимого строк, URI данных или выражений calc() правилами пробелов.
- 1Проход токенизацииВходной CSS сканируется посимвольно и разбивается на типизированные токены: сырые сегменты кода, комментарии /* ... */, строки в кавычках (сохраняя escape-последовательности) и блоки url(...). Это гарантирует, что преобразования на следующем шаге затрагивают только фактический синтаксис CSS — никогда содержимое строкового литерала или URI данных.
- 2Минификация или улучшение форматированияВ режиме минификации обычные комментарии удаляются (комментарии /*! license */ сохраняются), серии пробелов в токенах кода сворачиваются в одинарные пробелы, а пробелы рядом с пунктуацией вокруг { } : ; , > ~ удаляются. Пробелы вокруг + и - намеренно оставлены как есть, чтобы не сломать выражения calc(). В режиме улучшения форматирования код сначала минифицируется до чистой базовой линии, затем повторно токенизируется и повторно индентируется с отслеживанием глубины в два пробела и обнаружением двоеточия декларации, чтобы отличить двоеточия property: value от двоеточий селектора, таких как a:hover.
- 3Оценка размера GzipПосле создания вывода нативный API CompressionStream браузера используется для сжатия результата с помощью gzip и измерения получившегося количества байтов. Это даёт реалистичную оценку размера передачи, соответствующую тому, что отправил бы через сеть веб-сервер со сжатием gzip.
- 4Копировать или скачатьОбработанный CSS записывается в буфер обмена через API Clipboard, или скачивается как styles.min.css (режим минификации) или styles.css (режим улучшения форматирования) с использованием Blob с MIME-типом text/css. Процент уменьшения размера показывается вживую по мере ввода.
Похожие инструменты
Оптимизатор и минификатор SVG
Удаляйте метаданные, сворачивайте пробелы и округляйте десятичные дроби для значительного уменьшения размера SVG — типичное сокращение 30–70%. Визуальный предпросмотр проверяет сохранность изображения.
Форматировщик CSS
Форматируйте минифицированный CSS с единообразными отступами или минифицируйте его. Дополнительная сортировка свойств по алфавиту для предсказуемых различий.
Форматтер JSON
Форматируйте, проверяйте, минимизируйте и исследуйте данные JSON. Древовидное представление, подсветка синтаксиса и копирование одним щелчком мыши.