Formatter CSS

Formatuj lub minifikuj CSS, sortuj właściwości i zamieniaj px na rem — bezpośrednio w przeglądarce.

O narzędziu Formatter CSS

Co to jest

Formatter CSS sprawia, że arkusz stylów jest czytelny albo zwarty. Dodaje wcięcia, sortuje właściwości alfabetycznie lub w kolejności box modelu, zamienia wartości px na rem i sprowadza wszystkie kolory do jednego formatu. Przy okazji sprawdza CSS i zatrzymuje się na niezrównoważonych nawiasach lub zepsutej deklaracji, zamiast wygenerować błędny wynik.

Główne funkcje

  • Formatowanie z wcięciem 2 lub 4 spacji albo minifikacja do jednego wiersza.
  • Sortowanie właściwości: alfabetyczne albo logiczne, w kolejności box modelu.
  • px → rem z własnym bazowym rozmiarem czcionki.
  • Wszystkie kolory w HEX, RGB/RGBA lub HSL.
  • Filtr selektorów, który pokazuje tylko potrzebne bloki.
  • Błędy dla niezrównoważonych nawiasów klamrowych, deklaracji bez „właściwość: wartość” i pustej wartości.

Jak używać

  1. Wklej CSS do edytora, otwórz plik .css lub kliknij „Przykład”.
  2. Wybierz „Formatuj” lub „Minifikuj” i wcięcie.
  3. W razie potrzeby ustaw sortowanie właściwości, px → rem i format kolorów.
  4. Skopiuj wynik lub wyślij go do innego narzędzia.

Kiedy się przydaje

  • Odczytać zminifikowany CSS strony lub biblioteki.
  • Uporządkować arkusz stylów przed code review.
  • Przenieść projekt z px na rem za jednym razem.

Prywatność i ograniczenia

Twoje dane

Twój CSS jest przetwarzany w przeglądarce i nie trafia na serwer — witryna otrzymuje tylko anonimowe zdarzenie „otwarto narzędzie”, bez treści. Wynik wysłany do innego narzędzia zostaje na tym urządzeniu przez 24 godziny w „Ostatniej aktywności”. Link „Udostępnij” zawiera CSS w samym adresie, więc wysyłaj go tylko zaufanym osobom.

Ograniczenia

  • Narzędzie obsługuje zwykły CSS; SCSS, Less i inne preprocesory nie są obsługiwane.
  • Błąd zatrzymuje wynik: popraw wskazane miejsce, a wynik pojawi się ponownie.

Najczęstsze pytania

Co robi sortowanie logiczne?

Układa właściwości w stałej kolejności: najpierw pozycjonowanie, potem display, rozmiary, marginesy i padding, dalej typografia, kolory, tła i obramowania, a animacje na końcu. Powiązane właściwości trafiają obok siebie.

Jak px jest zamieniane na rem?

Każda wartość px jest dzielona przez bazowy rozmiar czcionki — domyślnie 16, więc 24px to 1.5rem. Zmień bazowy rozmiar, jeśli czcionka główna jest inna.

Dlaczego zamiast sformatowanego CSS widzę błąd?

Narzędzie znalazło coś, czego nie może bezpiecznie odczytać — brakujący nawias, deklarację bez dwukropka albo właściwość bez wartości. Poprawka w tym miejscu daje prawidłowy wynik zamiast zgadywania.