DevTools

pemformat CSS

Gunakan pemformat CSS di Ali Hub DevTools dengan validasi, hasil, informasi privasi, dan batas yang terdokumentasi.

Input utama

Penyimpanan hanya digunakan ketika alat secara tegas menjelaskan data browser lokal, berversi, terbatas, dapat dihapus, dan tidak sensitif.

Pasang alat ini

Tambahkan alat ini ke perangkat untuk akses cepat.

pemformat CSS

Format CSS dengan mempertahankan selector, deklarasi, komentar, nilai, dan struktur at-rule.

Make CSS easier to review

CSS terkompresi dapat menyembunyikan selector, deklarasi, komentar, dan nilai panjang dalam satu baris. Alat ini menampilkan layout yang mudah dibaca.

Formatting mengubah presentasi dan tidak membuktikan validitas, efisiensi, aksesibilitas, atau kompatibilitas. Simpan sumber dan diff.

Gunakan contoh dengan selector, deklarasi, komentar, custom property, media query, dan nilai ber-quote.

Formatting is not CSS validation

CSS terdiri dari selector, deklarasi, nilai, komentar, at-rule, fungsi, custom property, dan blok. Indentasi memperlihatkan batasnya.

Formatter menata whitespace dan token tetapi tidak membuktikan standar, specificity, aksesibilitas, performa, atau kompatibilitas build.

Nilai dapat berisi string, URL, escape, gradient, variabel, dan ekstensi vendor.

How to format CSS

  1. Tempel stylesheet lengkap atau fragmen yang didukung.
  2. Periksa selector, kurung, deklarasi, komentar, custom property, fungsi, dan at-rule.
  3. Bandingkan properti, nilai, quote, URL, variabel, dan urutan dengan sumber.
  4. Jalankan linter, build, pemeriksaan aksesibilitas, dan browser tests.
  5. Hapus URL pribadi, token, dan data pengguna.

Formatting method

  • Membaca selector, deklarasi,

    Membaca selector, deklarasi, nilai, komentar, blok, fungsi, dan at-rule.

  • Menambah baris dan

    Menambah baris dan indentasi untuk menampilkan rule dan blok bertingkat.

  • Mempertahankan nilai, string,

    Mempertahankan nilai, string, URL, custom property, komentar, dan urutan.

Pemulihan parser, dialect, ekstensi vendor, komentar, whitespace, dan error harus dikonfirmasi dengan engine langsung.

Read the formatted result

Hasil berhasil adalah CSS yang mudah dibaca. Cocokkan selector, deklarasi, nilai, komentar, blok, fungsi, dan urutan dengan sumber.

Kegagalan tidak membuktikan dukungan parser atau pemulihan tertentu.

Masalah browser, linter, atau build terpisah; formatting bukan optimasi otomatis.

Kesalahan umum

Menganggap indentasi sebagai validasi dapat menyembunyikan nilai invalid, specificity, atau masalah aksesibilitas.

Mengubah custom property, string, URL, escape, atau urutan dapat mengubah perilaku.

Jangan menganggap ekstensi vendor sama di semua toolchain.

URL pribadi, token, dan style khusus pengguna dapat mengekspos data.

Batasan dan kasus khusus

Fitur ini memformat tampilan CSS dan tidak menjamin standar, lint, aksesibilitas, keamanan, performa, kompatibilitas, atau minifikasi.

Uji custom property, at-rule, ekstensi, fungsi, escape, komentar, dan stylesheet besar dengan alat target.

Jangan memasukkan style produksi rahasia tanpa izin.

Examples

Apakah formatting memvalidasi CSS?

Apakah formatting memvalidasi CSS?

Tempel stylesheet lengkap atau fragmen yang didukung.

Hasil berhasil adalah CSS yang mudah dibaca. Cocokkan selector, deklarasi, nilai, komentar, blok, fungsi, dan urutan dengan sumber.

Apakah cascade berubah?

Apakah cascade berubah?

Periksa selector, kurung, deklarasi, komentar, custom property, fungsi, dan at-rule.

Kegagalan tidak membuktikan dukungan parser atau pemulihan tertentu.

Apakah nilai dipertahankan?

Apakah nilai dipertahankan?

Bandingkan properti, nilai, quote, URL, variabel, dan urutan dengan sumber.

Masalah browser, linter, atau build terpisah; formatting bukan optimasi otomatis.

Apakah komentar dipertahankan?

Apakah komentar dipertahankan?

Jalankan linter, build, pemeriksaan aksesibilitas, dan browser tests.

Hasil berhasil adalah CSS yang mudah dibaca. Cocokkan selector, deklarasi, nilai, komentar, blok, fungsi, dan urutan dengan sumber.

Bisakah media query diformat?

Bisakah media query diformat?

Hapus URL pribadi, token, dan data pengguna.

Kegagalan tidak membuktikan dukungan parser atau pemulihan tertentu.

Apakah performa meningkat?

Apakah performa meningkat?

Tempel stylesheet lengkap atau fragmen yang didukung.

Masalah browser, linter, atau build terpisah; formatting bukan optimasi otomatis.

Frequently asked questions

Apakah formatting memvalidasi CSS?

Tidak. Gunakan parser, linter, build, aksesibilitas, dan browser tests.

Apakah cascade berubah?

Seharusnya hanya whitespace presentasi berubah; bandingkan urutan dan uji.

Apakah nilai dipertahankan?

Contoh mempertahankan nilai, string, URL, dan fungsi; periksa diff.

Apakah komentar dipertahankan?

Contoh mempertahankan komentar; konfirmasi dengan input Anda.

Bisakah media query diformat?

Contoh menunjukkan at-rule bertingkat; konfirmasi dukungan.

Apakah performa meningkat?

Tidak. Gunakan profiling dan optimasi terarah.

Apakah CSS rusak diperbaiki?

Jangan mengasumsikan perbaikan; perbaiki sumber dan validasi.

Apa setelah formatting?

Tinjau diff, jalankan linter dan build, lalu uji aksesibilitas dan browser.

References