CSS Beautifier i formater online
Błyskawicznie formatuj, usuwaj minifikacje i organizuj niechlujne lub skompresowane arkusze stylów CSS w czasie rzeczywistym. Nasz formatyzator CSS z maszyną stanu dokładnie wcina zagnieżdżone zapytania @media, @keyframes, CSS zmienne (--var), https:// adresy URL i wbudowane dane SVG URIs — i zawiera CSS Minifier jednym kliknięciem, gdy wszystko jest gotowe do wysyłki do produkcji.
Jak upiększyć i zminimalizować CSS online
- Wklej swój CSS: Wklej skompresowany
.min.csslub niechlujny arkusz stylów do edytora Input CSS po lewej stronie lub kliknij Load Sample, aby przetestować zagnieżdżenie@mediazapytania, zmienne i adresy URL. - Wybierz Preset lub dostosuj ustawienia: Wybierz 2 Spaces, 4 Spaces, Clean & Sort A–Z lub Minify (.min.css) z paska Quick Presets lub dostosuj wcięcie, rozmieszczenie nawiasów, podział selektora i kompresję kolorów po prawej stronie.
- Sprawdź statystyki na żywo: Obserwuj, jak liczniki Input, Output, Rules i Lines aktualizują się natychmiast po wpisaniu lub przełączeniu opcji.
- Kopiuj lub pobierz: Kliknij Kopiuj clipboard lub Pobierz .css, aby zapisać sformatowany arkusz stylów jako
styles.beautified.css(lubstyles.min.cssw trybie Minify).
Wyjaśnienie opcji formatowania i optymalizacji CSS
| Opcja | Co to robi | Przed | po |
|---|---|---|---|
| Unminify i wcięcie | Rozwija reguły jednowierszowe i zagnieżdżone bloki @media / @keyframes z 2, 4 lub 8 spacjami lub tabulatorami. |
@media(max-width:768px){.box{width:100%}} |
@media (maks. szerokość: 768 pikseli) { |
| Jeden selektor na linię | Dzieli rozdzielane przecinkami listy selektorów na poszczególne linie, ignorując przecinki wewnątrz :is() lub :not(). |
.btn, .karta, .modal { ... } |
.btn, |
| Kompresuj wartości kolorów | Konwertuje kody rgb() i 6-cyfrowe kody hex na 3-cyfrowe kody hex wewnątrz dowolnej wartości deklaracji, zachowując jednocześnie otaczające tokeny. |
obramowanie: 1px pełna rgb(255, 0, 0); |
border: 1px stała #f00; |
| Sortuj właściwości (A–Z) | Alfabetyzuje deklaracje wewnątrz każdego bloku, aby ujednolicić przeglądy kodu i ujawnić zduplikowane właściwości. | z-indeks: 5; wyświetlacz: elastyczny; wyrównaj elementy: środek; |
align-elementy: centralne; |
Dlaczego warto używać maszyny stanowej CSS Beautifier?
Wiele prostych formaterów CSS dostępnych online dzieli kod na każdy dwukropek (:), średnik (;) lub nawias klamrowy (}). To podejście przestaje działać, gdy tylko arkusz stylów zawiera nowoczesne funkcje CSS, takie jak:
- Zagnieżdżone reguły At i natywny CSS Zagnieżdżanie: zapytania
@media, zapytania@supports, animacje@keyframes, bloki@layeri zagnieżdżone selektory podrzędne wymagają wielopoziomowego śledzenia wcięć. - Ezewnętrzne adresy URL i wbudowane SVG URI danych: Właściwości takie jak
tło: url("https://...")luburl("data:image/svg+xml;utf8,zawiera dwukropki i średniki, których nigdy nie wolno dzielić jako ograniczników właściwości CSS.") - Pseudo-element Ciągi zawartości: Deklaracje takie jak
treść: "Pozycja: 1; Status: OK"zachowują dokładne znaki wewnętrzne i białe znaki nienaruszone. - W3C — dokładne skracanie kolorów: Nazwane kolory są skracane tylko wtedy, gdy odpowiednik hex jest ściśle krótszy i identyczny w specyfikacji CSS (na przykład
white→#fffiblack→#000, pozostawiającgreenjakogreen, ponieważ#008000jest dłuższy, a#0f0jest w rzeczywistościlimonka).
Często zadawane pytania
Jak cofnąć minifikację pliku .min.css online?
Wklej skompresowany kod .min.css do pola Input CSS po lewej stronie. Narzędzie automatycznie analizuje w czasie rzeczywistym selektory, deklaracje, zapytania @media i @keyframes w wieloliniowe CSS o wyraźnych wcięciach.
Czy ten CSS beautifier obsługuje zapytania @media, @keyframes i data: URI?
Tak. W przeciwieństwie do prostych formaterów opartych na podziale, to narzędzie wykorzystuje parser maszyny stanu CSS, który zachowuje zagnieżdżone bloki (@media, @supports, @keyframes, @layer i natywny CSS zagnieżdżanie), a także dwukropki i średniki wewnątrz identyfikatorów URI url("https://..."), data:image/svg+xml URI i cytowane ciągi znaków content.
Czy sortowanie alfabetyczne właściwości CSS jest bezpieczne?
Sortowanie alfabetyczne ułatwia skanowanie dużych reguł i pomaga wykryć duplikaty deklaracji. Jeśli jednak reguła opiera się na skróconej właściwości, po której następuje bardziej szczegółowe zastąpienie (lub odwrotnie, np. background-color vs. background), zmiana kolejności deklaracji może wpłynąć na to, która właściwość zwycięży. Włącz sortowanie, jeśli Twoje reguły nie zależą od skróconej kolejności zastępowania.
Czy za pomocą tego narzędzia mogę także wykonać minify CSS?
Tak. Kliknij przycisk Minify CSS (lub wybierz Minify (Single-Line .min.css) w panelu ustawień), aby usunąć komentarze, białe znaki i końcowe średniki oraz skompresować wartości kolorów do kompaktowego arkusza stylów produkcyjnych.
Czy mój kod CSS został przesłany na jakiś serwer?
Nie. Całe formatowanie i minifikacja CSS działa w 100% lokalnie w przeglądarce za pomocą JavaScript. Twoje arkusze stylów nigdy nie opuszczają komputera.