Command Palette

Search for a command to run...

МИ

Миниматор CSS и улучшитель

Минимизировать CSS, чтобы сократить размер файла или украсить миниатюрные таблицы стилей для отладки

Output will appear here...
Category:minify
Mode:Offline
Version:1.0.0
Access:Free

Что такое CSS Minifier & Beautifier?

CSS Minifier & Beautifier interface on Toolz.dev - Minify CSS to cut file size or beautify minified stylesheets for debugging

CSS Minifier & Beautifier - это двухсторонний инструмент стилей: он сжимает CSS, удаляя все, что не нужно браузеру - комментарии, пробелы, избыточные точки с запятой, длинные шестнадцатеричные цвета и единицы с нулевыми значениями - и он может поменяться процессом, расширяя однострочный производственный пакет обратно в читаемые, надлежащие правила с отступом. Каждый байт, который вы удаляете из таблицы стилей блокирования рендеринга, представляет собой байт, который браузер загружает и анализирует раньше, который напрямую питает метрики жизненно важных показателей Core Web, такие как First Contentful Paint и наибольшая содержательная краска.

Минфактор намеренно консервативен. Он полностью осведомлен о строковых литералах, значениях url() и выражениях calc(), поэтому никогда не удаляет пробел, от которого зависит Calc(100% - 20px), никогда не переписывает цветоподобный текст внутри строки содержимого и никогда не прикасается к интервалу, который отличает div : hover от div: hover. На типичных рукописных таблицах вы можете ожидать уменьшения размера на 25–40% до GZIP; в сочетании с GZIP или BROTLI на проводе минимизация по-прежнему брилирует значимый фрагмент, потому что сжатие лучше работает при повторяющихся и без комментариев.

В вашем браузере все работает на 100% на стороне клиента. Ваш CSS никогда не загружается, не регистрируется или сохраняется на любом сервере, что означает, что вы можете безопасно вставлять проприетарный системный код, невыпущенные стили продукта или работу с клиентом. Он также работает автономно после загрузки страницы - полезен, когда вам нужен быстрый мини-пропуск без подключения полного POSTCSS или конвейера ESBuild.

Минификация здесь — это синтаксический зависящий, а не набор правил «найти-замена», что делает его безопасным для запуска в производственных таблицах: пробелы внутри строк, значения url() и селекторы атрибутов остаются в покое, поскольку удаление будет изменено, что соответствует CSS. Комментарии, начинающиеся с восклицательного знака, хранятся, что является соглашением для заголовков лицензий, которые должны выжить в сборке.

Как использовать минимальный и улучшающий CSS?

1

Вставьте свой CSS

Переместите свою таблицу стилей во входную область — одно правило, файл компонента или полный производственный пакет. Принимаются как форматированные, так и уже минифельные CSS.

2

Выберите «Минифицировать» или «Украсить»

Нажмите «Мини», чтобы сжать для производства, или украсить, чтобы развернуть миниатюрный код в одну строку с пустой строкой между правилами. Для Beautify сначала выберите предпочитаемый вмятин.

3

Проверьте сберегательный значок

Инструмент сообщает точное изменение размера до/после и процентное изменение (например, «12,4 КБ → 8,1 КБ, −34%»), поэтому вы точно знаете, что преобразование купило вам перед отправкой.

4

Скопируйте или скачайте

Скопируйте результат в буфер обмена одним щелчком мыши или загрузите его в виде файла .css, готовых к выходу в ваш вывод сборки или CDN.

Основные характеристики

Безопасная, синтаксическая минимизация

Уважает строковые литералы, значения url() и интервалы calc() - он агрессивно сжимается, не повреждая допустимые CSS

Шестокно и нулевые укорочение

Переписывает #FFFFF на #FFF и от 0px до 0, где доказуемо безопасно, сжимая лишние байты за пределы удаления простого пробела

Сохранение комментариев с лицензией

Сохраняет /* Комментарии к баннеру нетронуты, поэтому заголовки библиотечных лицензий выживают при минимировании, соответствующее стандартному поведению инструмента сборки

Блокменник одним щелчком мыши

Расширяет минимизированные пакеты в читаемые правила с настраиваемыми 2, 4 или 8 пробелами для отладки производственных проблем

Frequently Asked Questions

CSS-минификация — это процесс удаления каждого символа, который браузеру не нужно визуализировать — комментарии, пробелы, разрывы строк, продольные точки с запятой — и сокращение безопасных значений, таких как #FFFFFF, до #FFF. В результате получается функционально идентичный CSS в меньшем количестве байтов, что загружается и анализируется быстрее. Поскольку таблицы стилей блокируют рендеринг, меньшие CSS улучшают такие показатели, как First Contentful Paint.

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!

css minifierminify csscss beautifiercss formattercompress csscss optimizerunminify cssreduce css file sizecss compressor