Bezpłatny Formater CSS Online
Sformatuj zminifikowany lub chaotyczny CSS natychmiast — działa w przeglądarce, bez przesyłania.
Wejściowy CSS
Sformatowany CSS
Przykłady formatowania CSS
Zminifikowany CSS jest trudny do odczytania; formatowanie dodaje wcięcia i podziały linii. Przykład:
Style kontenera i przycisku
Wejście zminifikowane:
Wyjście sformatowane:
Kliknij Przykład powyżej, aby załadować zminifikowany CSS do edytora.
Czym jest Formater CSS?
CSS (Cascading Style Sheets) nadaje styl każdej stronie internetowej. Zminifikowany lub źle sformatowany CSS jest trudny do odczytania i debugowania. Formater CSS dodaje wcięcia i podziały linii do surowego lub zminifikowanego CSS, dzięki czemu selektory, właściwości i zagnieżdżenia stają się czytelne. Specyfikacje W3C CSS definiują język.
To narzędzie analizuje CSS i formatuje go ze spójnymi wcięciami. Działa całkowicie w przeglądarce. Nic nie jest wysyłane na serwer, więc jest bezpieczne do używania z arkuszami stylów produkcyjnych. Do minifikacji CSS użyj Minifikatora CSS. Do walidacji użyj Walidatora CSS.
Jak używać tego narzędzia
Wklej lub wczytaj
Skopiuj CSS i wklej go do lewego edytora. Możesz też kliknąć Wczytaj, aby załadować plik .css. Przycisk Przykład ładuje przykładowe dane. Nieprawidłowy CSS wyświetli błąd.
Sprawdź wynik
Prawy panel aktualizuje się automatycznie. Prawidłowy CSS zostaje sformatowany z odpowiednimi wcięciami. Użyj Minifikuj, aby usunąć białe znaki i uzyskać zwartą wersję do produkcji.
Kopiuj lub pobierz
Użyj Kopiuj, aby umieścić wynik w schowku, lub Pobierz, aby zapisać jako plik. Dla SCSS lub Less skompiluj najpierw za pomocą SCSS do CSS lub Less do CSS.
Jak działa Formater
Narzędzie analizuje CSS i formatuje go ze spójnymi wcięciami. Selektory, właściwości i reguły są wykrywane; nawiasy klamrowe i średniki są zachowywane. Specyfikacje W3C CSS definiują język. Formatowanie dodaje podziały linii i spacje dla czytelności bez zmiany zachowania. Obsługiwane są reguły at-rules jak @media, @keyframes i @import. Przetwarzanie odbywa się w przeglądarce – nic nie jest wysyłane na serwer.
Narzędzia do budowania takie jak Vite, Webpack czy Parcel często generują zminifikowany CSS. Wklejenie tego wyjścia tutaj sprawia, że staje się czytelne. Dla źródeł SCSS lub Less skompiluj najpierw za pomocą SCSS do CSS lub Less do CSS, a następnie formatuj.
Kiedy formatowanie CSS pomaga
Większość deweloperów potrzebuje formatera podczas sprawdzania stylów z witryn produkcyjnych, debugowania CSS firm trzecich lub przeglądania zminifikowanych wyników narzędzi do budowania. Wklejenie skompresowanego CSS tutaj sprawia, że selektory i reguły są od razu widoczne. Skompilowane wyjście Bootstrap lub Tailwind jest często zminifikowane – formatowanie ujawnia strukturę.
Formatowanie pomaga również przed udostępnianiem stylów współpracownikom lub przeglądaniem pull requestów. Do dodawania prefiksów vendor użyj Prefiksera CSS. Do konwersji na style inline (np. dla e-mail) użyj CSS do Inline. Do walidacji użyj Walidatora CSS.
Często zadawane pytania
Czy moje dane są prywatne?
Tak. Formatowanie odbywa się całkowicie w przeglądarce. Żadne dane nie są wysyłane na żaden serwer. Możesz to potwierdzić otwierając zakładkę Sieć w przeglądarce.
Czy obsługuje SCSS lub Less?
To narzędzie formatuje zwykły CSS. Dla SCSS lub Less skompiluj najpierw za pomocą SCSS do CSS lub Less do CSS, a następnie formatuj wyjście.
Co robi Minifikuj?
Usuwa białe znaki, podziały linii i komentarze ze sformatowanego wyjścia, dając najmniejszą wersję do produkcji. Dostępna jest też dedykowana strona Minifikatora CSS.
Czy komentarze są zachowywane?
Formatowanie zachowuje komentarze. Minifikacja może je usuwać w zależności od minifikatora. Sprawdź wyjście przed użyciem w produkcji.
Co z właściwościami niestandardowymi CSS?
Zmienne CSS (--var-name) są obsługiwane. Formater obsługuje nowoczesną składnię CSS, w tym właściwości niestandardowe, @media i @keyframes.