¿Hay alguna manera de verificar qué estilos CSS se están utilizando o no en una página web?

Desea saber qué estilos CSS se están utilizando actualmente en una página web.

Instale el complemento CSS Usage para Firebug y ejecútelo en esa página. Le dirá qué estilos están siendo utilizados y no utilizados por esa página.

Google Chrome tiene dos formas de verificar el CSS no utilizado .

1. Pestaña de auditoría: > Haga clic con el botón derecho + Inspeccionar elemento en la página, busque la pestaña “Auditoría” y ejecute la auditoría, asegurándose de que esté marcado el “Rendimiento de la página web”.

Enumera todas las tags de CSS no utilizadas – ver imagen a continuación.

Captura de pantalla de la herramienta de auditoría de Chrome

Actualización: – – – – – – – – – – – – – – O – – – – – – – – – – – – – –

2. Ficha Cobertura: > Haga clic derecho + Inspeccionar elemento en la página, encuentre los tres puntos en el extremo derecho (rodeados por una imagen) y abra el cajón de la consola (o presione Esc), finalmente haga clic en los tres puntos del lado izquierdo en la imagen) para abrir la herramienta Cobertura.

Chrome lanzó una herramienta para ver CSS y JS no utilizados – Actualización de Chrome 59 Le permite iniciar y detener una grabación (cuadrado rojo en la imagen) para permitir una mejor cobertura de la experiencia del usuario en la página.

Muestra todos los CSS / JS usados ​​y no utilizados en los archivos – ver imagen a continuación.

Ejemplo de herramienta de cobertura en Chrome

Solo por completitud y porque se preguntó en los comentarios, ahora también está la herramienta de auditoría de CSS en Chrome para el mismo propósito. Algunos detalles aquí:

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

Estoy usando CSS Dig . Está hecho para Chrome, ¡pero creo que es una gran herramienta!

Eche un vistazo a UnCSS . Ayuda a crear un archivo CSS de CSS usado.