Minimizator CSS Gratuit: Comprimă și Optimizează Codul CSS Online

Ce este un minificator CSS?

Un minificator CSS este un instrument care micșorează un fișier CSS (foi de stil în cascadă) eliminând caracterele de care browserele nu au nevoie. Elimină comentariile, spațiile suplimentare și întreruperile de rând și scurtează câteva tipare comune, fără să schimbe aspectul paginii. Rezultatul este un fișier mai mic, pe care un browser îl poate descărca și analiza mai rapid.

Cum funcționează minificarea CSS

Dezvoltatorii web scriu codul CSS cu comentarii, indentare și rânduri goale, deoarece aceste elemente facilitează citirea și editarea codului. Browserele ignoră toată această formatare. Un minificator o șterge, împreună cu alte câteva octeți fără rol vizual, și lasă un fișier compact, destinat utilizării în producție, nu editării.

Acest instrument aplică următoarele modificări:

• Elimină comentariile. Fiecare bloc /* ... */ este șters.
• Compactează spațiile albe. Secvențele de spații, tabulatoare și întreruperi de rând dintre reguli sunt reduse la nimic sau la un singur spațiu acolo unde spațiul are rol sintactic, de exemplu între .parent și .child într-un selector descendent.
• Elimină spațiile albe din jurul semnelor de punctuație. Spațiile de lângă {, }, :, ; și , sunt eliminate.
• Elimină punctele și virgulele suplimentare. Punctele și virgulele repetate sunt reduse la unul singur, iar punctul și virgula final dinaintea unei acolade de închidere } este eliminat.
• Scurtează culorile hexazecimale. O culoare cu șase cifre, precum #ffffff, devine #fff atunci când fiecare pereche de cifre este identică (roșu, verde și albastru). O culoare cu opt cifre și canal alfa, precum #ffaa00cc, este scurtată în același mod atunci când toate cele patru perechi sunt identice.
• Elimină unitatea din valorile cu lungime zero. 0px, 0em și 0rem devin 0. Valorile procentuale sunt păstrate, deoarece 0% nu este întotdeauna interschimbabil cu simplul 0, de exemplu într-o etapă flex-basis sau @keyframes.
• Elimină zero-ul inițial din numerele zecimale. 0.5 devine .5.

Pentru a evita coruperea fișierului, instrumentul lasă neschimbate trei tipuri de conținut: textul dintre ghilimele, valoarea dintr-un url() fără ghilimele și conținutul funcțiilor matematice precum calc(), clamp(), min() și max(). Spațierea din calc(100% - 20px) contează pentru browser, astfel că instrumentul o păstrează exact.

Instrumentul nu combină selectorii duplicați, nu șterge blocurile de reguli goale și nu convertește culorile rgb() în format hexazecimal. Acestea sunt optimizări valide pe care le efectuează alte instrumente, dar acest minificator se concentrează pe modificările enumerate mai sus.

Formula procentului de reducere

Instrumentul raportează cu cât s-a micșorat fișierul, exprimat procentual:

Ambele lungimi sunt numărate în caractere. Rezultatul este rotunjit la două zecimale.

Exemplu de calcul

CSS original (193 caractere):

Rezultat minificat (129 caractere):

Aplicând formula: (193 − 129) / 193 × 100 = 33,16 %. Comentariul a dispărut, indentarea și întreruperile de rând au dispărut, 0px a devenit 0, iar #ffffff/#000000 au devenit #fff/#000.

Procentul exact depinde de datele de intrare. Codul CSS scris compact, cu puține comentarii, se micșorează mai puțin. Codul CSS cu multe comentarii și indentare pe mai multe niveluri se poate micșora mai mult. Foile de stil minificate cu acest instrument înregistrează de obicei o reducere de aproximativ 20 % până la 40 %.

Cum se utilizează acest instrument

1. Lipește codul CSS în caseta de introducere din stânga.
2. Versiunea minificată apare automat în dreapta, fără să fie necesară apăsarea unui buton.
3. Verifică procentul de reducere afișat deasupra rezultatului.
4. Selectează „Copiază în clipboard” pentru a copia codul CSS minificat, apoi lipește-l într-un fișier al proiectului.
5. Selectează „Șterge” pentru a goli ambele casete și a începe din nou.

