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

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Generator losowych liter

Generuj losowe litery A-Z. Wybierz liczbę, wielkie litery, małe litery lub zapis mieszany i użyj wyniku w grach, zadaniach lub lekcjach.

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Próbnik kolorów HEX

Wybierz lub wpisz kolor HEX i sprawdź RGB, HSL, przybliżone CMYK, luminancję względną oraz kontrast z bielą i czernią.