SnappySnippet
Finalmente encontrei algum tempo para criar esta ferramenta. Você pode instalar o SnappySnippet no Github. Permite fácil extração de HTML + CSS do nó DOM especificado (última inspeção). Além disso, você pode enviar seu código diretamente para o CodePen ou JSFiddle. Aproveitar!
Outras características
- limpa HTML (removendo atributos desnecessários, corrigindo recuo)
- otimiza CSS para torná-lo legível
- totalmente configurável (todos os filtros podem ser desligados)
- trabalha com
::beforee ::afterpseudoelementos
- interface agradável graças aos projetos Bootstrap e Flat-UI
Código
O SnappySnippet é de código aberto e você pode encontrar o código no GitHub .
Implementação
Como aprendi bastante ao fazer isso, decidi compartilhar alguns dos problemas que tive e minhas soluções para eles, talvez alguém ache isso interessante.
Primeira tentativa - getMatchedCSSRules ()
No começo, tentei recuperar as regras CSS originais (provenientes de arquivos CSS no site). Surpreendentemente, isso é muito simples graças a window.getMatchedCSSRules(), no entanto, não deu certo. O problema era que estávamos usando apenas uma parte dos seletores HTML e CSS correspondentes no contexto de todo o documento, que não correspondiam mais no contexto de um snippet HTML. Como analisar e modificar seletores não parecia uma boa ideia, desisti dessa tentativa.
Segunda tentativa - getComputedStyle ()
Então, comecei de algo que o @CollectiveCognition sugeriu - getComputedStyle(). No entanto, eu realmente queria separar o HTML do formulário CSS em vez de incluir todos os estilos.
Problema 1 - separando CSS de HTML
A solução aqui não era muito bonita, mas bastante direta. Designei IDs para todos os nós na subárvore selecionada e usei esse ID para criar regras CSS apropriadas.
Problema 2 - removendo propriedades com valores padrão
Atribuir IDs aos nós funcionou bem, no entanto, descobri que cada uma das minhas regras CSS possui ~ 300 propriedades, tornando todo o CSS ilegível.
Acontece que getComputedStyle()retorna todas as propriedades e valores possíveis de CSS calculados para o elemento especificado. Alguns deles estavam vazios, outros tinham valores padrão do navegador. Para remover os valores padrão, tive que obtê-los do navegador primeiro (e cada tag possui valores padrão diferentes). A solução foi comparar os estilos do elemento proveniente do site com o mesmo elemento inserido em um vazio <iframe>. A lógica aqui era que não há folhas de estilo vazias <iframe>; portanto, cada elemento que eu anexei lá tinha apenas estilos de navegador padrão. Dessa forma, consegui me livrar da maioria das propriedades que eram insignificantes.
Problema 3 - mantendo apenas propriedades abreviadas
A próxima coisa que descobri foi que as propriedades com taquigrafia equivalente eram desnecessariamente impressas (por exemplo, havia border: solid black 1pxe então border-color: black;, border-width: 1pxitd.).
Para resolver isso, simplesmente criei uma lista de propriedades que possuem equivalentes abreviados e as filtramos dos resultados.
Problema 4 - removendo propriedades prefixadas
O número de propriedades em cada regra foi reduzir significativamente após a operação anterior, mas eu descobri que eu peitoril tinha um monte de -webkit-propriedades prefixadas que eu nunca ouvir de ( -webkit-app-region? -webkit-text-emphasis-position?).
Fiquei pensando se eu deveria manter alguma dessas propriedades porque algumas delas pareciam úteis ( -webkit-transform-origin, -webkit-perspective-originetc.). No entanto, não descobri como verificar isso e, como sabia que na maioria das vezes essas propriedades são apenas lixo, decidi removê-las.
Problema 5 - combinando as mesmas regras CSS
O próximo problema que vi foi que as mesmas regras CSS são repetidas várias vezes (por exemplo, para cada uma <li>com exatamente os mesmos estilos, havia a mesma regra na saída CSS criada).
Era apenas uma questão de comparar regras e combinar essas que tinham exatamente o mesmo conjunto de propriedades e valores. Como resultado, em vez de #LI_1{...}, #LI_2{...}eu ter #LI_1, #LI_2 {...}.
Problema 6 - limpando e corrigindo o recuo do HTML
Desde que fiquei feliz com o resultado, mudei para HTML. Parecia uma bagunça, principalmente porque a outerHTMLpropriedade a mantém formatada exatamente como foi devolvida do servidor.
A única coisa que o código HTML retirado outerHTMLera necessário: uma simples reformatação do código. Como é algo disponível em todo IDE, eu tinha certeza de que há uma biblioteca JavaScript que faz exatamente isso. E acontece que eu estava certa (limpa jquery) . Além do mais, eu tenho remoção extra de atributos desnecessários ( style, data-ng-repeatetc.).
Problema 7 - filtros quebrando CSS
Como existe a possibilidade de que, em algumas circunstâncias, os filtros mencionados acima possam quebrar o CSS no snippet, eu os tornei opcionais. Você pode desativá-los no menu Configurações .
