Minify CSS online langsung di browser Anda
Untuk minify CSS, cukup tempel stylesheet Anda: alat ini menghapus komentar, baris baru, dan setiap spasi yang tidak dibutuhkan browser. Versi yang sudah dikompres muncul di bawahnya dalam sepersekian detik, lengkap dengan jumlah byte yang dihemat. Tidak perlu instalasi atau langkah build, dan apa pun yang Anda tempel tidak pernah diunggah: semuanya berjalan online di browser Anda.
Cara minify CSS online
- Tempel atau ketik CSS Anda di kotak CSS Mentah.
- Sesaat setelah Anda berhenti mengetik, CSS hasil minify muncul di bawahnya beserta ukuran asli, ukuran baru, dan persentase yang dihemat. Tidak ada tombol yang perlu ditekan.
- Ketuk Salin ke papan klip untuk menempelkannya ke proyek Anda, atau Unduh .min.css untuk menyimpannya sebagai file.
CSS yang rusak tidak membuat alat ini macet: kode tetap di-minify sejauh masih bisa dibaca, jadi Anda bisa menempel kode yang belum selesai lalu memperbaikinya nanti.
Apa saja yang dihapus CSS minifier ini
Setiap aturan tetap bekerja persis seperti sebelumnya; yang dibuang hanya bagian untuk mata manusia. Komentar hilang, spasi kosong dirapatkan, spasi di sekitar kurung kurawal, titik dua, dan koma dihapus, dan titik koma terakhir sebelum kurung kurawal penutup dibuang. String dalam tanda kutip, nilai url(), dan karakter escape disalin tanpa diubah, sehingga "a b" tetap mempertahankan spasinya.
Sebelum: /* Buttons */ .btn { color: #fff; margin: 0 auto; }
Sesudah: .btn{color:#fff;margin:0 auto}
Compress CSS: seberapa kecil file Anda nanti?
Hasilnya tergantung pada banyaknya komentar dan spasi di file. Stylesheet yang banyak komentarnya dan berindentasi rapi sering menyusut seperempat hingga setengahnya. Di bawah hasil, Anda melihat ukuran asli, ukuran setelah minify, dan persentase penghematan yang tepat.
File yang lebih kecil lebih cepat diunduh dan halaman tampil lebih cepat. Untuk transfer yang lebih kecil lagi, server web Anda juga bisa mengirim file hasil minify dengan gzip atau Brotli.
Mempertahankan atau menghapus komentar lisensi
Komentar yang diawali /*! biasanya berisi lisensi atau pemberitahuan hak cipta sebuah library. Secara bawaan komentar ini dipertahankan, karena banyak lisensi mewajibkan pemberitahuan itu ikut bersama kodenya.
Hapus centang Pertahankan komentar lisensi di bawah kotak input untuk ikut membuangnya dan mendapatkan file sekecil mungkin.
Apa itu file min CSS dan amankah untuk produksi?
File .min.css adalah salinan stylesheet yang sudah di-minify, diberi nama begitu agar berdampingan dengan sumber yang mudah dibaca, misalnya style.css dan style.min.css. File ini aman dipakai di situs yang sudah live, karena yang hilang hanya karakter yang tidak memengaruhi cara browser membaca stylesheet. Simpan file asli Anda sebagai sumber.
Pertanyaan yang sering diajukan
Apa fungsi CSS minifier?
CSS minifier menghapus semua hal yang tidak dibutuhkan browser untuk membaca style Anda: komentar, baris baru, indentasi, spasi di sekitar kurung kurawal, titik dua, dan koma, serta titik koma terakhir di setiap aturan. Hasilnya bekerja persis seperti aslinya tetapi lebih kecil, sehingga lebih cepat diunduh.
Bagaimana cara pakai CSS minifier online ini?
Tempel CSS Anda di kotak "CSS Mentah". Versi hasil minify muncul di bawahnya sesaat kemudian, bersama jumlah byte yang dihemat. Ketuk "Salin ke papan klip" untuk menempelkannya ke proyek, atau "Unduh .min.css" untuk menyimpannya sebagai file.
Apakah compress CSS sama dengan minify CSS?
Ya, dalam pemakaian sehari-hari keduanya berarti mengecilkan teks tanpa mengubah fungsinya. Tempel stylesheet di sini lalu salin atau unduh hasil kompresnya. Agar transfer lebih kecil lagi, server web Anda juga bisa menerapkan gzip atau Brotli pada file hasil minify.
Bagaimana cara menghapus semua komentar dari CSS?
Tempel CSS Anda dan hapus centang "Pertahankan komentar lisensi". Semua komentar akan dibuang, termasuk yang diawali /*!. Biarkan opsi itu tercentang jika Anda ingin menyimpan pemberitahuan lisensi tersebut.
Bisakah compress CSS file yang besar?
Bisa, karena semuanya diproses di browser Anda. Penghematannya tergantung banyaknya komentar dan spasi; stylesheet yang berindentasi rapi sering menyusut seperempat hingga setengahnya. Persentase di bawah hasil menunjukkan angka pasti untuk file Anda.
Apakah CSS hasil minify aman untuk produksi?
Ya. Proses minify hanya menghapus karakter yang tidak berpengaruh pada cara browser membaca stylesheet. String, nilai url(), dan karakter escape disalin persis seperti yang Anda tulis. Simpan file asli sebagai sumber dan gunakan versi .min.css di situs.
Bisakah CSS yang sudah di-minify dikembalikan seperti semula?
Tidak persis, karena format aslinya sudah dibuang, tetapi Anda bisa membuatnya mudah dibaca lagi. Tempel kode hasil minify ke Formatir Kode untuk merapikan indentasinya. Komentar yang sudah dihapus tidak kembali, jadi selalu simpan file sumber Anda.
Apa yang terjadi jika CSS saya ada yang salah?
Alat ini tidak macet. CSS Anda tetap di-minify sejauh masih bisa dibaca, jadi Anda bisa menempel kode yang belum selesai dan memperbaikinya kemudian.
