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