Pemintas CSS Percuma: Padatkan & Optimumkan Kod CSS Dalam Talian

Apakah Pengecil CSS?

Pengecil CSS ialah alat yang mengecilkan fail CSS (Cascading Style Sheets) dengan membuang aksara yang tidak diperlukan oleh pelayar. Alat ini membuang ulasan, ruang tambahan dan pemisah baris, serta memendekkan beberapa corak biasa tanpa mengubah rupa halaman. Hasilnya ialah fail yang lebih kecil, yang boleh dimuat turun dan dihuraikan oleh pelayar dengan lebih pantas.

Cara Pengecilan CSS Berfungsi

Pembangun web menulis CSS dengan ulasan, inden dan baris kosong kerana perkara tersebut menjadikan kod lebih mudah dibaca dan disunting. Pelayar mengabaikan semua pemformatan itu. Pengecil membuangnya, bersama beberapa bait lain yang tidak mempunyai tujuan visual, lalu menghasilkan fail padat untuk digunakan dalam pengeluaran, bukan untuk disunting.

Alat ini menggunakan perubahan berikut:

• Membuang ulasan. Setiap blok /* ... */ dipadamkan.
• Memadatkan ruang kosong. Rentetan ruang, tab dan pemisah baris antara peraturan dikurangkan menjadi tiada ruang, atau satu ruang apabila ruang diperlukan (contohnya, antara .parent dan .child dalam pemilih keturunan).
• Membuang ruang kosong di sekeliling tanda baca. Ruang di sebelah {, }, :, ; dan , dibuang.
• Membuang titik koma tambahan. Titik koma berulang dipadatkan menjadi satu, dan titik koma terakhir sebelum } penutup dibuang.
• Memendekkan warna heks. Warna enam digit seperti #ffffff menjadi #fff apabila setiap pasangan digit sepadan (merah, hijau dan biru). Warna lapan digit dengan alfa, seperti #ffaa00cc, dipendekkan dengan cara yang sama apabila keempat-empat pasangan sepadan.
• Membuang unit daripada nilai berpanjang sifar. 0px, 0em dan 0rem menjadi 0. Nilai peratus dibiarkan kerana 0% tidak sentiasa boleh ditukar ganti dengan 0 biasa (contohnya dalam langkah flex-basis atau @keyframes).
• Membuang sifar di hadapan perpuluhan. 0.5 menjadi .5.

Untuk mengelakkan kerosakan pada fail, alat ini membiarkan tiga jenis kandungan tanpa perubahan: teks di dalam tanda petikan, nilai di dalam url() tanpa petikan, serta kandungan fungsi matematik seperti calc(), clamp(), min() dan max(). Jarak di dalam calc(100% - 20px) penting bagi pelayar, jadi alat ini mengekalkannya tepat seperti asal.

Alat ini tidak menggabungkan pemilih pendua, memadam blok peraturan kosong atau menukar warna rgb() kepada heks. Pengoptimuman tersebut sah dan dilakukan oleh alat lain, tetapi pengecil ini menumpukan pada perubahan yang disenaraikan di atas.

Formula Peratusan Pengurangan

Alat ini melaporkan jumlah pengurangan saiz fail sebagai peratusan:

Kedua-dua panjang dikira dalam aksara. Hasilnya dibundarkan kepada dua tempat perpuluhan.

Contoh pengiraan

CSS asal (193 aksara):

Output yang dikecilkan (129 aksara):

Menggunakan formula: (193 − 129) / 193 × 100 = 33.16%. Ulasan telah dibuang, inden dan pemisah baris telah dibuang, 0px menjadi 0, dan #ffffff/#000000 menjadi #fff/#000.

Peratusan tepat bergantung pada input. CSS yang ditulis dengan padat dan mempunyai sedikit ulasan mengalami pengurangan yang lebih kecil. CSS dengan banyak ulasan dan inden yang mendalam boleh mengalami pengurangan yang lebih besar. Lembaran gaya biasa yang dikecilkan dengan alat ini mengalami pengurangan kira-kira 20% hingga 40%.

Cara Menggunakan Alat Ini

1. Tampal kod CSS ke dalam kotak input di sebelah kiri.
2. Versi yang dikecilkan muncul di sebelah kanan secara automatik, tanpa perlu menekan sebarang butang.
3. Semak peratusan pengurangan yang dipaparkan di atas hasil.
4. Pilih "Salin ke Papan Klip" untuk menyalin CSS yang dikecilkan, kemudian tampalkannya ke dalam fail projek.
5. Pilih "Kosongkan" untuk memadamkan kandungan kedua-dua kotak dan bermula semula.

