3

Estou querendo/necessitando fazer um conversor de CSS para estilos inline utilizando único e exclusivamente tecnologias client-side.

Pesquisando até encontrei algum coisa, no caso está biblioteca (jquery.inlineStyler) e está implementação, mais não me atende como gostaria, pois ele converte todas as propriedades do style do elemento para style inline (inclusive as default do browser), que não é o que eu gostaria.

O que eu gostaria era que as unicas propriedades CSS convertidas para style inline sejam as declaradas no CSS, e não todas as default do browser para aquele elemento.

Um exemplo simples do resultado que gostaria:

p {
  color: green;
  background-color: #ccc;
}
p.p2 {
  color: blue;
  font-size: 15pt;
}
<p>Paragrafo</p>
<p class="p2">Paragrafo 2</p>

Onde o resultado esperado para esse HTML seria:

<p style="color: green;background-color: #ccc;">Paragrafo</p>
<p style="color: blue;background-color: #ccc;font-size: 15pt;">Paragrafo 2</p>

1 Resposta 1

4

Tanto quanto sei não há uma maneira simples (método nativo ou biblioteca) que faça isso. Não havendo método nativo para isso é difícil fazer isso com JavaScript pois algumas regras sobrepõem-se e fica dificil saber qual tem prioridade.

Mas comecei uma ideia que podes continuar se quiseres e fôr útil.

var estilos = document.styleSheets; // CSSStyleSheet.rules
for (var i = 0; i < estilos.length; i++) {
    var regras = estilos[i].rules;
    for (var j = 0; j < regras.length; j++) {
        var str = regras[j].cssText;
        var seletor = str.split('{')[0];
        var style = str.match(/\{([^\{\}]*)\}/)[1];
        aplicar(seletor, style);
    }
}

function aplicar(seletor, regras) {
    console.log(seletor, '-', regras);
    var elementos = document.querySelectorAll(seletor);
    for (var i = 0; i < elementos.length; i++) {
        var el = elementos[i];
        var regrasExistentes = el.getAttribute('style') || '';
        el.setAttribute('style', regrasExistentes + regras);
    }
}

jsFiddle: http://jsfiddle.net/26xfuvm6/

Um passo que falta dar e que agora não tenho tempo de fazer é verificar nos estilos inline já inseridos e comparar com a próxima regra que lhe vai ser aplicada. Parece que o Browser resolve isso naturalmente uma vez que os estilos estão ordenados do primeiro para o ultimo mas não tive tempo de testar...

4
  • 1
    É uma boa mesmo Sergio, depois que postei aqui encontrei isso, que é bem próximo do que você sugere, acho que esse é o caminho mesmo, só estou tentando analisar os casos como você citou de sobrepor regras, para ver como se comporta, mas no exemplo da pergunta o seu e este funcionam. Commented 8/06/2015 às 20:32
  • 1
    @Fernando interessante essa outra solução. Pois os casos de sobreposição podem ser mais bicudos. Não sei se o document.styleSheets já trás as prioridades defenidas no caso do CSS não ter regras na ordem certa. E depois o que referí e não tenho tempo de fazer agora é verificar se por exemplo color já existe. No caso do p2 ele sobrepõe e funciona, mas no style do HTML estão lá os dois e podia extraír-se o antigo. Espero ter ajudado!
    – Sergio
    Commented 8/06/2015 às 20:36
  • A sim @Sergio, agora que vi isso no seu código, e analisando o outro, ele parece resolver as propriedades duplicadas, armazenando-as no objeto JSON, onde a chave é o nome do atributo. Mas ainda não tenho certeza se isso vai funcionar para estilos mais elaborados e cheios de regras de sobreposição. Vou analisando aqui enquanto isso. E muito obrigado até então pela ajuda, é de muita valia. Commented 8/06/2015 às 20:44
  • 1
    @Fernando comenta aqui se falta mais alguma coisa no meu código, eu hoje não tenho muito tempo mas gostava de melhorar a resposta depois para se outros quiserem usar também.
    – Sergio
    Commented 8/06/2015 às 20:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .