Прескочи към съдържанието
🛠️
Whiz Tools

Безплатен CSS Минификатор: Компресирайте и Оптимизирайте CSS Код Онлайн

Минифицирайте CSS код мигновено и намалете размера на файла до 40%. Безплатен онлайн CSS минификатор премахва празните места, коментарите и оптимизира синтаксиса за по-бърша производителност на уебсайта.

CSS Минификатор

Незабавно минифицирайте CSS код, за да намалите размера на файла с до 40% и подобрите скоростта на зареждане на уебсайта.

0 знака
0 знака

Относно CSS минификацията

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

  • Премахва коментари, интервали и нови редове
  • Елиминира ненужни точки и запетаи и нулеви единици
  • Оптимизира цветови стойности и декларации
  • Подобрява скоростта на зареждане на страницата и SEO класирането
Калкулатор за зареждане...
📚

Документация

Какво представлява минификаторът на CSS?

Минификаторът на CSS е инструмент, който намалява размера на файл с CSS (каскадни таблици със стилове), като премахва знаци, които не са необходими на браузърите. Той премахва коментари, излишни интервали и нови редове и съкращава някои често срещани конструкции, без да променя начина, по който изглежда страницата. В резултат се получава по-малък файл, който браузърът може да изтегли и анализира по-бързо.

Как работи минификацията на CSS

Уеб разработчиците пишат CSS с коментари, отстъпи и празни редове, защото те улесняват четенето и редактирането на кода. Браузърите игнорират цялото това форматиране. Минификаторът го изтрива заедно с няколко други байта, които нямат визуално предназначение, и оставя компактен файл, предназначен за използване в продукционна среда, а не за редактиране.

Този инструмент прилага следните промени:

  • Премахва коментарите. Всеки блок /* ... */ се изтрива.
  • Свива празните знаци. Последователностите от интервали, табулации и нови редове между правилата се свеждат до нищо или до един интервал, когато интервалът има значение (например между .parent и .child в селектор за низходящ елемент).
  • Премахва празните знаци около пунктуацията. Интервалите до {, }, :, ; и , се премахват.
  • Премахва излишните точка и запетая. Повтарящите се точка и запетая се свеждат до една, а последната точка и запетая преди затваряща } се премахва.
  • Съкращава шестнадесетичните цветове. Шестцифрен цвят като #ffffff се превръща в #fff, когато всяка двойка цифри съвпада (за червеното, зеленото и синьото). Осемцифрен цвят с алфа канал, например #ffaa00cc, се съкращава по същия начин, когато и четирите двойки съвпадат.
  • Премахва мерната единица от стойностите с нулева дължина. 0px, 0em и 0rem се превръщат в 0. Процентните стойности се оставят без промяна, защото 0% не винаги е взаимозаменяемо с обикновено 0 (например в стъпка на flex-basis или @keyframes).
  • Премахва водещата нула от десетичните дроби. 0.5 се превръща в .5.

За да не повреди файла, инструментът оставя непроменени три вида съдържание: текста в кавички, стойността в URL без кавички url() и съдържанието на математически функции като calc(), clamp(), min() и max(). Интервалите в calc(100% - 20px) имат значение за браузъра, затова инструментът ги запазва точно.

Инструментът не обединява дублиращи се селектори, не изтрива празни блокове с правила и не преобразува цветовете rgb() в шестнадесетичен формат. Това са валидни оптимизации, които други инструменти извършват, но този минификатор се съсредоточава върху изброените по-горе промени.

Формула за процента на намаление

Инструментът показва с какъв процент файлът е станал по-малък:

1reduction % = ((original length − minified length) / original length) × 100
2

Двете дължини се изчисляват в знаци. Резултатът се закръгля до два знака след десетичната запетая.

Пример с решение

Оригинален CSS (193 знака):

1/* Navigation Styles */
2.nav-menu {
3  display: flex;
4  justify-content: space-between;
5  padding: 20px 0px;
6  background-color: #ffffff;
7}
8
9.nav-item {
10  margin-right: 15px;
11  color: #000000;
12}
13

Минифициран резултат (129 знака):

