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.
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.
@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.
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.
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) * nn = 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:
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.
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.
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
Jawaban:
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.
sumber
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.
sumber
multi-page website coverage == (single-page coverage) * nn = setiap halaman dalam situs web . Mengkategorikan alat / jawaban ini sebagai "tidak berguna" tidak akan menguntungkan siapa pun.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
sumber
Lihat UnCSS . Ini membantu dalam membuat file CSS dari CSS yang digunakan.
sumber
UnCSS cannot be run on non-HTML pages, such as templates or PHP files- lupakan .......Saya menggunakan CSS Dig . Ini dibuat untuk chrome, tapi menurut saya ini adalah alat yang hebat!
sumber
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.
sumber
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
sumber