Formatter CSS

Rapikan CSS dengan Prettier: satu deklarasi per baris, spasi konsisten, 2 atau 4 spasi atau tab, dan media query bersarang yang bersih. Berjalan di browser.

Indentasi

Input CSS

Keluaran

Berjalan sepenuhnya di browser Anda. Data Anda tidak pernah diunggah.

Alat Terkait

Lihat Semua

Formatter JSON Validator JSON Formatter XML camelCase snake_case kebab-case PascalCase CONSTANT_CASE

Apa itu Formatter CSS?

Formatter CSS mengubah stylesheet yang di-minify atau tidak konsisten menjadi CSS yang terbaca memakai Prettier: setiap aturan dan deklarasi di barisnya sendiri, spasi di sekitar titik dua dan selektor dinormalkan, dan at-rule bersarang diberi indentasi.

Cara menggunakan Formatter CSS

Tempel CSS ke kotak input atau klik Muat contoh.
Pilih Indentasi.
Klik Format (keluaran juga diperbarui saat Anda mengetik).
Salin atau unduh CSS yang sudah diformat.

Contoh

Masukan

a{color:red;margin:0 auto}

Keluaran

a {
  color: red;
  margin: 0 auto;
}

Kapan menggunakan Formatter CSS

Pakai untuk membaca CSS yang di-minify dari sebuah situs, menormalkan stylesheet tulisan tangan sebelum ditinjau, atau memformat cuplikan CSS untuk dokumen. Alat ini tidak memeriksa nama properti atau nilai – pakai CSS Validator untuk itu. Untuk SCSS atau Less, pilih bahasa tersebut di Code Beautifier.

Cara kerja Formatter CSS

Stylesheet di-parse dengan parser berbasis PostCSS milik Prettier dan dicetak dengan aturan CSS Prettier: spasi mengikuti setiap titik dua, setiap deklarasi diakhiri titik koma, dan selektor dalam daftar ditaruh di baris terpisah. Blok tidak tertutup atau error sintaks lain dilaporkan dengan baris dan kolom.