2011-10-13 13 views
5

Tengo muchos archivos CSS en la página. Pero muchos de estos archivos no son usados ​​por estilos. ¿Es posible determinar qué archivos se usan por página y cuáles no?Cómo encontrar qué archivos CSS se utilizan para la página actual

+0

posible duplicado de [CSS cleaner] (http://stackoverflow.com/questions/285442/css-cleaner) –

+0

posible duplicado de [Herramienta para identificar definiciones de CSS no utilizadas] (http: // stackoverflow.com/questions/135657/tool-to-identify-unused-css-definitions) – Quentin

+0

las dos preguntas marcadas como dup son relevantes, pero la respuesta aceptada para ambos (DustMe Selectors) parece que ya no está en desarrollo, y doesn ' Trabajar con la última versión de Firefox. – Spudley

Respuesta

10

Utilice http://getfirebug.com/ para depurar la página.

Al mirar el css, se hará referencia a qué hoja de estilo se utiliza.

Por ejemplo:

Se puede ver en la captura de pantalla que al utilizar Firebug se nota en el texto azul que la página está utilizando la hoja de estilo style.css.

enter image description here

trabajo por el árbol de Firebug y simplemente flotar sobre sus elementos y ver lo que se utilizan hojas de estilo.

+0

Nota para cualquiera que encuentre esto: Firebug ahora es parte de la consola de Firefox en lugar de un complemento – Machavity

1

Usted puede hacer una cosa:

  1. abrir la página web en Firefox

  2. Uso Firebug para señalar un cierto control sobre la que desea ver las clases aplicadas.

  3. En el código fuente html en firebug, puede encontrar las clases CSS aplicadas en un control en particular.

  4. Encuentra esas clases en tus archivos CSS.

  5. Repita este proceso para todos los controles de la página web.

Ahora puede eliminar los archivos CSS que no se utilizan en esa página web.

Gracias.

0

Hay muchas formas de encontrar qué CSS se utilizan por página. aquí están algunos de ellos:

1) si está usando firefox entonces firebug es útil para usar. http://getfirebug.com/ simplemente haga clic derecho en la página y utilice la opción Elemento

2 Inspeccionar) si se utiliza IE, luego Herramientas para desarrolladores está disponible en el IE

3) Si utilizas Google Chrome, entonces u puede utilizar directamente la opción de inspeccionar elemento haciendo clic derecho en la página.

Cuestiones relacionadas