Pemampat CSS

Pemampat CSS ialah alat percuma yang membuang aksara tidak diperlukan daripada CSS dan menghasilkan helaian gaya yang dimampatkan, berserta kiraan aksara sebelum dan selepas pemampatan.

Apakah yang dilakukan oleh pemampatan CSS?

Pemampatan CSS mengurangkan bilangan aksara dalam helaian gaya dengan membuang pemformatan yang tidak diperlukan oleh pelayar. Ini biasanya merangkumi inden, pemisah baris, ulasan dan ruang pilihan di sekitar tanda baca.

Pelayar masih menerima peraturan CSS, pemilih dan nilai pengisytiharan. Paparan yang dimaksudkan sepatutnya kekal sama, manakala fail yang dihantar kepada pelayar menjadi lebih kecil. Manfaat sebenar pemampatan helaian gaya CSS bergantung pada fail asal, pemampatan HTTP dan cache pelayar. Jika helaian gaya sudah dimampatkan dengan baik, pengurangan bait yang dihantar mungkin hanya sedikit.

Pemampatan berguna sebelum pelaksanaan, semasa memeriksa CSS pihak ketiga yang terlalu besar, atau untuk melihat sejauh mana pemformatan pembangunan menambah saiz fail. Proses ini berbeza daripada pengoptimuman yang membuang pemilih tidak digunakan, menggabungkan peraturan setara atau menulis semula pengisytiharan. Alat ini tidak mendakwa melakukan operasi yang lebih menyeluruh tersebut.

Bagaimanakah cara menggunakan Pemampat CSS?

Tampal helaian gaya ke dalam medan CSS dan jalankan alat, kemudian salin hasil CSS termampat ke dalam aliran kerja binaan atau pelaksanaan yang berkaitan. Simpan fail sumber CSS yang mudah dibaca dan jangan gantikannya secara kekal dengan salinan termampat.

1. Mulakan dengan CSS sumber yang digunakan oleh laman atau aplikasi anda.
2. Pastikan CSS itu boleh dihuraikan dengan betul sebelum memampatkannya.
3. Tampalkannya ke dalam CSS dan jalankan alat.
4. Bandingkan Aksara CSS dengan Aksara CSS termampat.
5. Uji hasilnya pada halaman pementasan, termasuk keadaan responsif, gaya cetakan dan komponen interaktif.

Pemampatan CSS dilakukan pada pelayan. CSS yang anda serahkan dihantar ke pelayan melalui HTTPS dan tidak disimpan. Jika helaian gaya mengandungi URL sulit, nama hos dalaman atau bahan sensitif lain, pertimbangkan sama ada penghantarannya kepada sebarang utiliti pada pelayan mematuhi dasar pengendalian organisasi anda.

Bagaimanakah cara membaca hasilnya?

Hasilnya mengandungi CSS yang telah diubah serta dua kiraan aksara, jadi anda boleh memeriksa output dan melihat pengurangannya secara langsung. Aksara CSS ialah panjang teks yang diserahkan, manakala Aksara CSS termampat ialah panjangnya selepas pemampatan.

Kiraan tersebut ialah kiraan aksara yang dihasilkan menggunakan fungsi panjang yang menyokong aksara berbilang bait. Jangan anggapnya sebagai ramalan tepat bagi saiz pemindahan rangkaian. Aksara UTF-8 boleh menggunakan lebih daripada satu bait, manakala pemampatan Brotli atau gzip boleh mengubah saiz data yang dihantar melalui HTTP dengan ketara.

Alat ini tidak menyediakan medan pengesahan atau ralat yang berasingan. Oleh itu, jangan gunakannya sebagai pengesah CSS. Masalah lazim seperti kurungan dakap yang tidak berpadanan, titik bertindih yang tiada, rentetan yang tidak ditamatkan, ulasan yang salah bentuk atau sarangan tidak sah perlu diperiksa menggunakan alat pembangun pelayar, pelinter atau pengesah yang memahami piawaian. CSS yang tidak sah mungkin menghasilkan output yang kelihatan padat tetapi tidak berfungsi seperti yang dimaksudkan.

Contoh ringkas pemampatan CSS

Versi termampat biasa membuang pemformatan sambil mengekalkan peraturan itu sendiri.

CSS

p { color: red; }

CSS termampat

p{color:red}

Dalam contoh ini, input yang mudah dibaca mengandungi 17 aksara dan bentuk padat mengandungi 12 aksara. Ruang dan tanda baca dalam rentetan berpetik mesti kekal sebagai sebahagian daripada nilai.

CSS

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

CSS termampat

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

