Softonic

Formater CSS

Krok 1 / 2
Formatuj CSS

Otwierasz produkcyjny arkusz stylów w DevTools i wszystko jest w jednej linii. Ten formater rozpakowuje zminifikowany CSS do czytelnej postaci: jedna deklaracja na linię, wcięcie dwóch spacji i pusta linia między regułami. Działa na surowym CSS, wyniku Sass lub PostCSS oraz na CSS wewnątrz wbudowanych bloków <style>. Wklejony CSS jest wysyłany na nasz serwer w celu sformatowania i przenoszony w linku strony podczas przechodzenia między krokami narzędzia. Komentarze blokowe są usuwane podczas formatowania.

Jak sformatować CSS

  1. 1

    Wklej CSS

    Zminifikowany w jednej linii, częściowo sformatowany albo już ładny. Parser się tym nie przejmuje.

  2. 2

    Sformatuj

    Kliknij Sformatuj CSS. Każda deklaracja trafia do własnej linii z wcięciem dwóch spacji, a pusta linia oddziela reguły.

  3. 3

    Sprawdź

    Przejrzyj wynik. Kolejność właściwości jest zachowana, ale komentarze blokowe zostają usunięte.

  4. 4

    Skopiuj

    Skopiuj sformatowany CSS do schowka i wklej go z powrotem do swojego projektu.

Przed i po

Wejście (zminifikowane):

.btn{background:#2563eb;color:#fff;padding:.5rem 1rem;border-radius:6px}.btn:hover{background:#1d4ed8}

Wyjście (sformatowane):

.btn {
  background: #2563eb;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.btn:hover {
  background: #1d4ed8;
}

Co robi formater

Zachowanie Wartość
Deklaracje Jedna na linię, wcięte dwoma spacjami
Pusta linia między regułami 1
Nawias otwierający W tej samej linii co selektor
Nawias zamykający W osobnej linii
Kolejność właściwości Zachowana, nigdy nie sortowana ponownie
Komentarze blokowe Usuwane podczas formatowania

Co usuwa formater

/* Ten komentarz znika po sformatowaniu */
.button { background: #2563eb; }

Komentarze blokowe (/* ... */) są usuwane z wyniku. Jeśli ich potrzebujesz, zachowaj kopię oryginalnego pliku przed formatowaniem.

Reguły zagnieżdżone (Sass / nowoczesne zagnieżdżanie CSS)

Formater wcina reguły zagnieżdżone zgodnie z ich głębokością:

.card {
  padding: 1rem;

  & .title {
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

Składnia Sass/Less (bez &) również jest tolerowana. Reguły specyficzne dla Sass, takie jak @mixin, @include i @extend, są przepuszczane w całości, ale nie są głęboko przeformatowywane. Do pełnego formatowania Sass użyj narzędzia świadomego Sass, takiego jak Prettier.

Kiedy nie formatować

  • Na produkcji: minifikuj, nie formatuj. Sformatowany CSS jest 2-3 razy większy niż zminifikowany.
  • Przed porównaniem różnic: sformatuj obie strony. Porównywanie pliku zminifikowanego z ładnym daje nieczytelne różnice.
  • Wewnątrz potoku budowania: pozwól Prettierowi albo formaterowi twojego frameworka zadbać o spójność. Tego narzędzia użyj do jednorazowego porządkowania.

Najczęściej zadawane pytania

Obsługuje standardowy CSS i zagnieżdżanie CSS (specyfikacja z 2023 roku). Składnia specyficzna dla Sass, jak @mixin, @include, @extend i zmienne z $, jest przepuszczana w całości, ale nie jest głęboko przeformatowywana. Do pełnego formatowania Sass użyj narzędzia świadomego Sass, takiego jak Prettier.

Tak. Formatowanie odbywa się na naszym serwerze, więc wklejony CSS jest wysyłany przy każdej prośbie o formatowanie i jest przenoszony w linku strony podczas przechodzenia między krokami narzędzia. Nie jest zapisywany na żadnym koncie ani później ponownie wykorzystywany.

Nie, jeśli jest składniowo poprawny. Białe znaki w CSS są nieistotne poza wartościami, a formater jedynie przestawia białe znaki i podziały linii. Kolejność deklaracji i same wartości są zachowane.

Tak. Skopiuj CSS z wnętrza znaczników <style>, wklej, sformatuj i wklej z powrotem. Formater działa wyłącznie na CSS, więc wklej zawartość CSS, a nie otaczający HTML.

Formater usuwa komentarze blokowe (/* ... */), aby wynik był jednolity. Jeśli chcesz je zachować, zrób kopię oryginalnego CSS przed formatowaniem.

Powiązane narzędzia

Generator konfiguracji webpack

Utwórz plik webpack.config.js dla webpacka 5 do czystego JavaScriptu, Reacta lub Vue: TypeScript, Babel, CSS lub Sass, obrazy, HtmlWebpackPlugin, serwer deweloperski i polecenie npm install.

Generator kolorów analogicznych

Twórz pięciokolorowe palety analogiczne z dowolnego koloru bazowego: klasyczną trójkę, dwie zewnętrzne barwy oraz wartości hex, RGB i HSL.

Generator fikcyjnych numerów telefonu

Generuj do 50 fikcyjnych numerów z oficjalnie zastrzeżonych zakresów w pięciu krajach.

Walidator XSD

Waliduj dokument XML wobec schematu XSD i zgłaszaj niezgodności elementów i typów z dokładnymi numerami wierszy.

Kod na obraz

Wklej kod, ustaw motyw, kolory, rozmiar czcionki, odstępy, nagłówek i numery wierszy, sprawdź podgląd canvas i pobierz PNG. Renderowanie zwykłego tekstu, bez podświetlania składni.

Dekoder Protocol Buffers

Dekoduj lokalnie bajty Protobuf z zapisu hex, Base64, Base64URL, tekstu lub pliku, analizuj pola i eksportuj prywatny raport.

Narzędzie jest dostępne w innych językach