¿Existe alguna forma de comprobar qué estilos CSS se utilizan o no en una página web?

121

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

css

— AYUDA
fuente

2

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.

— Kobe

posible duplicado de Extraer solo el CSS utilizado en una página específica

— cweiske

58

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.

— Kobe
fuente

@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.

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.

— Cordell
fuente

3

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) * n donde 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í:

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

— Jan Petzold
fuente

3

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.

— Robert Brisita
fuente

1

Ese es un gran programa. ¡Gracias! Rob

— r0berts

1

Buena herramienta web para ocasiones especiales. ty

— billynoah

1

Esto es asombroso - UnCSS cannot be run on non-HTML pages, such as templates or PHP files- no importa .......

— Brian Powell

@ brian-powell sí, la salida de las plantillas debería generarse primero. ¿De qué otra manera sabría UnCSS lo que se necesita?

— Robert Brisita

8

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

— cs.matyi
fuente

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.

— Shashwat Sahai
fuente

0

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

— Safari Mahdi
fuente