Jak działa upiększanie CSS
Upiększacz czyta arkusz stylów znak po znaku, śledzi głębokość zagnieżdżenia każdego bloku i emituje go ponownie ze spójnymi odstępami. Nigdy nie zmienia tego, co style robią — tylko to, jak wyglądają w pliku.
- Tokenizacja. Biblioteka skanuje wejście do strumienia tokenów: selektory, nazwy właściwości, wartości, reguły at-rules, komentarze i nawiasy klamrowe, dwukropki i średniki je oddzielające. Ciągi znaków i wartości url() są rozpoznawane jako pojedyncze jednostki, więc nawias klamrowy wewnątrz właściwości content nigdy nie zostanie pomylony z ogranicznikiem bloku.
- Śledzenie zagnieżdżenia. Przechodząc przez strumień tokenów, upiększacz utrzymuje bieżący poziom wcięcia. Każdy otwierający nawias klamrowy pogłębia poziom — niezależnie od tego, czy należy do bloku reguł, zapytania media czy bloku keyframes — a każdy zamykający go cofa. Ta głębokość decyduje o tym, ile jednostek wcięcia znajdzie się przed każdą zwracaną linią.
- Zastosowanie opcji. Wybór wcięcia (2 spacje, 4 spacje lub tabulator) wyznacza szerokość jednego poziomu. Ustawienie stylu nawiasów decyduje, czy otwierający nawias klamrowy przylega do poprzedzającego selektora, czy spada do własnej linii. Pozostałe przełączniki dodają pustą linię między blokami reguł i dzielą zgrupowane selektory na osobne linie.
- Ponowna emisja. Na końcu formater drukuje tokeny z powrotem z wcięciem i podziałami linii, które obliczył, umieszczając jedną deklarację w wierszu i pojedynczą spację po każdym dwukropku. Wynik to ten sam arkusz stylów, rozłożony tak, by człowiek mógł przeglądać kaskadę.
Dlaczego upiększać CSS
- Czytanie zminifikowanych arkuszy stylów. Produkcyjny CSS trafia w jedną linię bez odstępów między regułami. Upiększenie przywraca podziały linii i wcięcia, dzięki czemu możesz znaleźć selektor za błędem układu i zobaczyć dokładnie, które deklaracje ustawia — nawet bez source mapy.
- Porządkowanie niekonsekwentnych plików. Arkusz stylów dotknięty przez wiele osób dryfuje w mieszane wcięcia i style nawiasów. Jeden przebieg przez upiększacz normalizuje cały plik do jednego układu, dzięki czemu następny diff pokazuje prawdziwe zmiany kaskady, a nie szum białych znaków.
- To narzędzie nie obciąża Twojej strony. Większość online'owych formaterów ładuje całą bibliotekę w momencie otwarcia strony. Ten ładuje js-beautify leniwie dopiero gdy klikniesz Upiększ lub włączysz tryb na żywo, więc otwarcie strony kosztuje kilka kilobajtów zamiast kilkuset, a pierwsze renderowanie pozostaje szybkie.
- Nic nie opuszcza przeglądarki. Upiększacz działa całkowicie na Twoim urządzeniu. Twój CSS nigdy nie jest wysyłany na serwer, co ma znaczenie, gdy arkusz stylów, który sprawdzasz, należy do klienta, zawiera wewnętrzne nazwy klas lub jest objęty umową o poufności.
Typowe zastosowania
Upiększanie CSS pojawia się zawsze, gdy ktoś musi przeczytać arkusz stylów, który nie był pisany z myślą o czytaniu.
- Debugowanie produkcji: wklej zminifikowany arkusz stylów pobrany z zakładki Network, by znaleźć regułę nadpisującą oczekiwany układ.
- Przygotowanie do code review: przeformatuj niekonsekwentnie wcięty arkusz kontrybutora przed otwarciem pull requesta, żeby recenzenci widzieli zmiany kaskady, a nie chaos układu.
- Nauka i audyt: rozwiń arkusz stylów frameworka lub biblioteki komponentów, by przestudiować strukturę selektorów, zapytań media i własnych właściwości.
Przykład krok po kroku
Weź zminifikowany jednowierszowiec: a{color:red;margin:0}b{padding:0}. Wklej go powyżej z wcięciem ustawionym na 2 spacje i stylem nawiasów Zwinięty, następnie kliknij Upiększ. Otrzymasz czytelne bloki: a { w własnym wierszu, deklaracje color: red; i margin: 0; wcięte o jeden poziom głębiej, nawias zamykający wyrównany pod selektorem i reguła b poniżej. Przełącz styl nawiasów na Rozwinięty, a każdy otwierający nawias klamrowy spada do własnej linii. Zmień wcięcie na Tabulatory i każdy poziom zmieni dwie spacje na znak tabulacji. Style są identyczne; zmienia się tylko układ.
FAQ
Czy to działa w mojej przeglądarce?
Tak. Biblioteka js-beautify jest ładowana leniwie za pierwszym razem, gdy klikniesz Upiększ lub włączysz tryb na żywo, a następnie buforowana. Twój CSS nigdy nie opuszcza strony — nie ma żadnego round-tripu do serwera ani uploadu.
Czy upiększanie to to samo co odminifikowanie?
Przywraca czytelne formatowanie — wcięcia, podziały linii i odstępy — ale nie może przywrócić komentarzy usuniętych przez minifikację ani odtworzyć żadnej struktury, której nigdy nie było w pliku. Jedynie reformatuje deklaracje i selektory, które są obecne.
Czy upiększanie zmienia sposób renderowania moich stylów?
Nie. Upiększanie tylko dodaje i usuwa białe znaki i podziały linii; kaskada jest nienaruszona, a strona renderuje się identycznie. Kolejność właściwości, specyficzność i wartości pozostają dokładnie tak, jak je napisałeś.
Co oznaczają opcje stylu nawiasów?
Zwinięty utrzymuje otwierający nawias klamrowy w tej samej linii co selektor (a {), co jest powszechną konwencją CSS. Rozwinięty opuszcza każdy otwierający nawias klamrowy do własnej linii pod selektorem. Przełączniki pustej linii i jednego selektora w wierszu kontrolują odstępy między regułami oraz sposób rozłożenia zgrupowanych selektorów takich jak h1, h2, h3.
Przeglądarkowe upiększanie CSS daje czytelny arkusz stylów bez kroku budowania ani uploadu. Wklej zminifikowany lub nieuporządkowany plik, wybierz wcięcie i styl nawiasów, a następnie skopiuj lub pobierz wynik. Nic nie opuszcza Twojego urządzenia, nie ma konta, a biblioteka ładuje się tylko wtedy, gdy o to poprosisz — więc otwarcie tej strony kosztuje kilka kilobajtów, nie megabajt.