Alat developer / 16

CSS Formatter & Prettifier

Format, beri indentasi, dan uraikan aturan CSS, daftar selektor, dan deklarasi properti menjadi kode yang mudah dibaca.

CSS Formatter & Prettifier: TOEA mengurai aturan CSS, media query, dan deklarasi, menormalkan spasi properti dan indentasi blok. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori: Tools developer
Dijalankan: Di browser Anda
Biaya: Gratis · tanpa daftar
Ketersediaan: Siap digunakan

Pemformat & Perapih CSSPemrosesan lokal

Berjalan sepenuhnya di browser Anda

Output CSS yang Dirapikan

body {
  font-family: system-ui,sans-serif;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #f8f9fa;
}

.header a {
  color: #0066cc;
  text-decoration: none;
}

.header a:hover {
  text-decoration: underline;
}

@media (max-width:600px) {
  .header {
    flex-direction: column;
    padding: 1rem;
  }
}

Membaca stylesheet milik orang lain

Memformat file yang sudah diminify membuatnya mudah dibaca, tetapi tidak menjadikannya sama dengan source asal: minifier menggabungkan rule dan mengubah urutan deklarasi, jadi bersiaplah melihat selector yang dikelompokkan dan nilai shorthand. Untuk menemukan rule yang memberi style pada suatu elemen, developer tools browser lebih cepat, dan panel Sources dapat melakukan pretty-print pada file yang sudah diminify secara langsung. Memformat dua versi stylesheet lalu membandingkannya di pemeriksa diff akan menunjukkan perubahan akibat suatu update.

Yang tidak diubah oleh formatting

Formatter mengatur indentasi dan spasi; formatter tidak mengurutkan properti, memperbaiki nama properti yang salah eja, menambahkan vendor prefix, atau menghapus deklarasi duplikat, sehingga colour: red tetap diteruskan tanpa perubahan. Rangkaian whitespace diciutkan di mana pun, termasuk di dalam string yang diapit tanda kutip, jadi periksa nilai content yang bergantung pada beberapa spasi. Saat file siap dipublikasikan, kompres kembali dengan CSS minifier.

Cara menggunakannya

Tempel kode CSS mentah atau yang sudah di-minify.
Pilih indentasi 2-space atau 4-space.
Klik Format CSS lalu salin atau download hasilnya.

Privasi & batasan

Semua pemformatan CSS berjalan secara lokal di browser Anda.

Alat terkait

Pertanyaan umum

Apakah mendukung @media query?

Ya, at-rules bersarang dan media query diformat dengan indentasi yang benar.

Apakah mengubah kode warna atau selektor?

Tidak. Pemformatan hanya menyesuaikan whitespace, indentasi, dan struktur tanpa mengubah nilai properti.

Alat gratis · berjalan di browser anda · tanpa perlu akun