Pemformat & Pemperindah CSS
Panduan Penggunaan
CSS Formatter memperindah atau meminimalkan kode CSS — termasuk file CSS standar, output preprocessor, dan blok style inline — langsung di browser. CSS yang dihasilkan secara otomatis dan dikompres oleh alat build sering kali tidak dapat dibaca: aturan pada satu baris, selektor yang digabung, dan nilai yang disingkat membuat debugging dan peninjauan menjadi sulit. Alat ini memperluas CSS yang diminimalkan ke format yang dapat dibaca dengan setiap deklarasi pada baris terpisah, indentasi bersarang (untuk query @media dan @keyframes), dan spasi yang konsisten antara selektor, kurung kurawal, dan deklarasi. Mesin pemformatan menggunakan js-beautify yang dikonfigurasi khusus untuk CSS, dengan opsi untuk jumlah spasi indentasi, posisi kurung kurawal pembuka, dan penanganan selektor ganda. Minimalisasi melakukan kebalikannya: menghapus semua spasi putih yang tidak perlu dan mengompres CSS ke format paling ringkas.
- Tempel CSS Anda — Klik panel input dan tempel kode CSS mentah atau yang diminimalkan. CSS standar, Less, Sass yang dikompilasi, dan blok style inline didukung.
- Pilih mode — Pilih "Perindah" untuk output yang dapat dibaca dan berindentasi, atau "Minimalkan" untuk CSS ringkas yang digunakan dalam produksi.
- Konfigurasi indentasi — Pilih ukuran indentasi (2 atau 4 spasi). Ukuran yang konsisten memudahkan tinjauan kode saat bekerja dalam tim.
- Periksa output — Baca CSS yang diformat di panel kanan. Periksa apakah deklarasi sejajar, query @media diindentasi dengan benar, dan selektor ganda ada pada baris terpisah.
- Salin hasilnya — Klik "Salin" untuk membawa CSS yang diproses ke clipboard. Tempel ke editor kode, sistem desain, atau codebase Anda.
- Bandingkan sebelum dan sesudah — Gunakan panel input dan output yang berdampingan untuk memverifikasi secara visual bahwa pemformatan tidak mengubah konten semantik CSS — hanya spasi dan penyelarasan.
Pertanyaan yang Sering Diajukan
Apakah CSS saya dikirim ke server?
Tidak. Semua pemformatan dan minifikasi CSS terjadi di browser menggunakan JavaScript native. Kode Anda tetap di perangkat Anda.
Bisakah saya menggunakan alat ini secara offline?
2Kit adalah PWA. Setelah kunjungan pertama, alat di-cache dan bekerja sepenuhnya secara offline.
Apa perbedaan antara mempercantik dan meminifikasi CSS?
Mempercantik memformat CSS dengan indentasi dan jeda baris yang tepat agar mudah dibaca. Meminifikasi menghapus semua spasi dan komentar yang tidak diperlukan untuk mengurangi ukuran file untuk produksi.
Apakah alat ini mendukung CSS modern seperti variabel dan nesting?
Ya. Pemformat menggunakan js-beautify untuk menangani CSS standar termasuk variabel CSS kustom (properti --custom) dan sebagian besar sintaks CSS modern.
Apakah pemformat CSS ini gratis?
Ya. 2Kit sepenuhnya gratis, tidak memerlukan akun, dan tidak ada batas penggunaan.
Implementasi Teknis
Semua pemrosesan berjalan sepenuhnya di browser Anda — tidak ada data yang pernah dikirim ke server mana pun. Alat ini bekerja sepenuhnya offline sebagai Aplikasi Web Progresif (PWA): setelah kunjungan pertama, semua halaman dan aset di-cache oleh Service Worker dan tetap tersedia tanpa koneksi internet. Data masukan Anda tidak pernah meninggalkan perangkat Anda, menjadikannya aman untuk konten sensitif termasuk kunci API, kata sandi, konfigurasi pribadi, dan dokumen rahasia.