Monu Tools

Pemformat CSS

Cantikkan CSS dengan inden yang bersih, atau mampatkan untuk mengurangkan saiz fail. Mengendalikan pertanyaan media, calc() dan ulasan lesen.

Cara menggunakan Pemformat CSS

  1. 01

    Tampal CSS anda ke dalam kotak input.

  2. 02

    Pilih Cantikkan untuk memformatnya atau Mampatkan untuk memampatkannya.

  3. 03

    Pilih saiz inden, kemudian salin hasilnya.

Apa yang pemformat CSS ini lakukan

Ini ialah pemformat CSS yang mengemaskan helaian gaya dengan inden yang bersih dan konsisten, atau meminifikasinya untuk mengecilkan saiz fail. Anda memilih saiz inden untuk mengemas, dan bertukar kepada minifikasi apabila anda mahukan output terkecil.

Bila untuk mengemas dan bila untuk meminifikasi

CSS yang mudah dibaca lebih mudah untuk diimbas, disemak dan dinyahpepijat: apabila setiap peraturan dan pengisytiharan diinden secara konsisten, anda boleh melihat pemilih, pensarangan dan bentuk pertanyaan media anda sekilas pandang.

Minifikasi adalah untuk pengeluaran. Ia membuang ruang putih dan komen yang tidak diperlukan pelayar, jadi fail dimuat turun lebih pantas. Pada helaian gaya yang besar penjimatan itu terkumpul, terutamanya sebelum pemampatan gzip pada pelayan.

Berhati-hati meminifikasi dengan calc() dan pertanyaan media

Peminifikasi berhati-hati di tempat yang penting. Ia mengekalkan ruang di sekitar tanda tambah dan tolak dalam calc(), jadi calc(100% - 30px) kekal sah, dan ia hanya menyingkirkan ruang di sekitar aksara struktur seperti kurungan dakap, titik bertindih dan koma bertitik. Ia juga mengendalikan pertanyaan media bersarang dengan betul.

Komen lesen dikekalkan

Komen lesen yang ditulis dalam bentuk /*! ... */ dikekalkan, iaitu konvensyen standard untuk mengekalkan notis hak cipta dan lesen dalam output yang diminifikasi walaupun komen biasa dibuang.

Berjalan dalam pelayar anda

Kedua-dua mengemas dan meminifikasi berjalan sepenuhnya dalam pelayar anda, jadi helaian gaya anda tidak pernah meninggalkan peranti anda. Alat ini memformat untuk kebolehbacaan dan saiz; ia tidak mengesahkan bahawa CSS anda betul.

Soalan lazim

Adakah pemampatan memecahkan ungkapan calc()?

Tidak. Pemampat mengekalkan ruang di sekitar tambah dan tolak dalam nilai, jadi calc(100% - 30px) kekal sah. Ia hanya membuang ruang di sekitar aksara struktur seperti pendakap, titik bertindih dan koma bertitik.

Adakah ulasan dibuang semasa pemampatan?

Ulasan biasa dibuang untuk menjimatkan ruang, tetapi ulasan lesen yang ditulis sebagai /*! ... */ disimpan, yang merupakan konvensyen standard untuk memelihara notis hak cipta.

Adakah CSS saya dimuat naik ke mana-mana?

Tidak. Kedua-dua cantikkan dan mampatkan berjalan sepenuhnya dalam pelayar anda, jadi gaya anda tidak pernah meninggalkan peranti anda.

Sumber

Benamkan alat ini

Tambah alat ini ke laman web anda sendiri. Salin coretan di bawah; ia kekal terkini secara automatik.

<iframe src="https://monu.tools/embed/ms/css-formatter" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

Alat berkaitan