CSS минимизатор

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

Какво прави минимизирането на CSS?

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

Браузърът продължава да получава CSS правилата, селекторите и стойностите на декларациите. Очакваният визуален резултат би трябвало да остане непроменен, а файлът, изпращан до браузъра, става по-малък. Практическата полза от минимизирането на CSS зависи от първоначалния файл, HTTP компресията и кеширането в браузъра. При добре компресирана таблица със стилове намалението на прехвърлените байтове може да е скромно.

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

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

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

1. Започни с изходния CSS, който използва сайтът или приложението ти.
2. Преди минимизирането провери дали кодът се анализира правилно.
3. Постави го в CSS и стартирай инструмента.
4. Сравни Знаци в CSS със Знаци в минимизирания CSS.
5. Тествай резултата на тестова страница, включително адаптивните състояния, стиловете за печат и интерактивните компоненти.

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

Как да разчета резултата?

Резултатът съдържа преобразувания CSS и два броя знаци, за да можеш да прегледаш изхода и директно да видиш намалението. Знаци в CSS показва дължината на изпратения текст, а Знаци в минимизирания CSS показва дължината след минимизирането.

Стойностите са брой знаци, изчислен чрез функция, която отчита многобайтовите знаци. Не ги приемай като точна прогноза за размера на данните, прехвърляни по мрежата. Един UTF-8 знак може да заема повече от един байт, а компресирането с Brotli или gzip може значително да промени размера, изпращан чрез HTTP.

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

Кратки примери за минимизиране на CSS

Обичайният минимизиран вариант премахва форматирането, но запазва самото правило.

CSS

p { color: red; }

Минимизиран CSS

p{color:red}

В този пример четимият вход съдържа 17 знака, а компактният вариант съдържа 12. Интервалите и препинателните знаци в низове, оградени с кавички, трябва да останат част от стойността.

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

Минимизиран CSS

.notice,.warning{color:#c00;margin:0 1rem}

Безразборното изтриване на всички интервали не е безопасно. Празното пространство може да означава комбинатор за наследник, а аритметичните оператори във функции като calc() имат изисквания за интервалите. Низовете, URL адресите с данни, екранираните идентификатори и стойностите на персонализирани свойства също трябва да се обработват с отчитане на синтаксиса.

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

Кога не си струва да минимизирам CSS?

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

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

Ако CSS се пакетира автоматично, включи минимизатора в този процес, така че всяко издание да използва едни и същи настройки. Когато публикуваш свързаните ресурси ръчно, HTML минимизаторът и JS минимизаторът могат да приложат същата операция към съответните типове файлове.

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

Променя ли минимизирането специфичността на CSS селекторите?

Правилното минимизиране не променя специфичността на селекторите, защото компонентите и редът им трябва да се запазят. Все пак сравнявай внимателно сложните селектори, ако изходният код използва екранирани знаци, по-нови псевдокласове или генериран синтаксис, който по-стар минимизатор може да не разбира.

Мога ли да минимизирам персонализирани CSS свойства?

Персонализираните свойства могат да бъдат включени, но стойностите им може да запазят токени и интервали за по-късно заместване чрез var(). Тествай декларациите, които съдържат изчисления, резервни стойности или вградени низове, в браузърите, поддържани от проекта ти, вместо да приемаш, че всеки видим интервал е незадължителен.

Създава ли инструментът source map?

Не се предоставя отделен резултат със source map. Ако при отстраняване на проблеми в продукционна среда трябва да съпоставяш компактния CSS със Sass, Less или друг източник, генерирай минимизирания файл и неговия source map чрез компилатора или инструмента за пакетиране, който познава първоначалната структура на файловете.

Запазват ли се коментарите за лиценза?

Не разчитай, че CSS коментарите ще бъдат запазени. Ако лицензът на дадена зависимост изисква към разпространявания код да има известие, съхрани го отделно или прегледай генерирания резултат преди публикуване.

Може ли минимизирането да поправи неработещ CSS?

Не. Минимизирането премахва ненужни знаци, но не поправя невалиден селектор, неподдържано свойство, липсващ ресурс или неправилна каскада. Първо отстрани предупрежденията при анализа и визуалните отклонения в изходния код.

Проверки преди публикуване

Запази минимизирания резултат като отделен ресурс за продукционната среда, провери дали URL адресите и съдържанието в кавички са непокътнати и го зареди на тестова страница при отворена конзола на браузъра. Сравни представителни страници при тесен и широк изглед, след което потвърди, че сървърът прилага очаквания тип съдържание, политика за кеширане и HTTP компресия.