Pemformat CSS - Merapikan CSS Online, Rapi & Terbaca

Percantik CSS di Browser Anda

Pemformat CSS mengubah stylesheet yang minified atau berantakan menjadi CSS yang bersih dan terindentasi rapi secara langsung — tepat di browser Anda. Tempel stylesheet produksi yang terkompresi atau kumpulan aturan tulisan tangan, dan hasil yang dirapikan langsung muncul di panel kanan, dengan satu deklarasi per baris dan spasi yang konsisten.

Dibangun di atas Prettier dengan parser PostCSS-nya, sehingga selektor, properti, media query, dan at-rule semuanya dirapikan dengan gaya standar industri yang andal.

Kasus Penggunaan Umum

Membentangkan Stylesheet Minified

Bentangkan berkas CSS satu baris yang minified menjadi aturan yang mudah dibaca untuk diperiksa, di-debug, dan diedit.

Merapikan Aturan

Normalkan spasi, indentasi, dan jeda baris pada CSS yang disalin dari berbagai sumber berbeda.

Tinjau & Pelajari

Buat stylesheet dari DevTools, tutorial, atau generator mudah dibaca sebelum digunakan kembali.

Cara Merapikan CSS

1

Tempel Stylesheet Anda

Ketik atau tempel CSS ke panel Masukan di sebelah kiri. Anda juga bisa Unggah berkas .css, atau klik Contoh untuk memuat sampel.

2

Lihat Keluaran Instan

Stylesheet yang sudah dirapikan dengan penyorotan sintaks muncul otomatis di panel kanan saat Anda mengetik. Nomor baris dan penghitung ukuran langsung memudahkan menavigasi berkas besar.

3

Sesuaikan Opsi

Pilih indentasi (2, 3, 4, 8 spasi atau Tab) dan atur lebar baris untuk mengontrol pembungkusan baris panjang. Keluaran langsung dirapikan ulang.

4

Salin atau Unduh

Klik Salin untuk mengambil hasil, atau Unduh untuk menyimpannya sebagai berkas .css. Gunakan Edit untuk menyesuaikan keluaran secara manual sebelum mengekspor.

Semuanya berjalan secara lokal. Stylesheet Anda dirapikan sepenuhnya di browser dan tidak pernah diunggah ke server.

Fitur & Opsi

Opsi Pemformatan

Perapian CSS oleh Prettier sebagian besar otomatis, dengan dua kontrol yang menyesuaikan keluaran dengan preferensi Anda. Setiap perubahan langsung merapikan ulang hasilnya.

Opsi	Pilihan	Yang Dikontrol
Indentasi	2 · 3 · 4 · 8 spasi · Tab	Lebar dan karakter indentasi untuk aturan dan deklarasi yang bersarang.
Lebar Baris	80 · 100 · 120	Panjang baris target sebelum nilai panjang dan daftar selektor dibungkus.

Apa yang Dirapikan

Selektor & Deklarasi

Indentasi konsisten, satu deklarasi per baris, dan spasi rapi di sekitar titik dua dan kurung kurawal.

Media Query & At-Rule

@media, @keyframes bersarang, dan at-rule lain diindentasi dan disejajarkan dengan benar.

Alat Bawaan

Pemformatan Langsung

Keluaran diperbarui saat Anda mengetik, dengan penyorotan sintaks dan nomor baris.

Unggah & Unduh

Muat berkas .css lokal atau ekspor hasil yang dirapikan dengan satu klik.

Keluaran Dapat Diedit

Alihkan panel hasil ke mode edit untuk penyesuaian manual sebelum menyalin.

Baru menggunakan alat ini? Klik Contoh untuk memuat stylesheet yang sengaja dibuat berantakan dan lihat ia dirapikan secara instan.

Pertanyaan yang Sering Diajukan

Apakah CSS saya dikirim ke server?

Tidak. Semua pemformatan terjadi secara lokal di browser Anda. Stylesheet Anda tidak pernah diunggah, dicatat, atau disimpan, sehingga aman untuk merapikan CSS milik pribadi atau yang belum dirilis.

Mesin pemformatan apa yang digunakan?

Menggunakan Prettier dengan parser PostCSS-nya, formatter yang sama yang banyak dipakai untuk menjaga konsistensi stylesheet pada proyek nyata. Keluaran mengikuti gaya yang andal dan konvensional.

Apakah mendukung media query dan keyframes?

Ya. At-rule bersarang seperti @media dan @keyframes diindentasi dan disejajarkan dengan benar, bersama selektor standar dan blok deklarasi.

Bisakah saya menyesuaikan keluarannya?

Ya. Atur ukuran indentasi dan lebar baris dari bilah alat untuk mengontrol indentasi dan tempat baris panjang dibungkus. Keluaran langsung dirapikan ulang sehingga Anda dapat melihat pratinjau perubahannya.

Apa beda merapikan CSS dengan minify CSS?

Merapikan CSS membentangkan dan mengindentasi kode agar mudah dibaca, sedangkan minify memperkecil ukuran dengan membuang spasi. Alat ini adalah pemercantik — bukan pemampat. Untuk mengecilkan stylesheet untuk produksi, gunakan alat minify CSS khusus.

Apa yang terjadi jika CSS tidak valid?

Jika parser tidak dapat memahami masukan, alat menampilkan pesan yang menjelaskan masalahnya alih-alih menghasilkan keluaran rusak. Perbaiki masalah yang dilaporkan dan hasil yang dirapikan akan muncul kembali.