Extraindo apenas o css usado em uma página específica

Digamos que você tenha um site gerado dinamicamente que tenha sido trabalhado por muitas pessoas, no passado e no presente, e agora você tenha uma coleção de folhas de estilo compartilhadas que contêm mais de 20.000 linhas de CSS. Não é organizado, existem alguns seletores baseados em classe e id, mas também muitos seletores baseados em tag. E digamos que você tenha 100 modelos que usam esses estilos, por meio de algum controlador.

Existe uma ferramenta, algo que funciona como Firebug, talvez, que você pode apontar para um url e determinar todos os seletores de CSS aplicáveis ​​para essa página e despejá-los em um arquivo? Basicamente, alguma forma de separar as folhas de estilo compartilhadas página a página.

Eu usei os seletores Dust-Me antes, que é um plugin do Firefox. É muito fácil de usar e versátil, pois mantém uma lista combinada em várias páginas das quais os valores CSS são usados.

A desvantagem é que não fui capaz de automatizá-lo para rastrear um site inteiro, então acabei usando apenas nas principais páginas / modelos do meu site. No entanto, é muito útil.

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

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

Ao contrário do comentário acima, Dust-Me Selectors 2.2 é compatível com Firefox 3.6 (acabei de instalá-lo).

A melhor ferramenta que realmente faz exatamente o que você deseja, obtendo apenas o CSS usado na página e permite que você simplesmente copie para sua área de transferência, é esta extensão do Chrome CSS usado

Exemplo de imagem bonita

Estes parecem promissores:

• Unused-CSS.com - Serviço que rastreia seu site e envia por e-mail os resultados
• Uso de CSS - complemento Firebug

(Não para o firefox, mas talvez isso ajude alguém)

Se você estiver trabalhando no Chrome, poderá usar esta extensão:

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

• permite que você baixe um css combinado com todos os estilos usados
• mostra estilos não usados ​​na janela pop-up
• inclui estilos gerados

Eu me deparei com Uncss-Online - servidor não oficial, muito conveniente para teste ou uso único! Acho que é a melhor ferramenta que encontrei.

UnCSS é uma ferramenta que remove CSS não utilizado de suas folhas de estilo. Ele funciona em vários arquivos e oferece suporte a CSS injetado em Javascript. Ele pode ser usado desta forma:

• Copie e cole seu HTML e CSS nas caixas fornecidas
• Clique no botão
• Espere que a magia aconteça
• O CSS não utilizado acabou, pegue o resto e use-o!

Você pode verificar a página do Github para outras maneiras avançadas de usar esta ferramenta

SnappySnippet

Existe um ad-on de código aberto do Chrome chamado SnappySnippet . Achei muito melhor do que outro, apenas estende as ferramentas de desenvolvedor já disponíveis no Chrome. Você pode até extrair apenas uma parte da página com todos os css relevantes. Veja esta postagem stackoverflow

Esta é minha solução 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';

No final, cssInlineé uma lista textual de todas as planilhas da página e seu conteúdo.

Exemplo:

    /* 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 - ferramenta cli, usa phantomjs e executa JS na página, pode ser usado em URLs
• grunt-uncss - funciona apenas em arquivos estáticos
• ( CSS crítico - extrai CSS para elementos visíveis na janela do navegador)

Verifique se há PurifyCSS , e isso para aqueles que podem lidar com CLI ou Gulp / Grunt / Webpack

Você pode remover o estilo não utilizado de uma única página ou de várias páginas ou de todo o projeto, mesmo que as classes sejam injetadas por javascript.

Se você puder pesquisar no Google, existem toneladas de recursos com os quais você pode aprender sobre o PurifyCSS.

Esta extensão do Firefox provavelmente resolverá seu problema, Dust-Me Selectors . Há também um pequeno aplicativo de desktop chamado CssCleaner ou CssHelper, mas não consegui encontrar um link para ele ... (basta tê-lo aqui na minha máquina baixado há muito tempo para uma tarefa semelhante)

Se estiver lidando com páginas únicas, você também pode usar meu bookmarklet para pegar rapidamente apenas o CSS que é realmente usado pela página da web:

1. Vá aqui (se este link estiver quebrado, você também pode obtê-lo no pastebin ).
2. Arraste o botão grande em "Baixar Bookmarklet" para a barra de ferramentas de favoritos.

É isso aí. Agora, sempre que você quiser encapsular uma página estática (ou seja, torná-la portátil ou se pretende exibi-la a partir de seu próprio iframe), basta clicar no marcador e ele exibirá em uma sobreposição todos os CSS usados ​​na página atual. Clique na sombra para fechar a sobreposição.

Uma coisa boa com essa solução é que ela oferece suporte a páginas responsivas, já que as consultas de mídia também são extraídas. Como um bônus, as consultas de mídia são classificadas pela especificidade do tamanho da janela de visualização (por exemplo, @media (max-width: 767px)virá depois @media (max-width: 1023px) ).

Se houver necessidade, também posso adicionar uma opção para minimizar o CSS gerado. Como só usei este bookmarklet para minhas próprias necessidades, ele não foi amplamente testado, portanto, relate quaisquer problemas nos comentários.

NOTA: Para fazer este bookmarklet funcionar com arquivos locais no Chrome, adicione --allow-file-access-from-filesao destino de atalho do Chrome. Exemplo:

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

Tente usar esta ferramenta, que é apenas um script js simples https://github.com/shashwatsahai/CSSExtractor/ Esta ferramenta ajuda a obter o CSS de uma página específica listando todas as fontes para estilos ativos e salvá-lo em um JSON com fonte como chave e regras como valor. Ele carrega todo o CSS dos links href e informa todos os estilos aplicados a partir deles. Você pode salvar a saída em um arquivo JSON com qualquer nome.

Hmm .. Eu jogaria alguma força bruta nisso extraindo os vários seletores CSS usando uma análise do lado do servidor do arquivo CSS e, em seguida, executaria cada um deles como um seletor jQuery no navegador. Não é muito elegante, mas deve funcionar?

Em setembro de 2020, essa pergunta tinha quase 10 anos. A maioria das soluções fornecidas não funciona mais ou os projetos vinculados desapareceram.

No entanto, a questão ainda é extremamente relevante, já que o Google agora usa a velocidade da página como uma de suas métricas de priorização.

Depois de fazer muitas pesquisas em todos os links listados, encontrei o purgecss.com . Esta parece ser a melhor opção para limpar CSS não utilizado em aplicativos da web / SPAs modernos usando Angular, React, Vue, etc. Há também integração de build com PostCSS, Webpack, Grunt e Gulp.

Além disso, o UnCSS ainda parece ser mantido. É tão poderoso quanto o PurgeCSS, mas não tão integrado aos processos de construção ou aplicativos javascript de página única.

Você também pode usar http://getcssusedinapage.com para obter o CSS usado em uma página. É grátis, rápido e fornece muitos detalhes junto com código CSS minimizado e otimizado que você pode simplesmente copiar e colar em seu site