Pemformat CSS
Rapikan indentasi stylesheet agar dapat dibaca, sepenuhnya di browser Anda. Tidak ada yang diganti namanya, dipersingkat, atau dinormalisasi.
Berjalan sepenuhnya di browser Anda. Tidak ada yang diunggah, dicatat, atau disimpan.
Tempelkan stylesheet yang diminifikasi atau berindentasi buruk dan bacalah dengan semestinya. Pemformatan dilakukan di browser Anda, dan tidak ada yang diubah dari stylesheet itu selain spasinya.
Cara kerja
Stylesheet dipecah menjadi potongan-potongan—komentar, string, alamat, nama, angka, tanda kurung, dan kurung kurawal—lalu ditulis ulang. Setiap aturan mendapat bloknya sendiri, setiap selektor dalam daftar mendapat barisnya sendiri, dan setiap deklarasi mendapat barisnya sendiri di dalam aturan. Aturan bersarang, media query, dan keyframe ikut bersarang.
Spasi dipertahankan kecuali dapat dibuktikan tidak bermakna apa pun. Itu kebalikan dari yang dilakukan sebagian besar pemformat, dan disengaja: dalam CSS, spasi di antara dua selektor adalah kombinator keturunan, sehingga “.a .b” dan “.a.b” memilih elemen yang berbeda. Spasi hanya dihapus sebelum koma, titik koma, atau penutup, dan sesudah pembuka, di mana CSS tidak dapat membacanya sebagai apa pun.
Satu-satunya spasi yang ditambahkan adalah spasi setelah titik dua pada deklarasi. Membedakan titik dua itu dari titik dua pada pseudo-class adalah alasan pemformat melihat ke depan sampai penutup atau titik koma berikutnya sebelum memutuskan apa yang sedang dibacanya.
Contoh
| Kasus | Masukan | Hasil |
|---|---|---|
| Aturan yang ditulis dalam satu baris | a{color:red;margin:0} | a { color: red; margin: 0; } |
Pertanyaan umum
Apakah stylesheet saya dikirim ke suatu tempat?
Tidak. Pemformat ini adalah JavaScript yang berjalan di halaman ini. Tidak ada yang diunggah, dicatat, atau disimpan: Anda bisa memutus jaringan dan alat ini tetap berfungsi.
Apakah alat ini juga melakukan minifikasi?
Tidak, dan itu keputusan, bukan kelalaian. Minifikasi CSS berarti memutuskan spasi mana yang bermakna dan mana yang tidak, dan kesalahan dalam hal itu mengubah elemen mana yang terkena sebuah aturan, diam-diam dan dengan cara yang baru Anda ketahui di production. Itu pekerjaan lain, dan layak dikerjakan dengan benar atau tidak sama sekali.
Apakah alat ini akan memperbaiki atau merapikan nilai-nilai saya?
Tidak. Alat ini tidak akan mengubah warna heksadesimal menjadi huruf kecil, tidak akan memendekkan #ffffff, tidak akan menghapus nol di depan, tidak akan mengurutkan ulang deklarasi Anda, dan tidak akan menambahkan vendor prefix. Masing-masing hal itu adalah pendapat tentang kode Anda, bukan soal tata letak, dan sebagian mengubah perilaku. Hanya spasi yang dipindahkan.
Apakah alat ini memahami Sass atau Less?
Sebagian, dan secara jujur: alat ini menata aturan bersarang, yang merupakan kesamaan bahasa-bahasa itu dengan CSS modern. Alat ini sama sekali tidak tahu arti mixin, variabel, atau directive kontrol, jadi semuanya diperlakukan sebagai token sebagaimana adanya. Tidak ada yang hilang, tetapi jangan berharap alat ini tahu bahwa @if membuka sebuah cabang.
Bagaimana dengan data URI?
Tetap utuh. url() tanpa tanda kutip dibaca sebagai satu potongan sampai tanda kurung penutupnya, karena data URI sering berisi titik koma, dan membacanya sebagai akhir deklarasi akan memecah nilainya menjadi dua.
Perlu diketahui
- Keluaran berisi persis potongan-potongan yang ada di masukan. Satu-satunya tambahan adalah titik koma pada deklarasi terakhir sebuah blok, yang aman di mana saja dan menjaga hasil tetap stabil saat aturan itu kelak bertambah satu baris.
- String, komentar, atau url() yang tidak ditutup ditolak alih-alih diformat ulang, karena sejak titik itu alat ini tidak lagi dapat membedakan kode dari teks.
- Tata letaknya deterministik: stylesheet yang sama dengan opsi yang sama selalu menghasilkan keluaran yang sama, dan memformat stylesheet yang sudah diformat tidak mengubah apa pun.