Minificator CSS

Minificator CSS este un instrument gratuit care elimină caracterele inutile din CSS și returnează foaia de stil minificată, împreună cu numărul de caractere de dinainte și de după procesare.

Ce face minificarea CSS?

Minificarea CSS reduce numărul de caractere dintr-o foaie de stil prin eliminarea formatării de care browserele nu au nevoie. De obicei, sunt eliminate indentarea, întreruperile de linie, comentariile și spațiile opționale din jurul semnelor de punctuație.

Browserul primește în continuare regulile CSS, selectorii și valorile declarațiilor. Aspectul vizual urmărit ar trebui să rămână neschimbat, iar fișierul transferat către browser să fie mai mic. Beneficiul practic al minificării unei foi de stil CSS depinde de fișierul inițial, de compresia HTTP și de memoria cache a browserului. Dacă foaia de stil este deja bine comprimată, reducerea numărului de octeți transferați poate fi modestă.

Minificarea este utilă înainte de publicare, când analizezi fișiere CSS supradimensionate provenite de la terți sau când vrei să afli cât contribuie formatarea folosită în timpul dezvoltării la dimensiunea fișierului. Nu este același lucru cu optimizarea care elimină selectorii neutilizați, combină reguli echivalente sau rescrie declarații. Instrumentul nu pretinde că efectuează aceste operațiuni mai ample.

Cum folosesc Minificator CSS?

Lipește foaia de stil în câmpul CSS și rulează instrumentul, apoi copiază rezultatul CSS minificat în fluxul de compilare sau publicare corespunzător. Păstrează fișierul sursă CSS în forma sa lizibilă, în loc să îl înlocuiești definitiv cu versiunea minificată.

1. Începe cu fișierul CSS sursă folosit de site-ul sau aplicația ta.
2. Verifică dacă este interpretat corect înainte de minificare.
3. Lipește-l în câmpul CSS și rulează instrumentul.
4. Compară Caractere CSS cu Caractere CSS minificate.
5. Testează rezultatul într-o pagină de testare, inclusiv stările responsive, stilurile pentru tipărire și componentele interactive.

Minificarea CSS are loc pe server. Codul CSS trimis este transferat către server prin HTTPS și nu este stocat. Dacă foaia de stil conține URL-uri confidențiale, nume de gazde interne sau alte informații sensibile, verifică dacă trimiterea lor către un instrument care rulează pe server respectă politica organizației tale privind gestionarea datelor.

Cum interpretez rezultatul?

Rezultatul include codul CSS transformat și două valori pentru numărul de caractere, astfel încât să poți verifica rezultatul și să vezi direct reducerea obținută. Caractere CSS reprezintă lungimea textului trimis, iar Caractere CSS minificate reprezintă lungimea după minificare.

Valorile sunt numere de caractere calculate cu o funcție care ține cont de caracterele multioctet. Nu le considera o estimare exactă a dimensiunii transferate prin rețea. Caracterele UTF-8 pot ocupa mai mult de un octet, iar compresia Brotli sau gzip poate modifica semnificativ dimensiunea trimisă prin HTTP.

Instrumentul nu afișează un câmp separat pentru validare sau erori. Prin urmare, nu trebuie folosit ca validator CSS. Probleme frecvente, precum acoladele fără pereche, lipsa unui semn două puncte, un șir neîncheiat, comentariile incorect formate sau imbricarea nevalidă, trebuie verificate cu instrumentele pentru dezvoltatori ale browserului, un linter sau un validator care aplică standardele relevante. Un cod CSS nevalid poate produce un rezultat care pare compact, dar nu se comportă conform așteptărilor.

Exemple scurte de minificare CSS

O versiune minificată obișnuită elimină formatarea, dar păstrează regula propriu-zisă.

CSS

p { color: red; }

CSS minificat

p{color:red}

În acest exemplu, varianta lizibilă introdusă are 17 caractere, iar forma compactă are 12. Spațiile și semnele de punctuație din șirurile delimitate prin ghilimele trebuie să rămână parte din valoare.

CSS

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

CSS minificat

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

