CSS Beautifier și Formatter Online
Formatați, deminificați și organizați instantaneu foile de stil CSS dezordonate sau comprimate în timp real. Formatatorul nostru CSS cu mașină de stat indentează cu precizie interogările imbricate @media, @keyframes, variabile CSS (--var), https:// — și include un CSS Minifier cu un singur clic atunci când sunteți gata să expediați în producție.https:// URL-uri de date în linia și în linia URL-urilor URIs
Cum să înfrumusețezi și să anulezi CSS online
- Paste CSS: Inserați
.min.csscomprimat sau foaia de stil dezordonată în Introduceți editorul CSS din stânga sau faceți clic pe Lîncărcați Sample pentru a testa URL-urile imbricate, variabilele @ și variabilele media . - Calegeți un Preset sau Personalizați setările: Alegeți 2 Spaces, 4 Spaces, Clean & Sort A–Z sau Minify (.min.css1, ajustați bara Quick) css1 indentare, plasarea bretelor, divizarea selectorului și compresia culorii în partea dreaptă.
- Inspect Live Statistics: Urmăriți contoarele Input, Output, Rules și Lines care se actualizează imediat pe măsură ce introduceți sau comutați opțiunile.
- Copy sau Download: Faceți clic pe Copy în clipboard sau Download .css pentru a salva foaia de stil formatată ca
styles.beautified.css(saustyles.s în modul).
CSS Opțiuni de formatare și optimizare explicate
| Opţiune | Ce face | Înainte | După |
|---|---|---|---|
| Unminificare și indentare | Extinde reguli cu o singură linie și blocuri imbricate @media / @keyframes cu 2, 4 sau 8 spații sau file. |
@media(max-width:768px){.box{width:100%}} |
@media (lățime maximă: 768 px) { |
| Oun selector pe linie | Împarte listele de selectoare separate prin virgulă pe linii individuale, ignorând virgulele din interiorul :is() sau :not(). |
.btn, .card, .modal { ... } |
.btn, |
| Comprimați valorile culorii | Convertește codurile rgb() și hex din 6 cifre în coduri hex din 3 cifre în interiorul oricărei valori de declarație, păstrând tokenurile din jur. |
bord: 1px solid rgb(255, 0, 0); |
bord: 1px solid #f00; |
| Sort Properties (A–Z) | alfabetizează declarațiile în interiorul fiecărui bloc pentru a standardiza recenziile de cod și pentru a dezvălui proprietăți duplicate. | z-index: 5; display: flex; alinierea elementelor: centru; |
align-articole: centru; |
De ce să folosiți o mașină de stat CSS Beautifier?
Multe formatoare online simple CSS împart codul pe fiecare două puncte (:), punct și virgulă (;) sau acoladă (}). Această abordare se defectează de îndată ce foaia de stil include funcții moderne CSS, cum ar fi:
- Nested At-Rules & Native CSS Imbricare:
@mediainterogări,@supportsinterogări de caracteristici,@keyframes Animații,@layer@layer, necesită imbricare de blocuri copii în selectorul de urmărire multiplu în. - EAdrese URL externe și URI-uri de date SVG în linie: Proprietăți precum
background: url("https://...")sauurl("data:image/svg+xml;utf8, - PSeudo-Element șiruri de conținut: Declarații precum
conținut: „Articol: 1; Stare: OK”își păstrează caracterele interioare exacte și spațiile albe intacte. - W3C-Scurtare precisă a culorilor: Culorile denumite sunt scurtate numai atunci când echivalentul hex este strict mai scurt și identic în specificația CSS (de exemplu,
white→#fffși →black)#000, în timp ce lăsămgreencagreen, deoarece#008000este mai lung și#0f0este de fapt LIme).
Întrebări frecvente
Cum deminific un fișier .min.css online?
Lipiți codul dvs. comprimat .min.css în caseta Input CSS din stânga. Instrumentul analizează automat selectorii, declarațiile, interogările @media și @keyframes în CSS cu mai multe linii în timp real.
Acest CSS beautifier acceptă interogări @media, @keyframes și data: URI-uri?
Da. Spre deosebire de formatatoarele simple bazate pe divizare, acest instrument folosește un parser CSS de mașină de stări care păstrează blocurile imbricate (@media, @supports, @keyframes, @layer, precum și coloniile native) și LH15. punct și virgulă în interiorul URI-urilor url("https://..."), data:image/svg+xml și șirurile content citate.
Este sigur să sortați proprietățile CSS alfabetic?
Sortarea alfabetică facilitează scanarea regulilor mari și ajută la identificarea declarațiilor duplicate. Cu toate acestea, dacă o regulă se bazează pe o proprietate scurtă urmată de o modificare mai specifică (sau invers, cum ar fi background-color vs. background), modificarea ordinii de declarație poate modifica proprietatea câștigătoare. Activați sortarea atunci când regulile dvs. nu depind de ordinea de înlocuire a presiunii.
Pot și minify CSS cu acest instrument?
Da. Faceți clic pe butonul Minify CSS (sau selectați Minify (Single-Line .min.css) în panoul de setări) pentru a elimina comentariile, spațiile albe și punctele și virgulă finală și pentru a comprima valorile culorilor într-o foaie de stil de producție compactă.
Codul meu CSS este încărcat pe vreun server?
Nu. Toate formatările și minimizarea CSS rulează 100% local în browser-ul dvs. folosind JavaScript. Foile de stil nu părăsesc niciodată computerul.