Peminifikasi CSS

Peminifikasi CSS adalah alat gratis yang menghapus karakter yang tidak diperlukan dari CSS, lalu menampilkan stylesheet yang telah diminifikasi beserta jumlah karakter sebelum dan sesudah proses.

Apa fungsi minifikasi CSS?

Minifikasi CSS mengurangi jumlah karakter dalam stylesheet dengan menghapus pemformatan yang tidak dibutuhkan browser. Biasanya, ini mencakup indentasi, pergantian baris, komentar, serta spasi opsional di sekitar tanda baca.

Browser tetap menerima aturan CSS, selektor, dan nilai deklarasi. Tampilan yang dihasilkan seharusnya tidak berubah, sedangkan ukuran file yang dikirim ke browser menjadi lebih kecil. Manfaat praktis minifikasi stylesheet CSS bergantung pada file aslinya, kompresi HTTP, dan caching browser. Jika stylesheet sudah dikompresi dengan baik, pengurangan jumlah byte yang ditransfer mungkin hanya sedikit.

Minifikasi berguna sebelum deployment, saat memeriksa CSS pihak ketiga yang terlalu besar, atau ketika ingin mengetahui seberapa besar kontribusi pemformatan pengembangan terhadap ukuran file. Proses ini berbeda dari pengoptimalan yang menghapus selektor tak terpakai, menggabungkan aturan yang setara, atau menulis ulang deklarasi. Alat ini tidak diklaim melakukan operasi yang lebih luas tersebut.

Bagaimana cara menggunakan Peminifikasi CSS?

Tempelkan stylesheet ke kolom CSS dan jalankan alat, lalu salin hasil CSS yang diminifikasi ke alur build atau deployment yang sesuai. Simpan file sumber CSS yang mudah dibaca dan jangan menggantinya secara permanen dengan salinan yang telah diminifikasi.

1. Mulailah dengan CSS sumber yang digunakan situs atau aplikasi.
2. Pastikan CSS dapat diurai dengan benar sebelum diminifikasi.
3. Tempelkan CSS ke kolom CSS, lalu jalankan alat.
4. Bandingkan Karakter CSS dengan Karakter CSS yang diminifikasi.
5. Uji hasilnya pada halaman staging, termasuk dalam keadaan responsif, gaya cetak, dan komponen interaktif.

Minifikasi CSS dilakukan di server. CSS yang dikirim akan diteruskan ke server melalui HTTPS dan tidak disimpan. Jika stylesheet memuat URL rahasia, nama host internal, atau materi sensitif lainnya, pertimbangkan apakah pengirimannya ke utilitas sisi server sesuai dengan kebijakan pengelolaan data organisasi Anda.

Bagaimana cara membaca hasilnya?

Hasilnya memuat CSS yang telah diubah dan dua jumlah karakter, sehingga Anda dapat memeriksa output serta melihat pengurangannya secara langsung. Karakter CSS adalah panjang teks yang dikirim, sedangkan Karakter CSS yang diminifikasi adalah panjangnya setelah minifikasi.

Angka tersebut merupakan jumlah karakter yang dihitung dengan fungsi penghitung panjang yang mendukung karakter multibyte. Jangan menganggapnya sebagai perkiraan pasti ukuran transfer jaringan. Karakter UTF-8 dapat menggunakan lebih dari satu byte, sedangkan kompresi Brotli atau gzip bisa mengubah secara signifikan ukuran yang dikirim melalui HTTP.

Alat ini tidak menyediakan kolom validasi atau kesalahan tersendiri. Karena itu, jangan menggunakannya sebagai validator CSS. Masalah umum seperti kurung kurawal yang tidak berpasangan, titik dua yang hilang, string yang tidak ditutup, komentar yang salah format, atau nesting yang tidak valid perlu diperiksa dengan alat pengembang browser, linter, atau validator yang memahami standar. CSS yang tidak valid mungkin menghasilkan output yang tetap terlihat ringkas, tetapi tidak bekerja sebagaimana mestinya.

Contoh sederhana minifikasi CSS

Versi yang diminifikasi secara konvensional menghapus pemformatan tanpa mengubah aturan itu sendiri.

CSS

p { color: red; }

CSS yang diminifikasi

p{color:red}

Dalam contoh ini, input yang mudah dibaca berisi 17 karakter dan bentuk ringkasnya berisi 12 karakter. Spasi dan tanda baca di dalam string yang diapit tanda kutip harus tetap menjadi bagian dari nilai.

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

CSS yang diminifikasi

