Cara pengindahan CSS berfungsi
Pemerelah membaca helaian gaya anda aksara demi aksara, menjejaki seberapa dalam setiap blok bersarang, dan memancarkannya semula dengan jarak yang konsisten. Ia tidak pernah mengubah apa yang dilakukan oleh gaya — hanya cara ia kelihatan dalam fail.
- Tokenkan. Perpustakaan mengimbas input anda kepada aliran token: pemilih, nama sifat, nilai, at-peraturan, ulasan, dan pendakap kerinting, titik bertindih, dan titik koma yang memisahkannya. Rentetan dan nilai url() diiktiraf sebagai unit tunggal, jadi pendakap di dalam sifat content tidak akan disalah anggap sebagai pemisah blok.
- Jejak bersarang. Semasa mengembara aliran token, pemerelah menyimpan tahap lekukan yang sedang berjalan. Setiap pendakap pembuka mendalamkan tahap — sama ada ia milik blok peraturan, pertanyaan media, atau blok keyframes — dan setiap pendakap penutup mengembalikannya. Kedalaman itu menentukan berapa banyak unit lekukan yang berada di hadapan setiap baris yang anda terima semula.
- Terapkan pilihan anda. Pilihan lekukan anda (2 ruang, 4 ruang, atau tab) menetapkan lebar satu tahap. Tetapan gaya pendakap memutuskan sama ada pendakap pembuka memeluk pemilih sebelumnya atau jatuh ke barisnya sendiri. Togol lain menambah baris kosong antara blok peraturan dan memisahkan pemilih berkumpulan ke baris berasingan.
- Pancarkan semula. Akhirnya pemformat mencetak token kembali dengan lekukan dan pemisah baris yang telah diperkirakan, meletakkan satu pengisytiharan setiap baris dan satu ruang selepas setiap titik bertindih. Hasilnya adalah helaian gaya yang sama, disusun supaya manusia boleh mengimbas kaskad.
Mengapa cantikkan CSS
- Baca helaian gaya yang diminikan. CSS produksi dihantar pada satu baris tanpa jarak antara peraturan. Pengindahan memulihkan pemisah baris dan lekukan supaya anda boleh mencari pemilih di sebalik bug susun atur dan melihat dengan tepat pengisytiharan yang ia tetapkan, walaupun tanpa source map.
- Kemas fail yang tidak konsisten. Helaian gaya yang disentuh oleh beberapa orang hanyut ke lekukan dan gaya pendakap yang bercampur. Satu laluan melalui pemerelah menormalkan keseluruhan fail kepada satu susun atur, yang menjadikan diff seterusnya menunjukkan perubahan kaskad sebenar dan bukannya bunyi ruang kosong.
- Alat ini tidak membebankan halaman anda. Kebanyakan pemformat dalam talian memuatkan seluruh perpustakaan mereka sejurus anda membuka halaman. Alat ini memuatkan js-beautify secara malas hanya apabila anda mengklik Cantikkan atau menghidupkan mod langsung, jadi membuka halaman hanya memerlukan beberapa kilobait dan bukannya beberapa ratus, dan render awal kekal pantas.
- Tiada apa yang meninggalkan pelayar anda. Pemerelah berjalan sepenuhnya pada peranti anda. CSS anda tidak pernah dimuat naik ke pelayan, yang penting apabila helaian gaya yang anda periksa milik klien, mengandungi nama kelas dalaman, atau tertakluk kepada perjanjian kerahsiaan.
Aplikasi biasa
Pengindahan CSS timbul apabila seseorang perlu membaca helaian gaya yang tidak ditulis untuk dibaca.
- Nyahpepijat produksi: tampal helaian gaya yang diminikan yang ditarik dari tab Network untuk mencari peraturan yang mengatasi susun atur yang anda jangkakan.
- Persediaan semakan kod: format semula helaian gaya kontributor yang dilekukan secara tidak konsisten sebelum membuka permintaan tarik supaya pengulas melihat perubahan kaskad, bukan kekacauan susun atur.
- Pembelajaran dan pengauditan: kembangkan helaian gaya rangka kerja atau perpustakaan komponen untuk mengkaji bagaimana pemilih, pertanyaan media, dan sifat tersuai disusun.
Satu contoh yang dikerjakan
Ambil satu baris yang diminikan: a{color:red;margin:0}b{padding:0}. Tampalkan di atas dengan lekukan ditetapkan kepada 2 ruang dan gaya pendakap Runtuh, kemudian klik Cantikkan. Anda mendapat semula blok yang boleh dibaca: a { pada barisnya sendiri, pengisytiharan color: red; dan margin: 0; masing-masing dilekukan satu tahap lebih dalam, pendakap penutup berbaris di bawah pemilih, dan peraturan b mengikut di bawah. Tukar gaya pendakap kepada Kembang dan setiap pendakap pembuka jatuh ke barisnya sendiri. Tukar lekukan kepada Tab dan setiap tahap beralih dari dua ruang kepada aksara tab. Gaya adalah sama; hanya susun atur yang berubah.
FAQ
Adakah ini berjalan di pelayar saya?
Ya. Perpustakaan js-beautify dimuatkan secara malas kali pertama anda mengklik Cantikkan atau mendayakan mod langsung, kemudian dicache. CSS anda tidak pernah meninggalkan halaman — tiada perjalanan pergi balik pelayan dan tiada muat naik.
Adakah pengindahan sama dengan un-minifying?
Ia memulihkan pemformatan yang boleh dibaca — lekukan, pemisah baris, dan jarak — tetapi ia tidak dapat membawa kembali ulasan yang dihapus oleh peminifikasian atau memulihkan sebarang struktur yang tidak pernah ada dalam fail. Ia hanya memformat semula pengisytiharan dan pemilih yang ada.
Adakah pengindahan mengubah cara gaya saya dirender?
Tidak. Pengindahan hanya menambah dan mengalih keluar ruang kosong dan pemisah baris; kaskad tidak disentuh dan halaman dirender sama seperti sebelumnya. Susunan sifat, kekhususan, dan nilai semuanya kekal persis seperti yang anda tulis.
Apakah maksud pilihan gaya pendakap?
Runtuh mengekalkan pendakap pembuka pada baris yang sama dengan pemilih (a {), yang merupakan konvensyen CSS biasa. Kembang menjatuhkan setiap pendakap pembuka ke barisnya sendiri di bawah pemilih. Togol baris kosong dan satu pemilih setiap baris mengawal jarak antara blok peraturan dan cara pemilih berkumpulan seperti h1, h2, h3 disusun.
Pengindahan CSS sebelah pelayar memberi anda helaian gaya yang boleh dibaca tanpa langkah binaan atau muat naik. Tampal fail yang diminikan atau tidak kemas, pilih lekukan dan gaya pendakap anda, kemudian salin atau muat turun hasilnya. Tiada apa yang meninggalkan peranti anda, tiada akaun, dan perpustakaan hanya dimuatkan apabila anda memintanya — jadi membuka halaman ini hanya memerlukan beberapa kilobait, bukan satu megabait.