Extrayendo solo el CSS utilizado en una página específica

Supongamos que tiene un sitio generado dinámicamente en 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 en absoluto, hay algunos selectores de clase y basados ​​en id, pero también demasiados selectores basados ​​en etiquetas. Y luego digamos que tiene 100 plantillas que usan estos estilos, a través de algún controlador.

¿Existe una herramienta, algo que tal vez funcione como Firebug, que pueda apuntar a una URL y determinaría todos los selectores CSS aplicables para esa página y los volcaría en un archivo? Básicamente, alguna forma de destrozar las hojas de estilo compartidas página por página.

He usado Selectores Dust-Me 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 las que se utilizan valores CSS.

La desventaja es que no pude automatizarlo para rastrear un sitio completo, por lo que terminé usándolo solo en páginas / plantillas clave de mi sitio. No obstante, es muy útil.

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

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

Al contrario del comentario anterior, Dust-Me Selectors 2.2 es compatible con Firefox 3.6 (lo acabo de instalar).

Sin lugar a dudas, la mejor herramienta que realmente hace exactamente lo que desea al obtener solo el CSS usado en la página y le permite simplemente copiarlo en su portapapeles es esta extensión de Chrome CSS usado

Ejemplo de imagen bonita

Estos parecen prometedores:

• Unused-CSS.com : servicio que modifica su sitio web y le envía los resultados por correo electrónico
• Uso de CSS - complemento Firebug

(No para firefox, pero tal vez esto ayude a alguien)

Si está trabajando en Chrome, puede usar esta extensión:

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

• te permite descargar un CSS combinado con todos los estilos usados
• muestra estilos no utilizados en la ventana emergente
• incluye estilos generados

Me encontré con Uncss-Online : servidor no oficial, muy conveniente para pruebas o uso único. Creo que es la mejor herramienta con la que me he encontrado.

UnCSS es una herramienta que elimina CSS no utilizado de sus hojas de estilo. Funciona en varios archivos y admite CSS inyectado con Javascript. Se puede utilizar de esta forma:

• Copie y pegue su HTML y CSS en los cuadros proporcionados
• Botón de clic
• Espera a que suceda la magia
• El CSS no utilizado se ha ido, ¡tome el resto y úselo!

Puede consultar su página de Github para conocer otras formas avanzadas de usar esta herramienta

SnappySnippet

Hay un complemento de código abierto de Chrome llamado SnappySnippet. Lo encontré mucho mejor que otros, simplemente amplía las herramientas de desarrollo ya disponibles en Chrome. Incluso puede extraer solo una parte de la página con todos los css relevantes. Mira esta publicación de stackoverflow

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, cssInlinees una lista textual de todas las hojas de acero 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; }

• uncss: Find Unused CSS - herramienta cli, usa phantomjs y ejecuta JS en la página, se puede usar en URL
• grunt-uncss : solo funciona en archivos estáticos
• ( CSS crítico : extrae CSS para los elementos visibles en la ventana del navegador)

Verifique PurifyCSS , y esto para aquellos que pueden manejar CLI o Gulp / Grunt / Webpack

Puede eliminar el estilo no utilizado de una sola página o de varias páginas o de todo el proyecto, aunque las clases estén siendo inyectadas por JavaScript.

Si puede buscar en Google, hay toneladas de recursos de los que puede aprender sobre PurifyCSS.

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

Si está tratando con páginas individuales, también puede usar mi marcador para obtener rápidamente solo el CSS que realmente usa la página web:

1. Vaya aquí (si este enlace está roto, también puede obtenerlo de pastebin ).
2. Arrastra el botón grande debajo de "Descargar Bookmarklet" a la barra de herramientas de marcadores.

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

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

Si es necesario, también puedo agregar una opción para minimizar el CSS generado. Dado que 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, agréguelo --allow-file-access-from-filesal destino de acceso directo de Chrome. Ejemplo:

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

Intente usar esta herramienta, que es solo un simple script js https://github.com/shashwatsahai/CSSExtractor/ Esta herramienta ayuda a obtener el CSS de una página específica que enumera todas las fuentes para 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 todos los estilos aplicados desde ellos. Puede guardar la salida en un archivo JSON con cualquier nombre.

Hmm ... Lanzaría algo de fuerza bruta en esto extrayendo los diversos selectores de CSS usando un análisis del lado del servidor del archivo CSS, luego ejecutaría cada uno de estos como un selector de jQuery dentro del navegador. No es muy elegante, pero ¿debería funcionar?

En septiembre de 2020, esta pregunta tiene casi 10 años. La mayoría de las soluciones proporcionadas ya no funcionan o los proyectos vinculados han desaparecido.

Sin embargo, la pregunta sigue siendo extremadamente relevante ya que Google ahora usa la velocidad de la página como una de sus métricas de priorización.

Después de investigar un montón sobre todos los enlaces enumerados, encontré purgecss.com . Esta parece ser la mejor opción para limpiar CSS no utilizado en aplicaciones web / SPA modernas usando Angular, React, Vue, etc. También hay integración de compilación con PostCSS, Webpack, Grunt y Gulp.

Además, UnCSS todavía parece mantenerse. Es tan poderoso como PurgeCSS pero no está tan integrado en los procesos de compilación o en las aplicaciones de JavaScript de una sola página.

También puede utilizar http://getcssusedinapage.com para utilizar CSS en una página. Es gratis, rápido y le devuelve muchos detalles junto con un código CSS minimizado y optimizado que puede copiar y pegar en su sitio web.