Formatowanie CSS online
Wczytaj zwarty arkusz stylów i znów czytaj go wygodnie. Selektory i deklaracje w osobnych wierszach, bloki oraz zapytania medialne z wcięciami takimi, jakie zastosowano by ręcznie.
Dlaczego produkcyjny CSS zajmuje jeden długi wiersz?
Produkcyjne arkusze stylów są często minifikowane, aby zmniejszyć ilość tekstu przesyłanego do przeglądarki. Narzędzia budujące projekt mogą usuwać odstępy i komentarze, skracać wartości lub łączyć zgodne reguły. Wynik zależy od wybranego optymalizatora i jego ustawień; nie ma gwarancji określonego zmniejszenia pliku ani szybszego ładowania strony. Skompilowany arkusz klas narzędziowych może zawierać wiele drobnych reguł, co utrudnia przeglądanie zwartego pliku. Formatowanie nadaje im spójny, czytelny układ, ale nie odtwarza komponentów źródłowych, plików preprocesora ani konfiguracji budowania, które je wygenerowały.
Czytelna kaskada stylów
Głównym powodem formatowania arkusza jest zrozumienie, dlaczego dana reguła działa lub nie działa. Gdy każdy selektor ma osobny wiersz, a deklaracje pod nim są wcięte, łatwiej prześledzić kaskadę: znaleźć wszystkie reguły dotyczące elementu, porównać ich specyficzność, sprawdzić kolejność i zauważyć przypadkowe important, które nadpisuje Twoje zmiany. Zapytania medialne i ich zawartość stają się widocznymi blokami, więc zachowanie responsywnego układu śledzi się łatwiej niż w zwartym pliku. Przed zmianami skopiuj całą badaną regułę wraz z istotnym otaczającym ją zapytaniem medialnym. Widoczny arkusz wyjaśnia tylko część kaskady: znaczenie mają też style wpisane bezpośrednio w elementach, inne arkusze, dziedziczenie i aktualny DOM. Narzędzia deweloperskie przeglądarki pokazują, które deklaracje rzeczywiście wpływają na element. Sformatowany plik pomoże zrozumieć ich kontekst, a następnie możesz potwierdzić działanie przy badanym rozmiarze obszaru wyświetlania. Jeśli automatyczne wykrywanie uzna CSS za JavaScript, sprawdź widoczną etykietę, zanim zaufasz wynikowi.
Obsługa nowoczesnego CSS
Formatter rozumie współczesny CSS, a nie tylko jego dawny podzbiór. Obsługuje między innymi właściwości niestandardowe, wyrażenia calc i clamp, skróty grid i flexbox, zapytania kontenerowe, zagnieżdżone reguły, warstwy, bloki supports i klatki kluczowe. Długie listy selektorów są dzielone na wiersze, aby można je było przeczytać, a komentarze zachowane po budowaniu pozostają. Jeśli plik łączy zwykły CSS z właściwościami o prefiksach producentów, wynik zachowuje te deklaracje i stosuje do nich styl formattera.
Wskazówka dla skompilowanych frameworków
Po sformatowaniu skompilowanego arkusza Tailwind lub Bootstrap plik szybko staje się bardzo długi; dziesiątki tysięcy wierszy to nic niezwykłego. Włącz numery wierszy i wyszukaj interesującą Cię klasę lub właściwość funkcją wyszukiwania przeglądarki, zamiast przewijać całość. Jeśli chcesz zmniejszyć plik, a nie tylko go przeczytać, pamiętaj, że najwięcej zdziałasz w konfiguracji budowania, ponieważ nieużywane reguły zostały wygenerowane jeszcze przed minifikacją.
Najczęściej zadawane pytania
Czy mogę sformatować skompilowany arkusz Tailwind?
Tak, to jedno z najczęstszych zastosowań tej strony. Wynik może być bardzo długi, ponieważ framework generuje regułę dla każdej klasy narzędziowej. Najwygodniej poruszać się po nim, włączając numery wierszy i korzystając z wyszukiwania w przeglądarce.
Czy komentarze zostaną przywrócone?
Komentarze obecne w dostarczonym CSS mogą pojawić się w sformatowanym wyniku. Komentarzy usuniętych przez minifikator nie da się odzyskać z tego pliku, w tym wyjaśnień, dlaczego reguła istnieje. Jeśli potrzebujesz uwag projektowych, wskazówek autora lub historii selektora, zajrzyj do oryginalnego repozytorium źródeł.
Czy narzędzie obsługuje SCSS lub Less?
Ta strona służy do zwykłego CSS, także wynikowego kodu skompilowanego z Sass lub Less. Zmienne, domieszki i dyrektywy właściwe preprocesorom nie są obsługiwanymi danymi wejściowymi. Najpierw skompiluj źródła odpowiednimi narzędziami projektu, a następnie użyj edytora do przejrzenia wynikowego arkusza.