Tiada apa-apa yang ditaip ke dalam alat ini dihantar ke pelayan; pengecilan dijalankan dalam pelayar.

Bila CSS Patut Dikecilkan

Pasukan pembangunan lazimnya mengecilkan CSS sebagai langkah dalam proses binaan mereka, menggunakan alat seperti Webpack atau skrip npm, supaya langkah ini dilakukan secara automatik sebelum setiap pelancaran. Fail sumber yang mudah dibaca dan mempunyai ulasan kekal dalam kawalan versi; hanya binaan untuk pengeluaran dikecilkan. CSS yang dikecilkan lazimnya digunakan di:

• Laman web besar, seperti kedai dalam talian, yang dapat dimuatkan dengan lebih pantas apabila lembaran gayanya lebih kecil.
• Aplikasi satu halaman yang dibina dengan rangka kerja seperti React atau Vue, apabila CSS dihimpunkan bersama JavaScript.
• Halaman web mudah alih, yang penggunanya lebih berkemungkinan menggunakan sambungan yang lebih perlahan.
• E-mel HTML, yang sering mempunyai had saiz yang ketat.

Pengecilan CSS dan Kelajuan Halaman

Fail CSS yang lebih kecil dimuat turun dan dihuraikan dengan lebih pantas, yang boleh memendekkan masa sebelum halaman menjadi kelihatan. Google menyatakan bahawa kelajuan halaman ialah salah satu isyarat yang digunakan dalam kedudukan carian, jadi halaman yang lebih pantas boleh menjadi salah satu faktor kecil antara banyak faktor yang mempengaruhi prestasi laman dalam hasil carian. Pengecilan sahaja tidak menjamin perubahan kedudukan; ia hanyalah satu pengoptimuman antara beberapa pengoptimuman lain, termasuk pemampatan imej dan masa tindak balas pelayan.

Pengecil CSS berbanding Pencantik CSS

Pengecil memampatkan kod untuk pengeluaran. Sebaliknya, pencantik mengambil CSS yang telah dimampatkan dan memformatkannya semula dengan inden serta pemisah baris supaya dapat dibaca semula oleh manusia. Pencantik tidak dapat memulihkan ulasan atau nama pemboleh ubah asal yang telah dibuang semasa pengecilan kerana maklumat itu hilang selepas dipadamkan.

Soalan lazim

Berapakah pengurangan saiz CSS selepas dikecilkan? Dengan alat ini, biasanya 20% hingga 40%, bergantung pada jumlah ulasan, baris kosong dan inden dalam fail asal. Fail yang sejak awal mempunyai sedikit pemformatan akan mengalami pengurangan yang lebih kecil.

Adakah pengecilan CSS mengubah rupa halaman? Tidak. Pengecilan hanya membuang aksara yang diabaikan oleh pelayar, seperti ulasan dan ruang kosong tambahan, serta menulis semula beberapa nilai yang setara (seperti #ffffff kepada #fff). Halaman yang dipaparkan kekal sama.

Patutkah CSS dikecilkan semasa pembangunan? Tidak. Kekalkan versi yang mudah dibaca dan mempunyai ulasan semasa menulis serta menyahpepijat kod. Kecilkan hanya salinan yang dihantar ke pelayan pengeluaran, biasanya sebagai langkah automatik dalam proses binaan.

Bolehkah CSS yang dikecilkan dikembalikan kepada fail asal? Pencantik boleh menyusun semula CSS yang dikecilkan menggunakan inden, tetapi tidak dapat mendapatkan semula ulasan yang dipadamkan atau memulihkan nama deskriptif yang tidak pernah wujud dalam versi yang dikecilkan. Simpan fail sumber asal.

Adakah alat ini menukar warna rgb() kepada heks atau menggabungkan pemilih pendua? Tidak. Alat ini memendekkan warna heks dan membuang aksara yang tidak diperlukan, tetapi tidak menulis semula nilai rgb()/hsl() atau menggabungkan pemilih berulang. Sesetengah alat pengecil lain turut melakukan langkah tambahan ini.

Adakah pengecilan sama seperti pemampatan gzip? Tidak. Pengecilan membuang aksara yang tidak diperlukan daripada kod sumber itu sendiri. Pemampatan Gzip (atau Brotli) digunakan oleh pelayan web apabila fail dihantar, menggunakan algoritma yang berasingan. Menggunakan kedua-duanya bersama-sama menghasilkan fail paling kecil melalui rangkaian.