Utilice un navegador que tenga un inspector de CSS. Safari y Chrome (también conocido como Webkit) proporcionan esto como parte de las herramientas de desarrollo. En Firefox, esto lo proporciona el complemento Firebug. Internet Explorer no tiene nada similar que yo sepa. El inspector le permitirá seleccionar un elemento, haga clic con el botón derecho y elija "Inspeccionar elemento"; luego, le mostrará qué selectores y qué reglas individuales se aplican al elemento que seleccionó.
Lee
La barra de herramientas del desarrollador de @Lee ie8 se comporta de la misma manera que Firebug en los selectores de CSS, puede seleccionar y ver los estilos aplicados en el lado derecho.
@Harry, una vez que instale este complemento, estará en la pestaña como parte de firebug donde tiene net y todo //// avíseme si necesita algo más
kobe
33
¿Hay algo parecido a esto en Chrome?
Pedro Luz
3
Esto parece que ya no funciona y, lamentablemente, ya no es compatible.
nostromo
1
Tenga en cuenta que Firebug ya no se mantiene. Creo que este complemento no funciona con DevTools integrado en Firefox.
Andrew
Puede usar la opción de auditoría en Chrome mientras realiza la inspección. Esto solo mostrará CSS que no se usa en esa página en particular.
Sarath Hari
81
Google Chrome tiene dos formas de comprobar si hay CSS no utilizado .
1. Pestaña 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 "Rendimiento de la página web" esté marcado.
Enumera todas las etiquetas CSS no utilizadas ; consulte la imagen a continuación.
2. Ficha Cobertura: > Haga clic con el botón derecho + Inspeccionar elemento en la página, busque los tres puntos en el extremo derecho (encerrados en un círculo en la imagen) y abra el Cajón de la consola (o presione Esc), finalmente haga clic en los tres puntos del lado izquierdo del cajón (en un círculo 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 (cuadro 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 usados en los archivos
; vea la imagen a continuación.
Sería fantástico ver cuáles también se utilizan ... pero es genial, gracias.
Serj Sagan
Por lo que puedo decir, si desea saber qué se usa, su mejor opción es instalar un complemento para Chrome, lo siento
Cordell
La nueva actualización de Chrome 59 le permite ver el CSS y JS usados / no usados
Cordell
¿Qué biblioteca usa Chrome para hacer esto?
Alexey Shevelyov
1
@UMAR multi-page website coverage == (single-page coverage) * ndonde n = cada página de un sitio web . Categorizar la herramienta / esta respuesta como "inútil" no beneficia a nadie.
Shai Cohen
40
Solo para completar y porque se preguntó en los comentarios, ahora también existe la herramienta de auditoría CSS en Chrome con el mismo propósito. Algunos detalles aquí:
No estoy seguro de que la "herramienta de auditoría CSS" a la que se refiere esta respuesta sea la misma que la pestaña Auditorías en las herramientas para desarrolladores de Chrome, pero eso le dirá qué reglas CSS no se utilizan (por ejemplo, "Some.css: 42% no es utilizado por la página actual. ").
Kenny Evitt
11
Eche un vistazo a UnCSS . Ayuda a crear un archivo CSS de CSS usado.
Acabo de probar esto: lo hace todo llamando a casa a cssdig.com, por lo que no puede ver ni analizar nada alojado localmente.
Brilliand
0
Intente usar esta herramienta, que es solo un script js simple https://github.com/shashwatsahai/CSSExtractor/ Esta herramienta ayuda a obtener el CSS de una página específica que enumera todas las fuentes de estilos activos y guardarlo en un JSON con fuente como clave y reglas como valor. Carga todo el CSS de los enlaces href y le dice a todos los estilos aplicados desde ellos. Puede modificar el código para guardar todo el CSS en un archivo .css. De este modo, combinando todos sus archivos css.
Sin herramientas de terceros ni ninguna aplicación, puede encontrar CSS y javascript no utilizados mediante las herramientas de desarrollo de Chrome en la pestaña de cobertura. lea la publicación a continuación de los desarrolladores de Google.
pestaña de cobertura de cromo
Respuestas:
Instale el complemento de uso de CSS para Firebug y ejecútelo en esa página. Le dirá qué estilos se utilizan y cuáles no en esa página.
fuente
Google Chrome tiene dos formas de comprobar si hay CSS no utilizado .
1. Pestaña 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 "Rendimiento de la página web" esté marcado.
Enumera todas las etiquetas CSS no utilizadas ; consulte la imagen a continuación.
Actualización: - - - - - - - - - - - - - - O - - - - - - - - - - - - - -
2. Ficha Cobertura: > Haga clic con el botón derecho + Inspeccionar elemento en la página, busque los tres puntos en el extremo derecho (encerrados en un círculo en la imagen) y abra el Cajón de la consola (o presione Esc), finalmente haga clic en los tres puntos del lado izquierdo del cajón (en un círculo 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 (cuadro 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 usados en los archivos ; vea la imagen a continuación.
fuente
multi-page website coverage == (single-page coverage) * ndonde n = cada página de un sitio web . Categorizar la herramienta / esta respuesta como "inútil" no beneficia a nadie.Solo para completar y porque se preguntó en los comentarios, ahora también existe la herramienta de auditoría CSS en Chrome con el mismo propósito. Algunos detalles aquí:
http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google
fuente
Eche un vistazo a UnCSS . Ayuda a crear un archivo CSS de CSS usado.
fuente
UnCSS cannot be run on non-HTML pages, such as templates or PHP files- no importa .......Estoy usando CSS Dig . Está hecho para cromo, ¡pero creo que es una gran herramienta!
fuente
Intente usar esta herramienta, que es solo un script js simple https://github.com/shashwatsahai/CSSExtractor/ Esta herramienta ayuda a obtener el CSS de una página específica que enumera todas las fuentes de estilos activos y guardarlo en un JSON con fuente como clave y reglas como valor. Carga todo el CSS de los enlaces href y le dice a todos los estilos aplicados desde ellos. Puede modificar el código para guardar todo el CSS en un archivo .css. De este modo, combinando todos sus archivos css.
fuente
Sin herramientas de terceros ni ninguna aplicación, puede encontrar CSS y javascript no utilizados mediante las herramientas de desarrollo de Chrome en la pestaña de cobertura. lea la publicación a continuación de los desarrolladores de Google. pestaña de cobertura de cromo
fuente