Pemformatan kode / MULTIVERTO
Rapikan indentasi lembar gaya CSS agar struktur aturan dan deklarasinya mudah dibaca.
Terapkan setiap alat teks pada hasil sebelumnya. Alur kerja teks ↗
Hanya nama rangkaian dan urutan alat yang disimpan di peramban ini. Masukan dan hasil Anda tidak pernah disimpan.
01 / Contoh
h1{color:#334155;margin:0;}p{line-height:1.5;}h1 {
color:#334155;
margin:0;
}
p {
line-height:1.5;
}02 / Panduan
Indent sebuah sheet style CSS untuk mengungkapkan aturan dan deklarasi. Indentasi dan pembagian baris mengungkapkan struktur sementara mempertahankan token input yang didukung. Gunakan ini pada lembaran gaya pendek yang pemilih dan deklarasinya telah dimampatkan bersama. Hasilnya menempatkan setiap peraturan dan deklarasi pada garisnya sendiri. Ia tidak mengurutkan properti atau memutuskan apakah selektor digunakan; itu adalah tugas yang berbeda.
CSS terdiri dari selektor, at-rules, blok deklarasi, nilai dan komentar. Sebuah ruang antara selektor dapat mengekspresikan hubungan descendant, sehingga menghilangkan setiap ruang akan mengubah elemen yang menerima aturan. String, fungsi seperti calc (), properti custom dan URL tertanam juga dapat mengandung tanda baca yang menyerupai pemisah. Peformat ini mengimbas string, komentar dan nesting sebelum mengubah tata letak; tidak mengevaluasi cascade, ekstensi vendor atau dukungan peramban.
Pemformatan paling berguna selama tinjauan atau debugging, ketika indentasi dapat mengungkapkan tingkat bersarang yang hilang atau saudara yang tidak terduga. Tempel fragmen yang lengkap dan mewakili dan jalankan formater sekali. Baca keluaran dari struktur paling luar ke dalam, memperhatikan di mana setiap elemen, blok atau klausa dimulai dan berakhir. Halaman ini sengaja menghindari berpura-pura menjadi kompiler untuk setiap ekstensi bahasa yang mungkin. Dalam contoh ini, “h1{color:#334155;margin:0;}p{line-height:1.5;}” menghasilkan pratinjau ringkas “h1 { ⏎ color:#334155; ⏎ margin:0; ⏎ } ⏎ p { ⏎ line-height:1.5; ⏎ }” (⏎ menandai baris baru). Baca tanda baca serta kata-kata yang terlihat: sampel kecil itu adalah hasil yang dapat diamati dari operasi tertentu ini. Ubah satu fitur yang Anda pedulikan di sumber dan bandingkan tempat yang sama di hasil. Untuk ulasan CSS, masukkan aturan di dalam @media dan yang lain setelahnya. Kurung kurawal yang ditata ulang harus memperjelas cakupan setiap aturan. Bandingkan lembar asli dan berformat pada halaman dimana kedua pemilih cocok, karena kurung penutup yang tidak tepat dapat mengubah deklarasi yang menang.
Gunakan ini ketika lembar gaya kompak membuat skop aturan media atau pemilih sulit untuk diperiksa. Ikuti kurung dan deklarasi dalam hasil yang diperluas, lalu bandingkan selektor yang tergantung pada ruang descendant. Sebuah formater tidak akan memberitahukan Anda apakah properti didukung oleh peramban atau apakah cascade memilih elemen yang Anda inginkan. Simpan asli di samping keluaran dan uji contoh kecil yang diketahui sebelum mengendalikan dokumen besar. Bandingkan konten yang berarti, bukan hanya ukuran file atau jumlah baris. Periksa nama, string kutipan, karakter non-ASCII, akhir baris dan semua bidang berulang setelah transformasi.
Jelajahi panduan