Formatowanie CSS
Nadaj arkuszowi stylów wcięcia, żeby dało się go przeczytać, w całości w twojej przeglądarce. Nic nie jest zmieniane w nazwach, skracane ani normalizowane.
Działa w całości w twojej przeglądarce. Nic nie jest wysyłane, logowane ani przechowywane.
Wklej zminifikowany albo źle wcięty arkusz stylów i przeczytaj go porządnie. Formatowanie odbywa się w twojej przeglądarce, a w arkuszu nie zmienia się nic poza białymi znakami.
Jak to działa
Arkusz jest dzielony na kawałki — komentarze, łańcuchy, adresy, nazwy, liczby, nawiasy okrągłe i klamrowe — a potem zapisywany od nowa. Każda reguła dostaje własny blok, każdy selektor z listy własny wiersz, a każda deklaracja własny wiersz wewnątrz reguły. Zagnieżdżone reguły, media queries i keyframes są wcinane razem z nią.
Białe znaki są zachowywane, chyba że da się wykazać, że nic nie znaczą. To odwrotność tego, co robi większość formatterów, i jest to zamierzone: w CSS spacja między dwoma selektorami to kombinator potomka, więc „.a .b” i „.a.b” wybierają różne elementy. Spacja jest usuwana tylko przed przecinkiem, średnikiem lub nawiasem zamykającym i po nawiasie otwierającym, gdzie CSS nie może jej odczytać jako czegokolwiek.
Jedyna dodawana spacja to ta po dwukropku deklaracji. Odróżnienie tego dwukropka od dwukropka pseudoklasy to powód, dla którego formatter patrzy naprzód do najbliższego nawiasu zamykającego lub średnika, zanim zdecyduje, co czyta.
Przykłady
| Przypadek | Dane wejściowe | Wynik |
|---|---|---|
| Reguła zapisana w jednej linii | a{color:red;margin:0} | a { color: red; margin: 0; } |
Najczęściej zadawane pytania
Czy mój arkusz stylów jest gdzieś wysyłany?
Nie. Formatter to JavaScript działający na tej stronie. Nic nie jest przesyłane, rejestrowane ani przechowywane: możesz odłączyć sieć, a narzędzie dalej będzie działać.
Czy także minifikuje?
Nie, i to decyzja, a nie przeoczenie. Minifikacja CSS oznacza rozstrzyganie, które białe znaki mają znaczenie, a które nie, a pomyłka w tej kwestii zmienia elementy, do których stosuje się reguła — po cichu i w sposób, o którym dowiedziałbyś się na produkcji. To inna praca i zasługuje na to, by zrobić ją dobrze albo wcale.
Czy poprawi albo uporządkuje moje wartości?
Nie. Nie zamieni koloru szesnastkowego na małe litery, nie skróci #ffffff, nie usunie wiodącego zera, nie przestawi twoich deklaracji ani nie doda prefiksów producentów. Każda z tych rzeczy to opinia o twoim kodzie, a nie kwestia układu, a niektóre zmieniają działanie. Przesuwane są tylko białe znaki.
Czy rozumie Sass lub Less?
Częściowo, i uczciwie: układa zagnieżdżone reguły, co te języki mają wspólnego z nowoczesnym CSS. Nie ma pojęcia, co oznacza mixin, zmienna czy dyrektywa sterująca, więc traktuje je jak tokeny, którymi są. Nic się nie gubi, ale nie oczekuj, że będzie wiedział, że @if otwiera gałąź.
Co z data URI?
Przetrwa. Url() bez cudzysłowów jest odczytywany jako jeden kawałek aż do nawiasu zamykającego, bo data URI często zawiera średnik, a odczytanie go jako końca deklaracji rozcięłoby wartość na dwie części.
Warto wiedzieć
- Wynik zawiera dokładnie te kawałki, które zawierało wejście. Jedyny dodatek to średnik po ostatniej deklaracji w bloku, który jest wszędzie bezpieczny i utrzymuje wynik stabilnym, gdy reguła urośnie później o kolejny wiersz.
- Niezamknięty łańcuch, komentarz lub url() jest odrzucany zamiast przeformatowany, bo od tego miejsca narzędzie nie potrafi już odróżnić kodu od tekstu.
- Układ jest deterministyczny: ten sam arkusz z tą samą opcją zawsze daje ten sam wynik, a sformatowanie już sformatowanego arkusza niczego nie zmienia.
Wszystkie narzędzia z kategorii Kod