Nimic din ceea ce este introdus în instrument nu este trimis către un server; minificarea se execută în browser.

Când trebuie minificat codul CSS

Echipele de dezvoltare minifică de obicei CSS-ul ca etapă a procesului de construire, folosind instrumente precum Webpack sau scripturi npm, astfel încât modificarea să aibă loc automat înaintea fiecărei implementări. Fișierul sursă lizibil, cu comentarii, rămâne în controlul versiunilor; doar compilarea pentru producție este minificată. Printre locurile în care este folosit frecvent CSS-ul minificat se numără:

• Site-uri web mari, precum magazinele online, unde o foaie de stil mai mică înseamnă o pagină care se încarcă mai rapid.
• Aplicații cu o singură pagină, construite cu cadre de lucru precum React sau Vue, unde CSS-ul este inclus împreună cu JavaScript.
• Pagini web pentru dispozitive mobile, unde utilizatorii sunt mai predispuși să aibă o conexiune mai lentă.
• Mesaje e-mail în format HTML, care au adesea limite stricte de dimensiune.

Minificarea CSS și viteza paginii

Un fișier CSS mai mic se descarcă și se analizează mai rapid, ceea ce poate scurta timpul până când pagina devine vizibilă. Google a declarat că viteza paginii este unul dintre semnalele utilizate la clasificarea în rezultatele căutării, astfel încât o pagină mai rapidă poate fi un factor minor, printre mulți alții, în performanța unui site în rezultatele căutării. Minificarea singură nu garantează modificarea poziției în clasament; este una dintre mai multe optimizări, alături de comprimarea imaginilor și timpul de răspuns al serverului.

Minificator CSS comparat cu un instrument de formatare CSS

Un minificator comprimă codul pentru producție. Un instrument de formatare face inversul: preia CSS-ul comprimat și îl reformatează cu indentare și întreruperi de rând, astfel încât să poată fi citit din nou de o persoană. Un astfel de instrument nu poate restaura comentariile sau numele inițiale ale variabilelor eliminate în timpul minificării, deoarece informațiile dispar după ștergere.

Întrebări frecvente

Cu cât se micșorează CSS-ul după minificare? Cu acest instrument, de obicei între 20 % și 40 %, în funcție de numărul de comentarii, rânduri goale și niveluri de indentare din fișierul original. Un fișier cu puțină formatare de la început se va micșora mai puțin.

Minificarea CSS schimbă aspectul unei pagini? Nu. Minificarea elimină doar caracterele pe care browserele le ignoră, precum comentariile și spațiile albe suplimentare, și rescrie câteva valori echivalente, de exemplu #ffffff ca #fff. Pagina afișată rămâne neschimbată.

Ar trebui minificat CSS-ul în timpul dezvoltării? Nu. Păstrează versiunea lizibilă și cu comentarii în timp ce scrii și depanezi codul. Minifică doar copia trimisă către un server de producție, de obicei ca etapă automată a procesului de construire.

Poate CSS-ul minificat fi transformat înapoi în fișierul original? Un instrument de formatare poate reformata CSS-ul minificat cu indentare, dar nu poate recupera comentariile șterse sau restaura denumirile descriptive care nu au fost niciodată prezente în versiunea minificată. Păstrează fișierul sursă original.

Convertește acest instrument culorile rgb() în format hexazecimal sau combină selectorii duplicați? Nu. Scurtează culorile hexazecimale și elimină caracterele inutile, dar nu rescrie valorile rgb()/hsl() și nu combină selectorii repetați. Unele alte minificatoare efectuează acești pași suplimentari.

Este minificarea același lucru cu comprimarea gzip? Nu. Minificarea elimină caracterele inutile chiar din codul sursă. Comprimarea gzip (sau Brotli) este aplicată de serverul web atunci când fișierul este trimis, folosind un algoritm separat. Utilizarea ambelor metode împreună produce cel mai mic fișier transmis prin rețea.