Apakah ada cara untuk memeriksa gaya CSS mana yang digunakan atau tidak digunakan di halaman web?

121

Ingin tahu gaya CSS mana yang saat ini digunakan di halaman web.

css

— TOLONG
sumber

2

Gunakan browser yang memiliki pemeriksa CSS. Safari dan Chrome (alias Webkit) menyediakan ini sebagai bagian dari alat pengembang. Di Firefox, ini disediakan oleh plugin Firebug. Internet Explorer tidak memiliki fitur serupa yang saya ketahui. Inspektur akan mengijinkan Anda untuk memilih sebuah elemen, klik kanan, dan memilih "Inspect Element" - kemudian ia akan menunjukkan kepada Anda pemilih mana dan aturan individu mana yang diterapkan ke elemen yang Anda pilih.

— Lee

Toolbar pengembang @Lee ie8 berperilaku sama seperti firebug di pemilih css, Anda dapat memilih dan melihat gaya yang diterapkan di sisi kanan.

— kobe

kemungkinan duplikat Mengekstrak hanya css yang digunakan di halaman tertentu

— cweiske

58

Instal add-on Penggunaan CSS untuk Firebug dan jalankan di halaman itu. Ini akan memberi tahu Anda gaya mana yang digunakan dan tidak digunakan oleh halaman itu.

— kobe
sumber

@Harry, setelah Anda menginstal plugin ini, plugin ini akan berada di tab sebagai bagian dari firebug di mana Anda memiliki net dan semua //// beri tahu saya jika Anda memerlukan yang lain

— kobe

33

Apakah ada hal seperti ini di Chrome?

— Pedro Luz

3

Ini tampaknya tidak berfungsi lagi, dan sayangnya tidak lagi didukung.

— nostromo

1

Berhati-hatilah karena Firebug tidak lagi dipertahankan. Saya pikir add-on ini tidak berfungsi dengan DevTools bawaan Firefox.

— Andrew

Anda dapat menggunakan opsi audit di chrome saat memeriksa. Ini hanya menunjukkan css tidak digunakan pada halaman tersebut.

— Sarath Hari

81

Google Chrome memiliki dua cara untuk memeriksa CSS yang tidak digunakan .

1. Tab Audit: > Klik Kanan + Periksa Elemen di halaman, cari tab "Audit", dan jalankan audit, pastikan "Performa Halaman Web" dicentang.

Daftar semua tag CSS yang tidak digunakan - lihat gambar di bawah.

Pembaruan: - - - - - - - - - - - - - - ATAU - - - - - - - - - - - - - -

2. Tab Cakupan: > Klik Kanan + Periksa Elemen pada halaman, temukan tiga titik di paling kanan (dilingkari pada gambar) dan buka Laci Konsol (atau tekan Esc), terakhir klik tiga titik sisi kiri di laci (dilingkari dalam gambar) untuk membuka alat Cakupan.

Chrome meluncurkan alat untuk melihat CSS dan JS yang tidak digunakan - Pembaruan Chrome 59 Memungkinkan Anda memulai dan menghentikan perekaman (kotak merah pada gambar) untuk memungkinkan cakupan yang lebih baik dari pengalaman pengguna di halaman.

Menampilkan semua CSS / JS yang digunakan dan tidak terpakai dalam file - lihat gambar di bawah.

— Cordell
sumber

3

Akan sangat luar biasa untuk melihat mana yang digunakan juga .... tapi ini bagus, terima kasih.

— Serj Sagan

Sejauh yang saya tahu, jika Anda ingin tahu apa yang digunakan, taruhan terbaik Anda adalah memasang plugin untuk Chrome - maaf

— Cordell

Pembaruan Chrome 59 baru memungkinkan Anda melihat CSS dan JS yang digunakan / tidak digunakan

— Cordell

Perpustakaan apa yang digunakan Chrome untuk melakukan ini?

— Alexey Shevelyov

1

@UMAR dengan multi-page website coverage == (single-page coverage) * n n = setiap halaman dalam situs web . Mengkategorikan alat / jawaban ini sebagai "tidak berguna" tidak akan menguntungkan siapa pun.

— Shai Cohen

40

Hanya untuk kelengkapan dan karena ditanyakan di komentar - ada juga alat audit CSS di Chrome sekarang untuk tujuan yang sama. Beberapa detail di sini:

http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google

— Jan Petzold
sumber

3

Saya tidak yakin apakah "alat audit CSS" yang dirujuk jawaban ini sama dengan tab Audit di Alat Pengembang Chrome, tetapi itu akan memberi tahu Anda aturan CSS mana yang tidak digunakan (mis. "Some.css: 42% tidak digunakan oleh halaman saat ini. ").

— Kenny Evitt

11

Lihat UnCSS . Ini membantu dalam membuat file CSS dari CSS yang digunakan.

— Robert Brisita
sumber

1

Itu adalah program yang bagus. Terima kasih! Rob

— r0berts

1

Alat web yang bagus untuk sekali pakai. ty

— billynoah

1

Ini luar biasa - UnCSS cannot be run on non-HTML pages, such as templates or PHP files- lupakan .......

— Brian Powell

@ brian-powell ya, keluaran template harus dibuat terlebih dahulu. Bagaimana lagi UnCSS mengetahui apa yang dibutuhkan?

— Robert Brisita

8

Saya menggunakan CSS Dig . Ini dibuat untuk chrome, tapi menurut saya ini adalah alat yang hebat!

— cs.matyi
sumber

Saya baru saja mencoba ini - ia melakukan semuanya dengan menelepon ke rumah ke cssdig.com, jadi ia tidak dapat melihat atau menganalisis apa pun yang dihosting secara lokal.

— Brilliand

0

Coba gunakan alat ini, yang hanya berupa skrip js sederhana https://github.com/shashwatsahai/CSSExtractor/ Alat ini membantu mendapatkan CSS dari halaman tertentu yang mencantumkan semua sumber gaya aktif dan menyimpannya ke JSON dengan sumber sebagai kunci dan aturan sebagai nilai. Ini memuat semua CSS dari tautan href dan memberi tahu semua gaya yang diterapkan darinya. Anda dapat memodifikasi kode untuk menyimpan semua css ke dalam file .css. Dengan demikian menggabungkan semua css Anda.

— Shashwat Sahai
sumber

0

Tanpa alat pihak ketiga dan aplikasi apa pun, Anda dapat menemukan CSS dan javascript yang tidak digunakan dengan menggunakan alat chrome dev di tab cakupan. baca posting di bawah ini dari pengembang google. tab cakupan chrome

— Safari Mahdi
sumber