ID

Minify CSS: perkecil, format, dan inline CSS ke HTML

Alat minify CSS ini memperkecil stylesheet, memformatnya agar mudah dibaca, atau menyisipkannya ke atribut style untuk buletin email. Komentar, spasi, dan nol yang tidak perlu hilang tanpa mengubah efeknya. Galat sintaks menyebut barisnya dan kode Anda tetap di browser.

Sumber: W3C CSS Syntax Module Level 3 (Tokenisierung, Kommentare, Zeichenketten, At-Regeln). Diperbarui: .

Kotak Alat SayaInput Anda hanya disimpan di browser ini.

Kode hanya diproses di browser Anda. Pada mode inline, tempel dokumen HTML lengkap atau fragmen yang berisi <style>.

Teks Anda tetap di browser Anda – tidak dikirim, tidak disimpan, dan tidak ditambahkan ke bilah alamat.

Diperlakukan seperti satu blok style lagi di akhir, misalnya dari file CSS terpisah.

Hasil

Hasil
.button{color:#fff;background:#05a;margin:0 auto;padding:.5em 1em}.button:hover{background:#037}@media (max-width:600px){.button{padding:.25em}}
Ukuran
213 → 144 karakter (32% lebih kecil).
Dihapus: 1 komentar, 0 aturan kosong. Komentar yang diawali /*! dipertahankan.

Cara menghitung

Alat ini menawarkan tiga hal untuk stylesheet: minify untuk file kecil, format untuk kode yang mudah dibaca, dan inline untuk email HTML, karena sebagian program mengabaikan atau memangkas blok style.

Minify CSS

  1. Pilih “Perkecil” dan tempel CSS Anda.
  2. Salin hasilnya atau unduh sebagai style.min.css. Di bawahnya terlihat seberapa kecil file menjadi.

Hanya transformasi yang tidak mengubah efek yang diterapkan: komentar (kecuali /*! … */) dan spasi dihapus, begitu juga titik koma terakhir sebelum }, 0.50em menjadi .5em, #aabbcc menjadi #abc, dan 0px menjadi 0. Nol dengan satuan tetap dipertahankan di tempat yang membutuhkannya: di dalam calc(), min(), max(), clamp(), pada singkatan flex, pada nilai waktu, sudut, dan persen, serta pada properti kustom. String dan url() tidak diubah.

Format CSS

CSS yang dipadatkan menjadi kode yang mudah dibaca: satu deklarasi per baris, daftar selektor baris demi baris, blok berindentasi, dan baris kosong di antara aturan. Komentar dipertahankan.

Inline CSS ke HTML

Tempel dokumen HTML dengan blok style. Untuk setiap elemen, aturan yang cocok dievaluasi, diurutkan menurut spesifisitas dan urutan, lalu ditulis ke atribut style. Atribut style yang sudah ada mengalahkan aturan biasa, dan !important mengalahkan semuanya. Yang tidak bisa ditulis ke elemen, seperti :hover, pseudo-elemen, @media, dan @font-face, tetap berada di blok style.

Perlu diketahui

Kode Anda tetap di browser dan tidak dikirim atau disimpan.

Pertanyaan umum

Bagaimana cara minify CSS?

Pilih mode “Perkecil” dan tempel CSS. Komentar, spasi, dan nol yang tidak perlu dihapus, dan hasilnya bisa disalin atau diunduh sebagai file.

Apakah minify mengubah tampilan halaman?

Tidak, hanya transformasi aman yang diterapkan. Nol dengan satuan tetap ada, misalnya di calc() dan singkatan flex, karena di sana diperlukan. String dan url() tidak disentuh.

Untuk apa inline CSS?

Sebagian program email mengabaikan blok style seluruhnya atau sebagian. Dengan inline, setiap aturan ditulis ke elemen sebagai atribut style sehingga formatnya sampai.

Apa yang terjadi pada :hover dan @media saat inline?

Keduanya tidak bisa ditulis ke elemen sehingga tetap berada di blok style di head. Program yang mendukungnya tetap menerapkannya.

Bagaimana alat ini menyelesaikan aturan yang bertentangan?

Menurut kaskade CSS: !important dulu, lalu spesifisitas lebih tinggi, dan jika seri, aturan yang lebih akhir. Atribut style yang sudah ada dihitung seperti selektor dengan spesifisitas tertinggi.

Apakah kode saya diunggah?

Tidak. Semuanya berjalan di browser Anda; kode tidak dikirim, tidak disimpan, dan tidak ditulis ke bilah alamat.

Sumber dan dasar hukum

Diperbarui: · Kebijakan editorial

Alat terkait