Make all CSS inline - Class Issue

Question

I found this awesome class that converts CSS style blocks to inline. However, I think it has a problem. For example, if you have the following:

<style type="text/css">
.myclass{
padding:0px;
}
<style>

<p class="myclass" style="padding-top: 40px;">Test</p>

It will convert the above to:

<p class="myclass" style="padding-top: 40px; padding:0px;">Test</p>

But the above is incorrect. It should prepend since the padding-top inline has priority as it is already inline. So it should be:

<p class="myclass" style="padding:0px; padding-top: 40px;">Test</p>

But I am struggling where to make this edit in the class. I thought it would be straightforward and I could submit it to the class creator but I am struggling.

Any ideas?

@Gordon for newsletter purposes or in-place content editing, for example. — yoda
– yoda, Commented Aug 14, 2011 at 15:25
@Gordon - many email clients, ignore style blocks including Gmail. — Abs
– Abs, Commented Aug 14, 2011 at 15:28
fair enough but thats about the only two things I can think of and at least the newsletter is due to poor standards in that field only. Might want to add that it's for a newsletter then though. — Gordon
– Gordon, Commented Aug 14, 2011 at 15:29
If this is about emails.. then i suggest you try this: premailer.dialect.ca — Joonas
– Joonas, Commented Aug 14, 2011 at 15:33

Hari K T · Accepted Answer · 2011-08-14 15:44:46Z

4

The best solution is create an issue and get in touch with the developer. So he can fix it for others too. That's a growth of the community .

Just going through the code in a quick way what I think is before building the chunks reverse the array $properties

$properties = array_reverse ( $properties, true );
// build chunks
foreach($properties as $key => $values)

The $properties = array_reverse ( $properties, true ) which preserves the key on the top of build chunks on line 318 as linked will reverse all.

Hope that helps! Not sure whether this will bring any other issues, just try.

edited Aug 14, 2011 at 15:44

answered Aug 14, 2011 at 15:33

Hari K T

4,2644 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abs Over a year ago

it looks like it works with your change! Wow that is awesome! Going to test it some more.

Abs Over a year ago

Yes, it works for me! I found another issue with this class but I'll try solving it myself, if I can't I'll open another question. Thanks Hari! :)

Abs Over a year ago

Just so that everyone knows. The class has been updated by the owner and it can be found here: github.com/tijsverkoyen/CssToInlineStyles

micha · Accepted Answer · 2011-08-14 15:33:04Z

0

in my opinion

<p class="myclass" style="padding-top: 40px; padding:0px;">Test</p>

isn't wrong. because a inline-style overwrite a class-style

answered Aug 14, 2011 at 15:33

micha

112 bronze badges

2 Comments

Abs Over a year ago

The above will equate to the p tag having a padding of 0px -which isn't the case. It should have a padding-top of 40px.

micha Over a year ago

what i mean is: if u add a class to a p-tag that have already a inlinestyle. the inlinestyle still overwrites the class. the behavior is normal.

Tijs · Accepted Answer · 2011-08-16 09:13:24Z

0

Should be fixed in the latest version: see https://github.com/tijsverkoyen/CssToInlineStyles

answered Aug 16, 2011 at 9:13

Tijs

715 bronze badges

Collectives™ on Stack Overflow

Make all CSS inline - Class Issue

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related