3
I’m wanting/needing to make a CSS converter for styles inline using only and exclusively technologies client-side.
Researching until I found something, in case is library (jquery.inlineStyler) and is implementing, but it does not attend me as it would like, because it converts all the properties of the style
of the element to style
inline (including the default browser), which is not what I would like.
What I would like is that the only CSS properties converted to style
inline are those declared in the CSS, not all default from the browser to that element.
A simple example of the result I would like:
p {
color: green;
background-color: #ccc;
}
p.p2 {
color: blue;
font-size: 15pt;
}
<p>Paragrafo</p>
<p class="p2">Paragrafo 2</p>
Where the expected result for this HTML would be:
<p style="color: green;background-color: #ccc;">Paragrafo</p>
<p style="color: blue;background-color: #ccc;font-size: 15pt;">Paragrafo 2</p>
It’s a good one, Sergio, after I posted it here that, which is very close to what you suggest, I think that’s the way it is, I’m just trying to analyze the cases as you mentioned of overriding rules, to see how it behaves, but in the example of the question yours and this work.
– Fernando Leal
@Fernando interesting this other solution. Because the overlap cases can be more sharp. I do not know if the
document.styleSheets
already brings down the defined priorities in case the CSS has no rules in the right order. And then what I’m talking about and I don’t have time to do right now is to checkcolor
already exists. In the case ofp2
it overlaps and works, but instyle
HTML are there the two and could extract the old. I hope to have helped!– Sergio
Yes @Sergio, now that I’ve seen this in your code, and analyzing the other one, it seems to solve the duplicate properties by storing them in the JSON object, where the key is the attribute name. But I’m still not sure if this is going to work for more elaborate styles and full of overlap rules. I’m going to look at it here in the meantime. And thank you so much so far for the help, it’s very valuable.
– Fernando Leal
@Fernando comments here if there is something more missing in my code, I don’t have much time today but I would like to improve the answer later to if others want to use too.
– Sergio