Membuang setiap ruang secara membuta tuli tidak selamat. Ruang putih boleh mewakili penggabung turunan, manakala operator aritmetik dalam fungsi seperti calc() mempunyai keperluan ruang putih tertentu. Rentetan, URL data, pengecam dengan aksara lepas dan nilai sifat tersuai juga perlu dikendalikan dengan memahami sintaks.

Aksara beraksen dan bukan Latin boleh muncul dalam rentetan dan, tertakluk pada peraturan pengecam CSS, dalam pemilih. Nombor, titik perpuluhan, peratusan dan unit ialah sebahagian daripada sintaks, bukannya teks hiasan. Oleh itu, semuanya tidak boleh dipendekkan begitu sahaja tanpa memahami pengisytiharan tersebut. Helaian gaya kosong tidak mengandungi CSS untuk dimampatkan. Bagi helaian gaya yang sangat besar, alat pemampat semasa proses binaan biasanya lebih mudah digunakan berulang kali dan diaudit berbanding menyalin teks melalui borang dalam talian.

Bilakah pemampatan CSS tidak berbaloi?

Pemampatan biasanya tidak perlu diulang jika fail sudah dimampatkan atau dijana sebagai aset pengeluaran yang padat. Pemampatan CSS kali kedua mungkin hanya menjimatkan sedikit ruang atau langsung tiada penjimatan, selain menambah satu lagi proses pengubahan pada aliran keluaran.

• Jangan cantikkan pemformatan CSS lalu memampatkannya semula jika fail itu hanya akan dibaca oleh pelayar atau sistem binaan.
• Jangan gunakan pemampatan sebagai ganti kepada pembuangan peraturan rangka kerja yang tidak digunakan atau pengisytiharan pendua.
• Jangan harap pengurangan aksara dapat mendedahkan permintaan yang menyekat pemaparan, masalah cache atau pemuatan fon yang perlahan.
• Jangan buang sumber berformat, terutama ketika menyahpepijat kekhususan, lapisan lata atau pertanyaan media.

Jika CSS digabungkan secara automatik, gunakan alat pemampat dalam talian paip tersebut supaya setiap keluaran menggunakan tetapan yang sama. Apabila melaksanakan aset berkaitan secara manual, Pemampat minimum HTML dan Pemampat JS boleh melakukan operasi setara pada jenis fail tersebut.

Soalan lazim

Adakah pemampatan CSS mengubah kekhususan pemilih?

Pemampatan yang betul tidak mengubah kekhususan pemilih kerana komponen dan susunan pemilih sepatutnya kekal sama. Namun begitu, bandingkan pemilih kompleks dengan teliti jika sumber menggunakan aksara lepas, kelas pseudo yang lebih baharu atau sintaks janaan yang mungkin tidak difahami oleh alat pemampat lama.

Bolehkah saya memampatkan sifat tersuai CSS?

Sifat tersuai boleh disertakan, tetapi nilainya mungkin perlu mengekalkan token dan ruang untuk penggantian kemudian menggunakan var(). Uji pengisytiharan yang mengandungi pengiraan, nilai sandaran atau rentetan terbenam dalam pelayar yang disokong oleh projek anda. Jangan anggap setiap ruang yang kelihatan boleh dibuang.

Adakah alat ini menghasilkan peta sumber?

Tiada hasil peta sumber disediakan. Jika penyahpepijatan pengeluaran memerlukan pemetaan CSS padat kembali kepada Sass, Less atau sumber lain, jana fail termampat dan peta sumbernya menggunakan pengkompil atau penggabung yang mengetahui struktur fail asal.

Adakah ulasan lesen akan dikekalkan dalam output?

Jangan anggap ulasan CSS akan dikekalkan. Jika lesen kebergantungan mewajibkan notis disertakan bersama kod yang diedarkan, simpan notis itu secara berasingan atau periksa output yang dijana sebelum keluaran.

Bolehkah pemampatan membaiki CSS yang rosak?

Tidak. Pemampatan membuang aksara yang tidak diperlukan, tetapi tidak membaiki pemilih tidak sah, sifat tidak disokong, aset yang tiada atau aturan lata yang salah. Selesaikan amaran penghuraian dan kemerosotan visual dalam sumber terlebih dahulu.

Semakan sebelum pelaksanaan

Simpan output termampat sebagai aset pengeluaran yang berasingan, pastikan URL dan kandungan berpetik masih utuh, kemudian muatkannya pada halaman pementasan dengan konsol pelayar dibuka. Bandingkan halaman yang mewakili laman anda pada saiz ruang pandang sempit dan lebar. Selepas itu, pastikan pelayan menggunakan jenis kandungan, dasar cache dan pemampatan HTTP yang dijangkakan.