Przejdź do głównej treści
LibraTool logoLibraTool

Upiększacz CSS za darmo

Formatuj zminifikowany CSS z równymi wcięciami albo go minifikuj. Opcjonalne sortowanie właściwości alfabetycznie dla czytelnych różnic.

Działa offline po wczytaniu

Upuść plik tutaj lub kliknij, aby przeglądać

CSS · przetwarzane na Twoim urządzeniu

lub naciśnij Ctrl+V, aby wkleić ze schowka

Przeglądaj pliki
Sformatowany CSS
Wynik pojawi się tutaj…

Typowe zastosowania

  • Debuguj CSS ProdukcjiWyświetl zminimalizowany CSS z witryn produkcyjnych w czytelnym formacie aby znaleźć i odtworzyć styling.
  • Wymuszaj Styl CSS ZespołuUruchom CSS przesłane przez zespół przez spójny beautifier aby diff dotyczył zawartości, nie formatowania.
  • Formatuj CSS z Prefiksami DostawcyCSS z prefiksem dostawcy (wyjście autoprefixer) często ma wiele wariantów -webkit-, -moz-, -ms-. Formatuj do sprawdzenia.
  • Ucz Się z Pro CSSPoznaj CSS z sławnych systemów projektowania przez formatowanie ich skompilowanego wyjścia.
  • Formatuj CSS dla Raportów BłędówPrzy zgłaszaniu błędów CSS, sformatowany CSS jest znacznie łatwiejszy do czytania i zrozumienia dla recenzentów.

Jak to działa

To narzędzie formatuje CSS za pomocą ręcznie napisanego parsera rekurencyjnego wbudowanego w stronę — bez biblioteki zewnętrznej i wywołań serwera. Parser przechodzi przez CSS znak po znaku, poprawnie obsługując ciągi w cudzysłowach, wartości url(), zagnieżdżone reguły @ i komentarze, które zmyliłyby prostsze rozwiązania oparte na wyrażeniach regularnych.

  1. 1
    Tokenizacja na poziomie znaków
    Funkcja walkCss skanuje surowe dane znak po znaku, śledząc stan cudzysłowów i głębokość nawiasów, aby średniki czy nawiasy klamrowe wewnątrz url(), wartości tekstowych lub komentarzy nigdy nie były brane za separatory struktury.
  2. 2
    Rozdzielanie bloków i deklaracji
    Gdy skaner znajdzie otwierający nawias klamrowy najwyższego poziomu, wyodrębnia preludium (selektor lub słowo kluczowe reguły @) i rekurencyjnie przetwarza treść bloku — która sama może zawierać zagnieżdżone reguły (@media, @supports, natywne zagnieżdżanie CSS), obsługiwane na głębszym poziomie rekurencji.
  3. 3
    Sortowanie właściwości i wcięcia
    Deklaracje w każdym bloku są zbierane w ciąg, a następnie opcjonalnie sortowane alfabetycznie według nazwy właściwości przed zapisaniem z wybraną szerokością wcięcia (2 lub 4 spacje). Tryb minifikacji całkowicie pomija białe znaki i usuwa komentarze.
  4. 4
    Natychmiastowy wynik w przeglądarce
    Wyniki pojawiają się podczas pisania dzięki hookowi useMemo — nic nie jest nigdzie wysyłane. Sformatowany lub zminifikowany CSS można skopiować do schowka lub pobrać jako plik .css, a panel pokazuje różnicę rozmiaru względem oryginału.

Powiązane narzędzia

🌐

Upiększacz i minifikator HTML

Formatuj lub minifikuj HTML z właściwym wcięciem zagnieżdżenia. Zachowuje treść wewnątrz bloków <pre>, <script>, <style>.

Wypróbuj
🗄️

Formatowanie i upiększanie SQL

Formatuj zapytania SQL z właściwymi wcięciami, konfigurowalną wielkością liter słów kluczowych i podziałami wierszy przy głównych klauzulach. Działa z dowolnym dialektem SQL.

Wypróbuj
🗜️

Minifikator i upiększacz CSS

Minifikuj CSS, aby zmniejszyć rozmiar pliku, lub upiększaj minifikowany CSS dla czytelności. Natychmiastowo, w Twojej przeglądarce.

Wypróbuj

Często zadawane pytania