Beranda>Tutorial Desain Web>Standardisasi WEB

Minifikasi dan kompresi CSS: tips dan alat (1)

Penulis：Eve Cole Waktu Pembaruan：2010-03-17 18:02:24

Pengoptimal CSS

Pilihan:

  • Jangan hapus jeda baris (Ya atau Tidak)
  • CSS yang dapat menangani URL, file, atau teks yang ditempel, dll.

Pos Lotere

Opsi opsional: tidak ada

Bersihkan CSS

Opsi opsional (Anda dapat memilih Ya atau Tidak untuk masing-masing):

  • Susun ulang penyeleksi
  • Susun ulang atribut
  • Optimalkan penyeleksi dan propertinya (0, 1 atau 2)
  • Gabungkan atribut steno
  • Hanya optimalisasi keamanan
  • Kompres warna
  • KompresiFont-berat
  • Pemilih huruf kecil
  • Font yang diatribusikan (huruf kecil atau besar)
  • Hapus garis miring terbalik yang tidak perlu
  • Konversi! peretasan penting
  • Hapus titik koma terakhir ";"
  • menyimpan catatan
  • Hilangkan properti yang tidak valid (CSS2.1, CSS2.0 atau CSS1.0)
  • masukan sebagai file

Pingat

Opsi opsional (Anda dapat memilih Ya atau Tidak untuk masing-masing):

  • Ubah nama warna panjang menjadi heksadesimal
  • Ubah kode heksadesimal panjang menjadi kode heksadesimal pendek
  • Ubah kode heksadesimal panjang menjadi nama warna
  • Ubah RGB menjadi heksadesimal
  • Hapus 0 metrik
  • Gabungkan aturan yang sama
  • Gabungkan pemilih yang sama
  • Gabungkan properti
  • Hapus atribut duplikat
  • Hapus nilai yang tidak berguna dari margin dan padding
  • menunjukkan statistik
  • Keluaran dalam format warna
  • Gunakan ukuran minimum untuk keluaran

Orang Dalam PHP

Opsi opsional: tidak ada

Tujuh Empat Puluh

Pilihan:

  • Opsi pemotongan: 500, 1000, 1500 atau 2000

Alat ini didasarkan pada kompresor YUI, tetapi secara otomatis akan menghapus peretasan IE . Penjelasan yang diberikan oleh pengembang adalah bahwa peretasan IE harus muncul dalam satu file, bukan tercampur dalam file CSS utama, yang akan menjadi sulit untuk dipelihara.

Kolom Halaman

Opsional: Tidak ada

Alat kompresi CSS desktop yang direkomendasikan

Kompresor YUI dan Kompresor TB

Kompresor YUI adalah alat kompresi kode front-end yang dikembangkan oleh tim front-end Yahoo dan sangat kuat. Diperlukan lingkungan berjalan Java. Anda dapat menggunakan perintah java untuk mengompres file CSS dan JS secara manual, atau Anda dapat menggunakan ant untuk mengompresnya secara batch selama kompilasi .

Yu Bo dari tim front-end Taobao menggunakan alat kompresi platform Windows yang dikemas oleh kompresor YUI, yang sangat mudah untuk dipasang dan dihapus. Sama seperti Kompresor YUI yang kuat, TBCompressor tidak hanya dapat mengompresi CSS, tetapi juga mengompres JS.

Unduh di sini . Pelajari lebih lanjut tentang TBCompressor – Alat kompresi JS dan CSS

Selain itu, disarankan untuk membaca " Meningkatkan Proses Kompresi File CSS oleh TBCompressor " oleh Qu Chao.

alat pengoptimalan sumber daya web 2.0

Alat desktop yang dikembangkan oleh orang Cina menggunakan Delphi 7 juga dapat mengompresi CSS dan JS. Rekomendasikan itu. Perlu juga disebutkan bahwa penulis merilis kode sumber proyek.

menggabungkanCSS

Alat berbasis AIR yang diproduksi oleh CSS Forest Webmaster Gui Ge, yang memiliki banyak fungsi berguna, seperti menggabungkan banyak file, menggabungkan file yang diimpor @import, dll. Lihat pengenalan rinci .

Perlu dicatat bahwa dukungan alat untuk singkatan dan penggabungan atribut kurang baik. Mungkin lebih baik jika dukungan ini dapat ditambahkan.

Hal lain yang sangat penting adalah sejauh ini Gui Ge belum merilis alat ini .

kecepatan halaman

Kecepatan halaman sebenarnya adalah plugin firefox berdasarkan Firebug yang dikembangkan oleh Google. Ini terutama digunakan untuk menganalisis kinerja front-end situs web. Namun pada opsi Minify CSS di daftar hasil analisis kecepatan halaman, klik untuk melihat rasio kompresi CSS Anda , dan kemudian disediakan versi kompresi, yang dapat Anda klik untuk melihatnya. Satu-satunya kelemahan adalah kompresinya tidak dapat disesuaikan.

Tidak peduli seberapa jelek situs webnya, GZIP adalah alat yang sangat berguna untuk mengompresi banyak jenis kode. Ini mungkin bukan metode kompresi yang paling sederhana, dan mungkin sedikit membingungkan bagi pemula. Lihat tutorial ini untuk informasi lebih lanjut tentang penggunaan GZIP untuk mengompresi gaya Anda.

Meringkaskan

Seperti yang saya katakan sebelumnya, beberapa cara ini mungkin tampak berlebihan atau tidak ada gunanya. Kuncinya adalah melihat gambaran besarnya. Meskipun salah satu dari teknik ini mungkin hanya memiliki dampak yang hampir dapat diabaikan, menggabungkan beberapa atau semua teknik ini dapat berdampak besar pada ukuran file CSS Anda.

Artikel Terkait