Softonic

Pemformat CSS

Langkah 1 / 2
Format CSS

Anda membuka stylesheet produksi di DevTools dan seluruh kode tercantum dalam satu baris. Pemformat ini mengurai kode CSS yang telah diminifikasi menjadi bentuk yang mudah dibaca: satu deklarasi per baris, indentasi dua spasi, dan satu baris kosong di antara aturan. Alat ini bekerja pada kode CSS mentah, hasil eksekusi Sass atau PostCSS, serta CSS di dalam blok inline <style>. CSS yang Anda tempelkan dikirim ke server kami untuk diformat dan ikut dibawa dalam tautan halaman selama Anda berpindah antar langkah alat ini. Komentar blok dihapus saat pemformatan.

Cara memformat CSS

  1. 1

    Tempelkan CSS

    Baris tunggal yang diminifikasi, terformat sebagian, atau sudah tampak rapi. Parser tidak mempermasalahkannya.

  2. 2

    Format

    Tekan tombol Format CSS. Setiap deklarasi berpindah ke barisnya sendiri dengan indentasi dua spasi, dan satu baris kosong memisahkan aturan.

  3. 3

    Periksa

    Tinjau hasilnya. Urutan properti dipertahankan, tetapi komentar blok dihapus.

  4. 4

    Salin

    Salin CSS yang telah diformat ke clipboard dan tempelkan kembali ke proyek Anda.

Sebelum dan sesudah

Input (diminifikasi):

.btn{background:#2563eb;color:#fff;padding:.5rem 1rem;border-radius:6px}.btn:hover{background:#1d4ed8}

Hasil (terformat):

.btn {
  background: #2563eb;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.btn:hover {
  background: #1d4ed8;
}

Apa yang dilakukan pemformat

Perilaku Nilai
Deklarasi Satu per baris, dengan indentasi dua spasi
Baris kosong antar aturan 1
Kurung kurawal pembuka Di baris yang sama dengan selektor
Kurung kurawal penutup Di baris tersendiri
Urutan properti Dipertahankan, tidak pernah diurutkan ulang
Komentar blok Dihapus saat pemformatan

Apa yang dihapus pemformat

/* Komentar ini hilang saat Anda memformat */
.button { background: #2563eb; }

Komentar blok (/* ... */) dihapus dari hasil. Jika Anda membutuhkannya, simpan salinan berkas asli sebelum memformat.

Aturan berjenjang (Sass / penataan CSS modern)

Pemformat menyesuaikan indentasi aturan berjenjang dengan kedalamannya:

.card {
  padding: 1rem;

  & .title {
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

Sintaks Sass/Less (tanpa &) juga diperbolehkan. Aturan khusus Sass seperti @mixin, @include, dan @extend diteruskan apa adanya tanpa diformat ulang secara mendalam. Untuk pemformatan Sass yang lengkap, gunakan alat yang mendukung Sass seperti Prettier.

Kapan tidak perlu memformat

  • Dalam proses produksi: lakukan minifikasi, jangan memformat. CSS yang telah diformat ukurannya 2-3 kali lebih besar daripada yang telah diminifikasi.
  • Sebelum melakukan perbandingan (diff): formatkan kedua sisi. Membandingkan berkas yang diminifikasi dengan berkas yang rapi akan menghasilkan diff yang tidak terbaca.
  • Di dalam alur pembuatan kode: biarkan Prettier atau pemformat kerangka kerja Anda yang mengatur konsistensi. Gunakan alat ini untuk pembersihan sekali pakai.

Pertanyaan yang Sering Diajukan

Alat ini mendukung CSS standar serta CSS Nesting (spesifikasi tahun 2023). Sintaks khusus Sass seperti @mixin, @include, @extend, dan variabel dengan $ diteruskan secara utuh tanpa diformat ulang secara mendalam. Untuk pemformatan Sass yang lengkap, gunakan alat yang mendukung Sass seperti Prettier.

Ya. Pemformatan berjalan di server kami, jadi CSS yang Anda tempelkan dikirim bersama setiap permintaan pemformatan dan ikut dibawa dalam tautan halaman selama Anda berpindah antar langkah alat ini. CSS tidak disimpan ke akun mana pun dan tidak digunakan kembali setelahnya.

Tidak, jika strukturnya valid secara sintaksis. Ruang kosong dalam CSS tidak memiliki arti penting di luar nilai, dan pemformat hanya menata ulang ruang kosong serta pemisahan baris. Urutan deklarasi dan nilai itu sendiri dipertahankan.

Ya. Salin CSS dari dalam tag <style>, tempelkan, format, lalu tempelkan kembali. Pemformat hanya bekerja dengan CSS, jadi tempelkan konten CSS-nya, bukan HTML di sekitarnya.

Pemformat membuang komentar blok (/* ... */) agar hasilnya seragam. Jika ingin mempertahankannya, simpan salinan CSS asli sebelum memformat.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Penghitung FPS

Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.

Generator Warna Acak

Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.

Pemilih Warna HEX

Pilih atau masukkan warna HEX untuk mendapatkan RGB, HSL, perkiraan CMYK, luminans relatif, serta kontras terhadap putih dan hitam.