Formatter CSS
Formatuj zminifikowane lub nieuporządkowane arkusze stylów za pomocą tego formattera CSS. Wklej CSS, a narzędzie przeanalizuje go, a następnie wyświetli każdą regułę z selektorem w jednym wierszu, jedną deklarację w każdym wierszu z wcięciem o dwie spacje, spacją po każdym dwukropku, odstępami wokół kombinatorów oraz zagnieżdżonymi regułami at, takimi jak zapytania medialne. Błędy analizy są zgłaszane. Idealne dla twórców stron internetowych i projektantów czytających, debugujących lub przeglądających arkusze stylów z dowolnego źródła.
Najczęściej zadawane pytania
Jak działa formatter CSS?
Analizuje arkusz stylów, dzieląc go na reguły, deklaracje i reguły at, a następnie wyświetla je ponownie w spójnym układzie. Ponieważ CSS jest analizowany, wynik odzwierciedla rzeczywistą strukturę arkusza stylów.
Jak wygląda sformatowany CSS?
Każda reguła zaczyna się od selektora i nawiasu otwierającego klamrowego. Każda deklaracja znajduje się w osobnym wierszu, z wcięciem o szerokości dwóch spacji i spacją po dwukropku. Nawias zamykający klamrowy również znajduje się w osobnym wierszu. Listy selektorów są łączone przecinkiem i spacją, a wokół kombinatorów, takich jak > i ~, dodawane są spacje.
Czy obsługiwane są zapytania o media i inne reguły at?
Tak, reguły wewnątrz bloków @media, @supports i podobnych są zagnieżdżane i otrzymują wcięcia. Instrukcje takie jak @import pozostają w jednym wierszu, a wartości url() są zapisywane w cudzysłowach.
Co się dzieje w przypadku nieprawidłowego CSS?
Gdy parser nie może odczytać arkusza stylów, na przykład z powodu brakującej klamry, narzędzie zatrzymuje działanie i wyświetla komunikat parsera z numerem wiersza. Popraw wskazane miejsce i ponownie sformatuj kod.
Czy komentarze są zachowywane?
Tak, komentarze są zachowywane zarówno między regułami, jak i między deklaracjami. Każdy komentarz znajduje się w osobnym wierszu, z wcięciem odpowiadającym otaczającemu go kodowi.
Czy obsługiwane są właściwości niestandardowe?
Tak, właściwości niestandardowe, takie jak --brand-color, są formatowane jak każda inna deklaracja. Odwołania, takie jak var(--brand-color), są zachowywane bez zmian.
Czy mogę tutaj formatować SCSS lub Less?
Nie, ta strona obsługuje zwykły CSS, a zagnieżdżone reguły lub zmienne z preprocesorów mogą zostać odrzucone. W przypadku tych plików użyj formatowania SCSS lub formatowania Less.
Czy mogę zmienić wcięcia lub styl klamer?
Nie, formatter nie ma opcji i zawsze używa dwóch spacji, a nawias otwierający klamrowy umieszcza w wierszu selektora. Dzięki temu wyniki są spójne dla wszystkich arkuszy stylów.
Dlaczego wynik jest otoczony blokiem kodu css?
Wynik jest zwracany jako blok kodu Markdown oznaczony jako css, dzięki czemu jest wyświetlany z podświetlaniem składni w Markdown. Skopiuj wiersze między znacznikami bloku do swojego pliku .css.
Jak duży może być mój arkusz stylów?
Do 5 MB na jedno uruchomienie. Większe dane wejściowe są odrzucane z komunikatem. Wynik jest identyczny z opcją CSS w formatowaniu kodu.