Ștergerea automată a tuturor spațiilor nu este sigură. Spațiul poate reprezenta un combinator de descendență, iar operatorii aritmetici din funcții precum calc() au cerințe privind spațierea. Șirurile, URL-urile de date, identificatorii cu secvențe escape și valorile proprietăților personalizate trebuie, de asemenea, tratate ținând cont de sintaxă.

Caracterele accentuate și cele din alte alfabete pot apărea în șiruri și, în limitele regulilor CSS pentru identificatori, în selectori. Numerele, separatorii zecimali, procentele și unitățile fac parte din sintaxă, nu sunt text decorativ, deci nu pot fi scurtate fără înțelegerea declarației. O foaie de stil goală nu conține cod CSS care să poată fi minificat. Pentru foi de stil foarte mari, un minificator integrat în procesul de compilare este de obicei mai ușor de rulat în mod repetat și de auditat decât copierea textului într-un formular online.

Când nu merită să minific CSS?

De obicei, nu merită să repeți minificarea dacă fișierul este deja minificat sau generat ca resursă compactă pentru producție. O a doua minificare CSS poate să nu reducă deloc dimensiunea sau să obțină doar o reducere infimă, adăugând în același timp încă o transformare în procesul de lansare.

• Nu reformata pentru lizibilitate și apoi nu minifica din nou un fișier CSS pe care îl va citi doar browserul sau sistemul de compilare.
• Nu folosi minificarea în locul eliminării regulilor neutilizate din framework-uri sau a declarațiilor duplicate.
• Nu te aștepta ca reducerea numărului de caractere să scoată la iveală cereri care blochează randarea, probleme de cache sau încărcarea lentă a fonturilor.
• Nu elimina sursa formatată, mai ales când depanezi specificitatea, straturile cascadei sau interogările media.

Dacă fișierele CSS sunt grupate automat, folosește minificatorul în acel flux, astfel încât fiecare versiune publicată să utilizeze aceleași setări. Dacă publici manual resursele asociate, Minificator HTML și Minificator JS pot aplica operațiunea echivalentă acelor tipuri de fișiere.

Întrebări frecvente

Minificarea CSS modifică specificitatea selectorilor?

O minificare corectă nu modifică specificitatea selectorilor, deoarece aceștia ar trebui să își păstreze componentele și ordinea. Totuși, compară cu atenție selectorii complecși dacă sursa folosește secvențe escape, pseudoclase mai noi sau sintaxă generată pe care un minificator mai vechi ar putea să nu o înțeleagă.

Pot minifica proprietățile CSS personalizate?

Proprietățile personalizate pot fi incluse, însă valorile lor pot păstra tokenuri și spații necesare pentru substituirea ulterioară cu var(). Testează declarațiile care conțin calcule, valori de rezervă sau șiruri încorporate în browserele acceptate de proiectul tău, în loc să presupui că orice spațiu aparent poate fi eliminat.

Instrumentul generează o hartă a sursei?

Nu este afișat niciun rezultat de tip hartă a sursei. Dacă depanarea în producție necesită asocierea codului CSS compact cu Sass, Less sau altă sursă, generează fișierul minificat și harta sursei în compilatorul sau instrumentul de grupare care cunoaște structura fișierului original.

Comentariile despre licență rămân în rezultat?

Nu presupune că vor fi păstrate comentariile CSS. Dacă licența unei dependențe impune ca o notificare să însoțească codul distribuit, păstrează notificarea separat sau verifică rezultatul generat înainte de lansare.

Poate minificarea să repare un fișier CSS defect?

Nu. Minificarea elimină caracterele inutile, dar nu repară un selector nevalid, o proprietate neacceptată, o resursă lipsă sau o cascadă incorectă. Rezolvă mai întâi avertismentele de interpretare și problemele vizuale din sursă.

Verificări înainte de publicare

Salvează rezultatul minificat ca resursă separată pentru producție, verifică dacă URL-urile și conținutul dintre ghilimele au rămas intacte și încarcă fișierul într-o pagină de testare, cu consola browserului deschisă. Compară pagini reprezentative la dimensiuni înguste și late ale ferestrei de vizualizare, apoi confirmă că serverul aplică tipul de conținut, politica de cache și compresia HTTP așteptate.