Extracción solo del css utilizado en una página específica

Question

Supongamos que tiene un sitio generado dinámicamente por el que han trabajado demasiadas personas, pasadas y presentes, y ahora tiene una colección de hojas de estilo compartidas que contienen más de 20,000 líneas de CSS. No está organizado del todo, hay algunos selectores basados ​​en clases e identificadores, pero también demasiados selectores basados ​​en etiquetas. Y luego diga que tiene 100 plantillas que usan estos estilos, a través de algún controlador.

¿Hay alguna herramienta, algo que funcione como Firebug quizás, que pueda apuntar a una url y determine todos los selectores de CSS aplicables para esa página y los deposite en un archivo? Básicamente, una forma de desgarrar las hojas de estilo compartidas página por página.

Answer 1

que he usado Polvo-Me selectores antes , que es un complemento de Firefox. Es muy fácil de usar y versátil ya que mantiene una lista combinada en varias páginas de los valores de CSS que se utilizan.

El inconveniente es que no pude automatizarlo para arañar todo un sitio, así que terminé usándolo solo en páginas clave/páginas de mi sitio. Sin embargo, es muy útil.

http://www.sitepoint.com/dustmeselectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

Contrariamente al comentario anterior Dust-Me selectores 2.2 es compatible con Firefox 3.6 (que acabo de instalar).

Answer 2

Hmm .. Me gustaría echar un poco de fuerza bruta al extraer los diferentes selectores de CSS utilizando un análisis del archivo CSS en el servidor, luego ejecutar cada uno de ellos como un selector jQuery dentro del navegador. No es muy elegante, pero debería funcionar?

Answer 3

Estos son prometedores:

• Unused-CSS.com - Servicio que las arañas su sitio web y correos electrónicos que los resultados
• CSS Usage - Firebug complemento

Answer 4

Esta extensión de Firefox probablemente resuelva su problema, Dust-Me Selectors. También hay una pequeña aplicación de escritorio llamada CssCleaner o CssHelper pero yo era incapaz de encontrar un enlace a ella ... (solo hay aquí en mi máquina descargada hace mucho tiempo para una tarea similar)

Answer 5

SnappySnippet

Hay un ad-on de código abierto de cromo llamado SnappySnippet. Lo encontré mucho mejor que otro, simplemente amplía las herramientas de desarrollador ya disponibles en chrome. Incluso puede extraer solo una parte de la página con todas las CSS relevantes.Mira this stackoverflow post

Answer 6

(no para Firefox, pero tal vez esto ayude a alguien)

Si está trabajando en el cromo se puede utilizar esta extensión:

CSS quitar y combinar (https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh)

• le permite descargar un css combinado con todos los estilos utilizados
• muestra los estilos sin usar en la ventana emergente
• estilos incluye generados

Answer 7

• uncss: Find Unused CSS - herramienta CLI, utiliza PhantomJS y ejecuta JS en la página, se pueden utilizar en las direcciones URL
• grunt-uncss - sólo funciona en archivos estáticos
• (critical css - Extractos CSS para los elementos visibles en la ventana del navegador)

Answer 8

Indiscutiblemente, el mejor que realmente hace exactamente lo que usted quiere obteniendo solo el css usado en la página y que permite a simple copia en el portapapeles y pegar es esta extensión de Chrome CSS Used

Bastante cuadro del ejemplo

Answer 9

Si usted está tratando con una sola página , también se puede usar mi bookmarklet para agarrar rápidamente sólo el CSS que se utiliza realmente por la página web:

1. here Go (si este enlace se rompe , también puede obtenerlo en pastebin).
2. Arrastra el botón grande debajo de "Descargar Bookmarklet" en la barra de herramientas de tus marcadores.

Eso es todo. Ahora, siempre que desee encapsular una página estática (es decir, para hacerla portátil o si tiene la intención de publicarla desde su propio iframe), simplemente haga clic en el marcador y mostrará todo el CSS utilizado en la página actual en una superposición. Haga clic en la sombra para cerrar la superposición.

Una cosa buena con esta solución es que admite páginas receptivas ya que las consultas de medios también se extraen. Como beneficio adicional, las consultas de medios se ordenan según la especificidad del tamaño de la ventana (por ejemplo, @media (max-width: 767px) vendrá después de@media (max-width: 1023px)).

Si hay una necesidad, también puedo agregar una opción para minimizar el CSS generado. Como solo he usado este bookmarklet para mis propias necesidades, no se ha probado ampliamente, así que informe cualquier problema en los comentarios.

NOTA: Para que este bookmarklet funcione con archivos locales en Chrome, agregue --allow-file-access-from-files al destino de acceso directo de Chrome.Ejemplo:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files 

Answer 10

Aquí está mi solución usando JavaScript:

var css = []; 
for (var i=0; i<document.styleSheets.length; i++) 
{ 
    var sheet = document.styleSheets[i]; 
    var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules; 
    if (rules) 
    { 
     css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */'); 
     for (var j=0; j<rules.length; j++) 
     { 
      var rule = rules[j]; 
      if ('cssText' in rule) 
       css.push(rule.cssText); 
      else 
       css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n'); 
     } 
    } 
} 
var cssInline = css.join('\n')+'\n'; 

Al final, cssInline es una lista textual de todos los steelsheets de la página y su contenido.

Ejemplo:

/* Stylesheet : http://example.com/cache/css/javascript.css */ 
.javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); } 
.javascript { color: rgb(172, 172, 172); } 
.javascript .imp { font-weight: bold; color: red; } 

/* Stylesheet : http://example.com/i/main_master.css */ 
html { } 
body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); } 
a { color: rgb(204, 0, 51); text-decoration: none; } 
a:hover { color: rgb(153, 153, 153); text-decoration: none; } 
.icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; } 
#header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); } 
#super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; } 
#monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); } 
#header a { color: rgb(255, 255, 255); } 
#menu_2 { height: 290px; } 

/* Stylesheet : [inline styles] */ 
.hidden { display: none; } 

Answer 11

Comprobar si PurifyCSS, y esto por los que puede manejar CLI o Gulp/ronco/webpack

Puede quitar el estilo no utilizada de una sola página o de varias páginas o desde el todo el proyecto, incluso si las clases están siendo inyectadas por javascript.

Si puede buscar en Google, hay muchos recursos disponibles que le permitirán conocer PurifyCSS.