Perapih & Pemformat CSS Online (CSS Beautifier)
Format, uraikan minifikasi (unminify), dan rapikan stylesheet CSS yang berantakan atau terkompresi secara instan dan real-time. Pemformat CSS berbasis state-machine kami secara akurat memberi indentasi pada @media query bersarang, @keyframes, variabel CSS (--var), URL https://, dan data URI SVG inline—serta dilengkapi Minifier CSS satu klik saat Anda siap merilis ke produksi.
Cara Merapikan & Menguraikan Minifikasi (Unminify) CSS secara Online
- Tempel CSS Anda: Tempel kode
.min.cssyang terkompresi atau stylesheet yang berantakan ke dalam editor CSS Input di sebelah kiri, atau klik Muat Contoh untuk menguji@mediaquery bersarang, variabel, dan URL. - Pilih Preset atau Sesuaikan Pengaturan: Pilih 2 Spasi, 4 Spasi, Rapikan & Urutkan A–Z, atau Minifikasi (.min.css) dari bilah Preset Cepat, atau sesuaikan indentasi, posisi kurung kurawal, pemisahan selektor, dan kompresi warna di sebelah kanan.
- Periksa Statistik Langsung: Lihat penghitung Input, Output, Aturan, dan Baris diperbarui secara instan saat Anda mengetik atau mengubah opsi.
- Salin atau Unduh: Klik Salin ke Clipboard atau Unduh .css untuk menyimpan stylesheet Anda sebagai
styles.beautified.css(ataustyles.min.cssdalam mode Minifikasi).
Penjelasan Opsi Pemformatan & Optimasi CSS
| Opsi | Fungsinya | Sebelum | Sesudah |
|---|---|---|---|
| Unminify & Indentasi | Menguraikan aturan satu baris dan blok @media / @keyframes bersarang dengan 2, 4, atau 8 spasi atau tab. |
@media(max-width:768px){.box{width:100%}} |
@media (max-width: 768px) { |
| Satu Selektor per Baris | Memisahkan daftar selektor berkoma ke baris baru sambil mengabaikan koma di dalam :is() atau :not(). |
.btn, .card, .modal { ... } |
.btn, |
| Kompresi Nilai Warna | Mengubah rgb() dan kode hex 6 digit menjadi kode hex 3 digit di dalam nilai deklarasi tanpa merusak token di sekitarnya. |
border: 1px solid rgb(255, 0, 0); |
border: 1px solid #f00; |
| Urutkan Properti (A–Z) | Mengurutkan deklarasi sesuai abjad di dalam setiap blok untuk menstandarkan peninjauan kode dan mengungkap properti duplikat. | z-index: 5; display: flex; align-items: center; |
align-items: center; |
Mengapa Menggunakan Perapih CSS Berbasis State-Machine?
Banyak pemformat CSS online sederhana memotong kode pada setiap titik dua (:), titik koma (;), atau kurung kurawal (}). Pendekatan tersebut langsung rusak begitu stylesheet Anda menyertakan fitur CSS modern seperti:
- At-Rule Bersarang & CSS Nesting Asli: Query
@media, query fitur@supports, animasi@keyframes, blok@layer, dan selektor anak bersarang memerlukan pelacakan indentasi multi-level. - URL Eksternal & Data URI SVG Inline: Properti seperti
background: url("https://...")atauurl("data:image/svg+xml;utf8,<svg...>")mengandung titik dua dan titik koma yang tidak boleh dipisahkan sebagai pembatas properti CSS. - String Content Pseudo-Element: Deklarasi seperti
content: "Item: 1; Status: OK"tetap mempertahankan karakter di dalamnya dan spasi secara utuh. - Peringkasan Warna Akurat Sesuai W3C: Nama warna hanya disingkat apabila ekuivalen hex-nya benar-benar lebih pendek dan 100% identik dalam spesifikasi CSS (misalnya,
white→#fffdanblack→#000, sementara membiarkangreentetapgreenkarena#008000lebih panjang dan#0f0sebenarnya adalahlime).
Pertanyaan yang Sering Diajukan
Bagaimana cara menguraikan minifikasi (unminify) file .min.css secara online?
Tempel kode .min.css Anda yang terkompresi ke dalam kotak CSS Input di sebelah kiri. Alat ini secara otomatis menguraikan selektor, deklarasi, @media query, dan @keyframes menjadi CSS multi-baris dengan indentasi rapi secara real-time.
Apakah perapih CSS ini mendukung @media query, @keyframes, dan URI data:?
Ya. Tidak seperti pemformat berbasis pemisahan sederhana, alat ini menggunakan parser CSS berbasis mesin status (state-machine) yang mempertahankan blok bersarang (@media, @supports, @keyframes, @layer, dan CSS nesting asli) serta titik dua dan titik koma di dalam url("https://..."), URI data:image/svg+xml, dan string content bertanda kutip.
Apakah aman mengurutkan properti CSS secara alfabetis?
Pengurutan alfabetis membuat aturan berukuran besar lebih mudah dipindai dan membantu menemukan deklarasi duplikat. Namun, jika suatu aturan mengandalkan properti shorthand diikuti oleh penimpaan yang lebih spesifik (atau sebaliknya, seperti background-color vs. background), mengubah urutan deklarasi dapat memengaruhi properti mana yang menang. Aktifkan pengurutan ketika aturan Anda tidak bergantung pada urutan penimpaan shorthand.
Bisakah saya juga meminifikasi CSS dengan alat ini?
Bisa. Klik tombol Minifikasi CSS (atau pilih Minifikasi (Satu Baris .min.css) di panel pengaturan) untuk menghapus komentar, spasi kosong, dan titik koma terakhir serta mengompresi nilai warna menjadi stylesheet produksi yang ringkas.
Apakah kode CSS saya diunggah ke server mana pun?
Tidak. Semua pemformatan dan minifikasi CSS berjalan 100% secara lokal di browser Anda menggunakan JavaScript. Stylesheet Anda tidak pernah meninggalkan komputer Anda.