CSS Beautifier & Pemformat Dalam Talian
Format serta-merta, nyahkecilkan dan susun helaian gaya CSS yang kemas atau mampat dalam masa nyata. Pemformat CSS mesin keadaan kami dengan tepat mengesotkan pertanyaan @media, @keyframes, CSS pembolehubah (--varcamelCaseZ), —dan termasuk satu klik CSS Minifier apabila anda bersedia untuk dihantar ke pengeluaran.@keyframes, CSS (--), --varcamelCase, data SVG sebaris URIs
Bagaimana untuk Mencantikkan & Mengurangkan CSS Dalam Talian
- Tampal CSS anda: Tampalkan
.min.csstermampat anda atau helaian gaya yang tidak kemas ke dalam Input editor CSS di sebelah kiri, atau klik camelCase untuk Muatkan Sampel Ujian@mediapertanyaan, pembolehubah dan URL. - Pilih Preset atau Sesuaikan Tetapan: Pilih 2 Spaces, 4 Spaces, Clean & Sort A–Z, atau (.min.css) daripada bar Quick Presets, atau laraskan lekukan, peletakan pendakap, pemisahan pemilih dan mampatan warna di sebelah kanan.
- Inspect Live Statistics: Tonton Input, Output, Rules dan Lines atau pembilang untuk mengemas kini pilihan serta-merta semasa anda menaip pilihan.
- Salin atau Muat Turun: Klik Salin ke Papan Klip atau Muat turun .css untuk menyimpan lembaran gaya terformat anda sebagai
styles.beautified.css(ataustyles.min.cssdalam mod Minify).
Pilihan Pemformatan & Pengoptimuman CSS Diterangkan
| Pilihan | Apa yang Dilakukan | Sebelum ini | Selepas |
|---|---|---|---|
| Unminify & Indent | Kembangkan peraturan satu baris dan blok @media / @keyframes bersarang dengan 2, 4 atau 8 ruang atau tab. |
@media(lebar maksimum:768px){.kotak{lebar:100%}} |
@media (lebar maksimum: 768px) { |
| One Selector Per Line | Pisahkan senarai pemilih yang dipisahkan koma ke baris individu sambil mengabaikan koma di dalam :is() atau :not(). |
.btn, .card, .modal { ... } |
.btn, |
| Nilai Warna Mampat | Menukar kod rgb() dan 6 digit hex kepada kod hex 3 digit di dalam sebarang nilai pengisytiharan sambil mengekalkan token sekeliling. |
sempadan: 1px pepejal rgb(255, 0, 0); |
sempadan: 1px pepejal #f00; |
| Sifat Isih (A–Z) | Menghurufkan pengisytiharan di dalam setiap blok untuk menyeragamkan ulasan kod dan mendedahkan sifat pendua. | z-indeks: 5; paparan: flex; align-item: tengah; |
align-item: tengah; |
Mengapa Menggunakan Mesin Negeri CSS Beautifier?
Banyak pemformat CSS dalam talian mudah membahagi kod pada setiap titik bertindih (:), koma bertitik (;) atau pendakap (}). Pendekatan itu rosak sebaik sahaja lembaran gaya anda menyertakan ciri CSS moden seperti:
- Nested At-Rules & Native CSS Nesting:
@mediapertanyaan,@supportspertanyaan ciri,@keyframesanimasi block,@ pemilih anak bersarang memerlukan penjejakan lekukan berbilang peringkat. - EURL Luaran & URI Data SVG Sebaris: Sifat seperti
latar belakang: url("https://...")atauurl("data:image/svg+xml;utf8,mengandungi titik bertindih dan titik bertitik yang tidak boleh dipecahkan sebagai pembatas sifat CSS.") - Rentetan Kandungan Elemen Pseudo: Perisytiharan seperti
kandungan: "Item: 1; Status: OK"mengekalkan aksara dalaman yang tepat dan ruang putih tetap utuh. - W3C-Pemendekkan Warna Tepat: Warna yang dinamakan hanya dipendekkan apabila setara hex adalah lebih pendek dan serupa dalam spesifikasi CSS (contohnya,
white→ →black→#000, sementara meninggalkangreensebagaigreenmemandangkan#008000lebih panjang dan#0f0sebenarnya ialahlime).
Soalan Lazim
Bagaimanakah cara saya menyahminimumkan fail .min.css dalam talian?
Tampalkan kod .min.css termampat anda ke dalam kotak Input CSS di sebelah kiri. Alat ini secara automatik menghuraikan pemilih, pengisytiharan, pertanyaan @media dan @keyframes ke dalam CSS berbilang baris yang diinden bersih dalam masa nyata.
Adakah CSS beautifier ini menyokong pertanyaan @media, @keyframes dan data: URI?
ya. Tidak seperti pemformat berasaskan pecahan ringkas, alat ini menggunakan penghurai CSS mesin keadaan yang mengekalkan blok bersarang (@media, @supports, @keyframes, @media, @supports, @keyframes, CSS bersarang) serta titik bertindih dan koma bertitik di dalam url("https://..."), data:image/svg+xml URIs dan dipetik .
Adakah selamat untuk mengisih sifat CSS mengikut abjad?
Pengisihan mengikut abjad menjadikan peraturan besar lebih mudah untuk diimbas dan membantu mengesan perisytiharan pendua. Walau bagaimanapun, jika peraturan bergantung pada sifat trengkas diikuti dengan penggantian yang lebih khusus (atau sebaliknya, seperti background-color lwn. background), menukar susunan pengisytiharan boleh mengubah sifat yang menang. Dayakan pengisihan apabila peraturan anda tidak bergantung pada perintah penggantian trengkas.
Bolehkah saya juga minify CSS dengan alat ini?
ya. Klik butang Minify CSS (atau pilih Minify (Single-Line .min.css) dalam panel tetapan) untuk menanggalkan ulasan, ruang putih dan koma bertitik di belakang dan memampatkan nilai warna ke dalam helaian gaya pengeluaran padat.
Adakah kod CSS saya dimuat naik ke mana-mana pelayan?
Tidak. Semua pemformatan dan pengurangan CSS berjalan 100% secara setempat dalam penyemak imbas anda menggunakan JavaScript. Lembaran gaya anda tidak pernah meninggalkan komputer anda.