1.nav-menu{display:flex;justify-content:space-between;padding:20px 0;background-color:#fff}.nav-item{margin-right:15px;color:#000}
2

Прилагане на формулата: (193 − 129) / 193 × 100 = 33,16%. Коментарът е премахнат, отстъпите и новите редове са премахнати, 0px се е превърнало в 0, а #ffffff/#000000 са се превърнали в #fff/#000.

Точният процент зависи от входните данни. Стегнато написаният CSS с малко коментари се свива по-малко. CSS с много коментари и дълбоко вложени отстъпи може да се свие повече. При типичните таблици със стилове, минифицирани с този инструмент, намалението е приблизително от 20% до 40%.

Как се използва този инструмент

  1. Поставете CSS кода в полето за въвеждане отляво.
  2. Минифицираната версия се появява автоматично отдясно, без да е необходимо да натискате бутон.
  3. Проверете показания над резултата процент на намаление.
  4. Изберете „Copy to Clipboard“, за да копирате минифицирания CSS, след което го поставете във файл на проекта.
  5. Изберете „Clear“, за да изтриете съдържанието и на двете полета и да започнете отначало.

Нищо, въведено в инструмента, не се изпраща до сървър; минификацията се извършва в браузъра.

Кога да се минифицира CSS

Екипите за разработка обикновено минифицират CSS като стъпка от процеса на компилация, използвайки инструменти като Webpack или npm скриптове, така че промяната да се извършва автоматично преди всяко внедряване. Файлът с четимия, коментиран изходен код остава в системата за контрол на версиите; минифицира се само продукционната компилация. Обичайните места, където се използва минифициран CSS, включват:

  • Големи уебсайтове, например онлайн магазини, при които по-малката таблица със стилове означава по-бързо зареждане на страницата.
  • Приложения с една страница, създадени с фреймуърци като React или Vue, при които CSS се пакетира заедно с JavaScript.
  • Мобилни уебстраници, при които потребителите по-често използват по-бавна връзка.
  • HTML имейли, за които често има строги ограничения за размера.

Минификация на CSS и скорост на страницата

По-малкият CSS файл се изтегля и анализира по-бързо, което може да съкрати времето до визуализирането на страницата. Google е посочил, че скоростта на страницата е един от сигналите, използвани при класирането в търсенето, така че по-бързата страница може да бъде един малък фактор сред многото, които влияят на представянето на сайта в резултатите от търсенето. Самата минификация не гарантира промяна в класирането; тя е една от няколко оптимизации, наред с компресирането на изображения и времето за отговор на сървъра.

Минификатор на CSS срещу форматиращ инструмент за CSS

Минификаторът компресира кода за продукционна среда. Форматиращият инструмент прави обратното: взема компресиран CSS и го форматира отново с отстъпи и нови редове, за да може човек да го прочете. Форматиращият инструмент не може да възстанови коментарите или оригиналните имена на променливите, премахнати при минификацията, защото тази информация се губи при изтриването.

Често задавани въпроси

С колко намалява размерът на CSS след минификация? С този инструмент обикновено от 20% до 40%, в зависимост от броя на коментарите, празните редове и отстъпите в оригиналния файл. Файл, който първоначално е с малко форматиране, ще се свие по-малко.

Променя ли минификацията на CSS начина, по който изглежда страницата? Не. Минификацията премахва само знаци, които браузърите игнорират, като коментари и излишни празни знаци, и пренаписва някои еквивалентни стойности (например #ffffff в #fff). Визуализираната страница остава същата.

Трябва ли CSS да се минифицира по време на разработката? Не. Докато пишете и отстранявате грешки в кода, запазете четимата версия с коментари. Минифицирайте само копието, което се изпраща към продукционен сървър, обикновено като автоматична стъпка в процеса на компилация.

Може ли минифицираният CSS да се превърне обратно в оригиналния файл? Форматиращият инструмент може да форматира минифицирания CSS с отстъпи, но не може да възстанови изтритите коментари или описателните имена, които никога не са присъствали в минифицираната версия. Съхранявайте оригиналния файл с изходния код.

Този инструмент преобразува ли цветовете rgb() в шестнадесетичен формат или обединява ли дублиращи се селектори? Не. Той съкращава шестнадесетичните цветове и премахва ненужните знаци, но не пренаписва стойностите rgb()/hsl() и не обединява повтарящи се селектори. Някои други минификатори извършват тези допълнителни стъпки.

Едно и също ли е минификацията и компресирането с gzip? Не. Минификацията премахва ненужните знаци от самия изходен код. Компресирането с gzip (или Brotli) се извършва от уеб сървъра при изпращането на файла, като се използва отделен алгоритъм. Съвместното използване на двете дава най-малкия файл при преноса през мрежата.