.notice,.warning{color:#c00;margin:0 1rem}

Menghapus semua spasi tanpa mempertimbangkan sintaks tidaklah aman. Spasi dapat berfungsi sebagai kombinator turunan, sedangkan operator aritmetika dalam fungsi seperti calc() memiliki persyaratan spasi. String, URL data, pengenal dengan escape, dan nilai properti kustom juga perlu ditangani dengan memahami sintaks.

Karakter beraksen dan karakter non-Latin dapat muncul dalam string serta, selama sesuai dengan aturan pengenal CSS, dalam selektor. Angka, tanda desimal, persentase, dan satuan merupakan bagian dari sintaks, bukan sekadar teks dekoratif. Karena itu, semuanya tidak bisa dipersingkat begitu saja tanpa memahami deklarasinya. Stylesheet kosong tidak memiliki CSS untuk diminifikasi. Untuk stylesheet yang sangat besar, minifier saat proses build biasanya lebih mudah digunakan secara berulang dan diaudit daripada menyalin teks melalui formulir online.

Kapan minifikasi CSS tidak perlu dilakukan?

Minifikasi biasanya tidak perlu diulang jika file sudah diminifikasi atau dibuat sebagai aset produksi yang ringkas. Minifikasi CSS untuk kedua kalinya mungkin hanya menghemat sedikit ruang atau tidak sama sekali, sekaligus menambahkan transformasi lain ke proses rilis.

• Jangan memperindah format lalu meminifikasi ulang CSS yang hanya akan dibaca browser atau sistem build.
• Jangan gunakan minifikasi sebagai pengganti penghapusan aturan framework yang tidak terpakai atau deklarasi duplikat.
• Jangan berharap pengurangan karakter dapat mengungkap permintaan yang menghambat rendering, masalah cache, atau pemuatan font yang lambat.
• Jangan buang sumber yang telah diformat, terutama saat men-debug spesifisitas, cascade layer, atau media query.

Jika CSS dibundel secara otomatis, gunakan minifier dalam pipeline tersebut agar setiap rilis menerapkan pengaturan yang sama. Jika aset terkait diterapkan secara manual, Peminifikasi HTML dan JS pemampat dapat menjalankan operasi serupa pada jenis file tersebut.

Pertanyaan umum

Apakah minifikasi CSS mengubah spesifisitas selektor?

Minifikasi yang benar tidak mengubah spesifisitas selektor karena komponen dan urutan selektor seharusnya tetap sama. Namun, bandingkan selektor kompleks dengan cermat jika sumber menggunakan escape, pseudo-class yang lebih baru, atau sintaks hasil pembuatan otomatis yang mungkin tidak dipahami minifier lama.

Bisakah properti kustom CSS ikut diminifikasi?

Properti kustom dapat disertakan, tetapi nilainya mungkin perlu mempertahankan token dan spasi untuk substitusi dengan var() pada tahap berikutnya. Uji deklarasi yang berisi perhitungan, fallback, atau string tertanam pada browser yang didukung proyek Anda. Jangan menganggap setiap spasi yang terlihat pasti opsional.

Apakah alat ini membuat source map?

Tidak ada hasil source map yang disediakan. Jika debugging produksi memerlukan pemetaan CSS ringkas kembali ke Sass, Less, atau sumber lain, buat file yang diminifikasi beserta source map melalui compiler atau bundler yang mengetahui struktur file aslinya.

Apakah komentar lisensi akan tetap ada dalam output?

Jangan berasumsi bahwa komentar CSS akan dipertahankan. Jika lisensi suatu dependensi mewajibkan pemberitahuan untuk disertakan bersama kode yang didistribusikan, simpan pemberitahuan tersebut secara terpisah atau periksa output yang dihasilkan sebelum rilis.

Bisakah minifikasi memperbaiki CSS yang rusak?

Tidak. Minifikasi menghapus karakter yang tidak diperlukan, tetapi tidak memperbaiki selektor yang tidak valid, properti yang tidak didukung, aset yang hilang, atau cascade yang salah. Selesaikan dahulu peringatan penguraian dan regresi visual pada file sumber.

Pemeriksaan sebelum deployment

Simpan output yang telah diminifikasi sebagai aset produksi terpisah, pastikan URL dan konten dalam tanda kutip tetap utuh, lalu muat file tersebut pada halaman staging dengan konsol browser terbuka. Bandingkan halaman yang mewakili kondisi penggunaan pada ukuran viewport sempit dan lebar. Setelah itu, pastikan server menerapkan jenis konten, kebijakan caching, dan kompresi HTTP yang diharapkan.